x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="flex flex-col gap-4"> <label for="ui-cb-16d99ede" class="inline-flex items-center gap-2 select-none"> <span class="relative inline-flex"> <input id="ui-cb-16d99ede" type="checkbox" name="small" value="1" class="peer appearance-none shrink-0 border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-3.5 h-3.5 rounded-[3px]"> <span class="pointer-events-none absolute inset-0 flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"> <i data-lucide="check" class="inline-block shrink-0 w-3 h-3 stroke-[3]" aria-hidden="true"></i> </span></span> <span class="text-sm leading-none">Small checkbox</span> </label> <label for="ui-cb-d88aae53" class="inline-flex items-center gap-2 select-none"> <span class="relative inline-flex"> <input id="ui-cb-d88aae53" type="checkbox" name="default" value="1" class="peer appearance-none shrink-0 border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-4 h-4 rounded-[4px]"> <span class="pointer-events-none absolute inset-0 flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"> <i data-lucide="check" class="inline-block shrink-0 w-3 h-3 stroke-[3]" aria-hidden="true"></i> </span></span> <span class="text-sm leading-none">Default checkbox</span> </label> <label for="ui-cb-32d20dfd" class="inline-flex items-center gap-2 select-none"> <span class="relative inline-flex"> <input id="ui-cb-32d20dfd" type="checkbox" name="large" value="1" class="peer appearance-none shrink-0 border border-input bg-background transition-all checked:bg-primary checked:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background w-5 h-5 rounded-[5px]"> <span class="pointer-events-none absolute inset-0 flex items-center justify-center text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"> <i data-lucide="check" class="inline-block shrink-0 w-4 h-4 stroke-[3]" aria-hidden="true"></i> </span></span> <span class="text-sm leading-none">Large checkbox</span> </label></div>1
2
3
4
5
<div class="flex flex-col gap-4"> <%= render(UI::Checkbox.new(name: "small", label: "Small checkbox", size: :sm)) %> <%= render(UI::Checkbox.new(name: "default", label: "Default checkbox", size: :default)) %> <%= render(UI::Checkbox.new(name: "large", label: "Large checkbox", size: :lg)) %></div>No notes provided.
No params configured.