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
<div class="flex flex-col gap-6 max-w-md"> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-bc3dd6dc" class="text-sm font-medium">Email</label> <input placeholder="you@example.com" id="ui-input-bc3dd6dc" type="email" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-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 h-9 px-3 py-2 text-sm" aria-describedby="ui-input-bc3dd6dc-hint"> <p id="ui-input-bc3dd6dc-hint" class="text-xs text-muted-foreground">We'll only use it to send receipts.</p> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-input-8cb36564" class="text-sm font-medium">Username</label> <input value="a" id="ui-input-8cb36564" type="text" class="flex w-full rounded-md border bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 h-9 px-3 py-2 text-sm border-destructive focus:ring-destructive" aria-invalid="true" aria-describedby="ui-input-8cb36564-error"> <p id="ui-input-8cb36564-error" class="text-xs text-destructive">Use at least 3 characters.</p> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-9afdfb46" class="text-sm font-medium">Bio</label> <textarea id="ui-textarea-9afdfb46" rows="3" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-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 px-3 py-2 text-sm resize-y" aria-describedby="ui-textarea-9afdfb46-hint"></textarea> <p id="ui-textarea-9afdfb46-hint" class="text-xs text-muted-foreground">Shown on your public profile.</p> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-native-select-5c769fcf" class="text-sm font-medium">Team</label> <div class="relative w-full"> <select id="ui-native-select-5c769fcf" class="flex w-full appearance-none rounded-md border bg-background text-foreground transition-all focus:outline-none focus:ring-2 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 border-destructive focus:ring-destructive" aria-invalid="true" aria-describedby="ui-native-select-5c769fcf-error"><option value="">Choose a team</option><option value="Design" >Design</option><option value="Engineering" >Engineering</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> <p id="ui-native-select-5c769fcf-error" class="text-xs text-destructive">Choose a team to continue.</p> </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-c1374288" class="text-sm font-medium">Plan</label> </div> <button type="button" id="ui-select-c1374288" 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-c1374288-listbox" aria-describedby="ui-select-c1374288-hint" data-ui--select-target="trigger" data-action="click->ui--select#toggle keydown->ui--select#keydown"> <span data-ui--select-target="value" class=" truncate">Free</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-c1374288-listbox" role="listbox" tabindex="-1" aria-labelledby="ui-select-c1374288" data-ui--select-target="listbox" data-action="mousedown->ui--select#keepFocus" class="max-h-64 overflow-y-auto p-1"> <div id="ui-select-c1374288-option-0" role="option" aria-selected="true" 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" > <i data-lucide="check" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i> </span> </div> <div id="ui-select-c1374288-option-1" role="option" aria-selected="false" data-value="Pro" 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">Pro</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-c1374288-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> </div> <div class="mt-2 flex flex-col gap-2"> <p id="ui-select-c1374288-hint" class="text-xs text-muted-foreground">You can change plans at any time.</p> </div> <select class="sr-only" tabindex="-1" aria-hidden="true" data-ui--select-target="native"> <option value="Free" selected="selected">Free</option> <option value="Pro">Pro</option> <option value="Team">Team</option> </select></div></div>1
2
3
4
5
6
7
<div class="flex flex-col gap-6 max-w-md"> <%= render(UI::Input.new(type: :email, label: "Email", hint: "We'll only use it to send receipts.", placeholder: "you@example.com")) %> <%= render(UI::Input.new(label: "Username", value: "a", error: "Use at least 3 characters.")) %> <%= render(UI::Textarea.new(label: "Bio", hint: "Shown on your public profile.", rows: 3)) %> <%= render(UI::NativeSelect.new(label: "Team", options: %w[Design Engineering], prompt: "Choose a team", error: "Choose a team to continue.")) %> <%= render(UI::Select.new(label: "Plan", options: %w[Free Pro Team], hint: "You can change plans at any time.")) %></div>No notes provided.
No params configured.