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
<div class="max-w-xs"> <div class="relative w-full" data-controller="ui--select" data-ui--select-multiple-value="true" data-ui--select-summary-value="%{count} selected" data-ui--select-placeholder-value="Add reviewers"> <div class="mb-2"><label for="ui-select-555ff728" class="text-sm font-medium">Reviewers</label> </div> <button type="button" id="ui-select-555ff728" 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-555ff728-listbox" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown"> <span data-ui--select-target="value" class=" truncate">Asha Kulkarni, Ravi Menon</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 class="flex items-center gap-2 border-b px-3 py-2"> <i data-lucide="search" class="inline-block w-4 h-4 shrink-0 text-muted-foreground" aria-hidden="true"></i> <input type="search" id="ui-select-555ff728-search" autocomplete="off" placeholder="Search" class="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden" aria-label="Search the options" aria-controls="ui-select-555ff728-listbox" aria-autocomplete="list" aria-expanded="true" role="combobox" data-ui--select-target="search" data-action="input->ui--select#filter keydown->ui--select#keydown"> </div> <div id="ui-select-555ff728-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-555ff728" aria-multiselectable="true" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1"> <div id="ui-select-555ff728-option-0" role="option" aria-selected="true" data-value="1" 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">Asha Kulkarni</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-555ff728-option-1" role="option" aria-selected="true" data-value="2" 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">Ravi Menon</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-555ff728-option-2" role="option" aria-selected="false" data-value="3" 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">Sara Joseph</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-555ff728-option-3" role="option" aria-selected="false" data-value="4" 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">Tomás Ortega</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-555ff728-option-4" role="option" aria-selected="false" data-value="5" 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">Mei Lin</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> <p hidden data-ui--select-target="empty" class="px-3 py-3 text-sm text-muted-foreground">No matches</p> </div> <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native" multiple="multiple" name="reviewers[]"> <option value="1" selected="selected">Asha Kulkarni</option> <option value="2" selected="selected">Ravi Menon</option> <option value="3">Sara Joseph</option> <option value="4">Tomás Ortega</option> <option value="5">Mei Lin</option> </select></div></div>1
2
3
4
5
6
<%# Stays open while you tick; past two choices the trigger counts them. %><div class="max-w-xs"> <%= render(UI::Select.new(name: "reviewers", label: "Reviewers", prompt: "Add reviewers", multiple: true, searchable: true, options: [ [ "Asha Kulkarni", 1 ], [ "Ravi Menon", 2 ], [ "Sara Joseph", 3 ], [ "Tomás Ortega", 4 ], [ "Mei Lin", 5 ] ], selected: [ 1, 2 ])) %></div>No notes provided.
No params configured.