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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="max-w-xs">
  <div class="relative w-full" data-controller="ui--select" data-ui--select-multiple-value="false" data-ui--select-summary-value="%{count} selected" data-ui--select-placeholder-value="Choose a plan">
    <div class="mb-2"><label for="ui-select-c6a469e8" class="text-sm font-medium">Plan</label>
    </div>
    <button type="button" id="ui-select-c6a469e8" class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-left text-foreground shadow-xs transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background aria-expanded:ring-2 aria-expanded:ring-primary aria-expanded:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted h-9 px-3 text-sm" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-c6a469e8-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class="text-muted-foreground truncate">Choose a plan</span>
      <i data-lucide="chevrons-up-down" class="inline-block w-4 h-4 shrink-0 text-muted-foreground" aria-hidden="true"></i>
    </button>
    <div hidden="hidden" data-ui--select-target="panel" data-state="closed" class="z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95">
      <div id="ui-select-c6a469e8-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-c6a469e8" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-c6a469e8-option-0" role="option" aria-selected="true" data-value="" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium text-muted-foreground">
          <span class="truncate">Choose a plan</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" >
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-c6a469e8-option-1" role="option" aria-selected="false" data-value="free" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Free</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-c6a469e8-option-2" role="option" aria-selected="false" data-value="team" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Team</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
        
        <div id="ui-select-c6a469e8-option-3" role="option" aria-selected="false" data-value="business" data-ui--select-target="option" data-action="click->ui--select#choose mousemove->ui--select#hover" class="relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:font-medium ">
          <span class="truncate">Business</span>
          <span class="absolute right-2 flex size-4 items-center justify-center text-primary dark:text-foreground" data-ui--select-target="check" hidden>
            <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
          </span>
        </div>
      </div>
    </div>
    <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native" name="plan">
      <option value="" selected="selected">Choose a plan</option>
      <option value="free">Free</option>
      <option value="team">Team</option>
      <option value="business">Business</option>
    </select></div>
</div>
1
2
3
4
<div class="max-w-xs">
  <%= render(UI::Select.new(name: "plan", label: "Plan", prompt: "Choose a plan",
                            options: [ [ "Free", "free" ], [ "Team", "team" ], [ "Business", "business" ] ])) %>
</div>

No notes provided.

No params configured.