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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<div class="flex max-w-xs flex-col gap-5">
  <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…">
    <div class="mb-2"><label for="ui-select-22990566" class="text-sm font-medium">Selected</label>
    </div>
    <button type="button" id="ui-select-22990566" 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-22990566-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class=" truncate">Editor</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-22990566-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-22990566" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-22990566-option-0" role="option" aria-selected="false" data-value="Viewer" 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">Viewer</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-22990566-option-1" role="option" aria-selected="true" data-value="Editor" 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">Editor</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-22990566-option-2" role="option" aria-selected="false" data-value="Admin" 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">Admin</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="a">
      <option value="Viewer">Viewer</option>
      <option value="Editor" selected="selected">Editor</option>
      <option value="Admin">Admin</option>
    </select></div>
  <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 role">
    <div class="mb-2"><label for="ui-select-90d60de7" class="text-sm font-medium">Required<span class="text-destructive ml-0.5"> *</span></label>
    </div>
    <button type="button" id="ui-select-90d60de7" 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-90d60de7-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 role</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-90d60de7-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-90d60de7" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-90d60de7-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 role</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-90d60de7-option-1" role="option" aria-selected="false" data-value="Viewer" 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">Viewer</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-90d60de7-option-2" role="option" aria-selected="false" data-value="Editor" 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">Editor</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-90d60de7-option-3" role="option" aria-selected="false" data-value="Admin" 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">Admin</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" required="required" name="b">
      <option value="" selected="selected">Choose a role</option>
      <option value="Viewer">Viewer</option>
      <option value="Editor">Editor</option>
      <option value="Admin">Admin</option>
    </select></div>
  <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 role">
    <div class="mb-2"><label for="ui-select-1298f1fb" class="text-sm font-medium">With an error</label>
    </div>
    <button type="button" id="ui-select-1298f1fb" class="flex w-full items-center justify-between gap-2 rounded-md border bg-background text-left text-foreground shadow-xs transition-all focus:outline-none focus:ring-2 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 border-destructive focus:ring-destructive" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-1298f1fb-listbox" aria-invalid="true" 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 role</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-1298f1fb-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-1298f1fb" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-1298f1fb-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 role</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-1298f1fb-option-1" role="option" aria-selected="false" data-value="Viewer" 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">Viewer</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-1298f1fb-option-2" role="option" aria-selected="false" data-value="Editor" 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">Editor</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-1298f1fb-option-3" role="option" aria-selected="false" data-value="Admin" 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">Admin</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="c">
      <option value="" selected="selected">Choose a role</option>
      <option value="Viewer">Viewer</option>
      <option value="Editor">Editor</option>
      <option value="Admin">Admin</option>
    </select></div>
  <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…">
    <div class="mb-2"><label for="ui-select-ae5d958d" class="text-sm font-medium text-muted-foreground cursor-not-allowed">Disabled</label>
    </div>
    <button type="button" id="ui-select-ae5d958d" 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" disabled="disabled" aria-haspopup="listbox" aria-expanded="false" aria-controls="ui-select-ae5d958d-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown">
      <span data-ui--select-target="value" class=" truncate">Viewer</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-ae5d958d-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-ae5d958d" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1">
        <div id="ui-select-ae5d958d-option-0" role="option" aria-selected="true" data-value="Viewer" 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">Viewer</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-ae5d958d-option-1" role="option" aria-selected="false" data-value="Editor" 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">Editor</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-ae5d958d-option-2" role="option" aria-selected="false" data-value="Admin" 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">Admin</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" disabled="disabled" name="d">
      <option value="Viewer" selected="selected">Viewer</option>
      <option value="Editor">Editor</option>
      <option value="Admin">Admin</option>
    </select></div>
</div>
1
2
3
4
5
6
<div class="flex max-w-xs flex-col gap-5">
  <%= render(UI::Select.new(name: "a", label: "Selected", options: %w[Viewer Editor Admin], selected: "Editor")) %>
  <%= render(UI::Select.new(name: "b", label: "Required", options: %w[Viewer Editor Admin], prompt: "Choose a role", required: true)) %>
  <%= render(UI::Select.new(name: "c", label: "With an error", options: %w[Viewer Editor Admin], prompt: "Choose a role", error: true)) %>
  <%= render(UI::Select.new(name: "d", label: "Disabled", options: %w[Viewer Editor Admin], selected: "Viewer", disabled: true)) %>
</div>

No notes provided.

No params configured.