x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="flex max-w-sm flex-col gap-4"> <div class="flex flex-col gap-2 w-full"> <label for="ui-native-select-4cc8a19d" class="text-sm font-medium">Default</label> <div class="relative w-full"> <select id="ui-native-select-4cc8a19d" class="flex w-full appearance-none rounded-md border border-input bg-background text-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted! h-9 pl-3 pr-9 py-2 text-sm" name="a"><option value="1" >Design</option><option value="2" >Engineering</option><option value="3" >Marketing</option></select> <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"><i data-lucide="chevron-down" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span> </div> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-native-select-e0b95c43" class="text-sm font-medium">Required<span class="text-destructive ml-0.5"> *</span></label> <div class="relative w-full"> <select id="ui-native-select-e0b95c43" class="flex w-full appearance-none rounded-md border border-input bg-background text-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted! h-9 pl-3 pr-9 py-2 text-sm" name="b" required="required"><option value="1" >Design</option><option value="2" >Engineering</option><option value="3" >Marketing</option></select> <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"><i data-lucide="chevron-down" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span> </div> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-native-select-e3447493" class="text-sm font-medium">Error</label> <div class="relative w-full"> <select id="ui-native-select-e3447493" class="flex w-full appearance-none rounded-md border bg-background text-foreground transition-all focus:outline-none focus:ring-2 focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted! h-9 pl-3 pr-9 py-2 text-sm border-destructive focus:ring-destructive" name="c" aria-invalid="true"><option value="1" >Design</option><option value="2" >Engineering</option><option value="3" >Marketing</option></select> <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"><i data-lucide="chevron-down" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span> </div> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-native-select-d7304133" class="text-sm font-medium text-muted-foreground cursor-not-allowed">Disabled</label> <div class="relative w-full"> <select id="ui-native-select-d7304133" class="flex w-full appearance-none rounded-md border border-input bg-background text-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted! h-9 pl-3 pr-9 py-2 text-sm" name="d" disabled="disabled"><option value="1" >Design</option><option value="2" >Engineering</option><option value="3" >Marketing</option></select> <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground"><i data-lucide="chevron-down" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span> </div> </div></div>1
2
3
4
5
6
<div class="flex max-w-sm flex-col gap-4"> <%= render(UI::NativeSelect.new(name: "a", options: UI::NativeSelectPreview::SECTIONS, label: "Default")) %> <%= render(UI::NativeSelect.new(name: "b", options: UI::NativeSelectPreview::SECTIONS, label: "Required", required: true)) %> <%= render(UI::NativeSelect.new(name: "c", options: UI::NativeSelectPreview::SECTIONS, label: "Error", error: true)) %> <%= render(UI::NativeSelect.new(name: "d", options: UI::NativeSelectPreview::SECTIONS, label: "Disabled", disabled: true)) %></div>No notes provided.
No params configured.