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
<div class="flex flex-col gap-4"> <label for="ui-sw-1355d4a4" class="inline-flex items-center gap-2 select-none cursor-pointer"> <span class="relative inline-flex shrink-0 items-center w-10 h-5"> <input id="ui-sw-1355d4a4" type="checkbox" role="switch" name="unchecked" value="1" class="peer sr-only"> <span class="absolute inset-0 rounded-full bg-input peer-checked:bg-primary transition-all duration-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-1 ring-offset-background peer-disabled:cursor-not-allowed w-10 h-5"></span> <span class="pointer-events-none absolute left-0.5 top-0.5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5 w-4 h-4"></span> </span> <span class="text-sm leading-none">Off</span> </label> <label for="ui-sw-f0e76b21" class="inline-flex items-center gap-2 select-none cursor-pointer"> <span class="relative inline-flex shrink-0 items-center w-10 h-5"> <input id="ui-sw-f0e76b21" type="checkbox" role="switch" name="checked" value="1" checked="checked" class="peer sr-only"> <span class="absolute inset-0 rounded-full bg-input peer-checked:bg-primary transition-all duration-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-1 ring-offset-background peer-disabled:cursor-not-allowed w-10 h-5"></span> <span class="pointer-events-none absolute left-0.5 top-0.5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5 w-4 h-4"></span> </span> <span class="text-sm leading-none">On</span> </label> <label for="ui-sw-bd60dcf3" class="inline-flex items-center gap-2 select-none cursor-not-allowed opacity-60"> <span class="relative inline-flex shrink-0 items-center w-10 h-5"> <input id="ui-sw-bd60dcf3" type="checkbox" role="switch" name="disabled_off" value="1" disabled="disabled" class="peer sr-only"> <span class="absolute inset-0 rounded-full bg-input peer-checked:bg-primary transition-all duration-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-1 ring-offset-background peer-disabled:cursor-not-allowed w-10 h-5"></span> <span class="pointer-events-none absolute left-0.5 top-0.5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5 w-4 h-4"></span> </span> <span class="text-sm leading-none text-muted-foreground">Disabled off</span> </label> <label for="ui-sw-75f8bc92" class="inline-flex items-center gap-2 select-none cursor-not-allowed opacity-60"> <span class="relative inline-flex shrink-0 items-center w-10 h-5"> <input id="ui-sw-75f8bc92" type="checkbox" role="switch" name="disabled_on" value="1" checked="checked" disabled="disabled" class="peer sr-only"> <span class="absolute inset-0 rounded-full bg-input peer-checked:bg-primary transition-all duration-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-1 ring-offset-background peer-disabled:cursor-not-allowed w-10 h-5"></span> <span class="pointer-events-none absolute left-0.5 top-0.5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5 w-4 h-4"></span> </span> <span class="text-sm leading-none text-muted-foreground">Disabled on</span> </label> <label class="inline-flex items-center gap-2 select-none cursor-pointer"> <span class="relative inline-flex shrink-0 items-center w-10 h-5"> <input type="checkbox" role="switch" name="no_label" value="1" class="peer sr-only"> <span class="absolute inset-0 rounded-full bg-input peer-checked:bg-primary transition-all duration-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary peer-focus:ring-offset-1 ring-offset-background peer-disabled:cursor-not-allowed w-10 h-5"></span> <span class="pointer-events-none absolute left-0.5 top-0.5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5 w-4 h-4"></span> </span></label></div>1
2
3
4
5
6
7
<div class="flex flex-col gap-4"> <%= render(UI::Switch.new(name: "unchecked", label: "Off")) %> <%= render(UI::Switch.new(name: "checked", checked: true, label: "On")) %> <%= render(UI::Switch.new(name: "disabled_off", disabled: true, label: "Disabled off")) %> <%= render(UI::Switch.new(name: "disabled_on", checked: true, disabled: true, label: "Disabled on")) %> <%= render(UI::Switch.new(name: "no_label")) %></div>No notes provided.
No params configured.