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-sw-88b242ec" class="inline-flex items-center gap-2 select-none cursor-pointer"> <span class="relative inline-flex shrink-0 items-center w-8 h-4"> <input id="ui-sw-88b242ec" type="checkbox" role="switch" name="sm" 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-8 h-4"></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-4 w-3 h-3"></span> </span> <span class="text-sm leading-none">Small</span> </label> <label for="ui-sw-e1b8c02a" 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-e1b8c02a" type="checkbox" role="switch" name="default" 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">Default</span> </label> <label for="ui-sw-b5bdcfbb" class="inline-flex items-center gap-2 select-none cursor-pointer"> <span class="relative inline-flex shrink-0 items-center w-12 h-6"> <input id="ui-sw-b5bdcfbb" type="checkbox" role="switch" name="lg" 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-12 h-6"></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-6 w-5 h-5"></span> </span> <span class="text-sm leading-none">Large</span> </label></div>1
2
3
4
5
<div class="flex flex-col gap-4"> <%= render(UI::Switch.new(name: "sm", size: :sm, label: "Small")) %> <%= render(UI::Switch.new(name: "default", size: :default, label: "Default")) %> <%= render(UI::Switch.new(name: "lg", size: :lg, label: "Large")) %></div>No notes provided.
No params configured.