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
47
48
49
50
51
52
<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-c5a1fab2" class="text-sm font-medium">Plan</label>
</div>
<button type="button" id="ui-select-c5a1fab2" 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-c5a1fab2-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-c5a1fab2-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-c5a1fab2" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
    <div id="ui-select-c5a1fab2-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-c5a1fab2-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-c5a1fab2-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-c5a1fab2-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 id="ui-select-c5a1fab2-option-4" role="option" aria-selected="false" data-value="enterprise" 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">Enterprise</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>
  <option value="enterprise">Enterprise</option>
</select></div>
1
2
3
render(UI::Select.new(name: "plan", label: "Plan", options: PLANS, prompt: prompt.presence,
                      size: size.to_sym, required: required, error: error, disabled: disabled,
                      searchable: searchable, multiple: multiple))

No notes provided.

Param Description Input

—

—

—

—

—

—

—