VelvetKit

Previews

No matching results.

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
<div class="flex max-w-sm flex-col gap-4">
  <div class="flex flex-col gap-2 w-full">
    <label for="ui-native-select-c34e6bbb" class="text-sm font-medium">sm</label>
    <div class="relative w-full">
      <select id="ui-native-select-c34e6bbb" 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-8 pl-2.5 pr-8 py-1 text-xs" name="s_sm"><option value="">Choose a section</option><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-4c8419a7" class="text-sm font-medium">default</label>
    <div class="relative w-full">
      <select id="ui-native-select-4c8419a7" 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="s_default"><option value="">Choose a section</option><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-a508ad4e" class="text-sm font-medium">lg</label>
    <div class="relative w-full">
      <select id="ui-native-select-a508ad4e" 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-10 pl-4 pr-10 py-2.5 text-base" name="s_lg"><option value="">Choose a section</option><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">
  <% %i[sm default lg].each do |size| %>
    <%= render(UI::NativeSelect.new(name: "s_#{size}", options: UI::NativeSelectPreview::SECTIONS,
                              prompt: "Choose a section", size: size, label: size.to_s)) %>
  <% end %>
</div>

No notes provided.

No params configured.