Toggle
Binary state control with visual feedback.
Usage
<!-- Default -->
<div class="flex gap-4px items-center">
<label class="p-2px w-32px h-16px rounded-full relative cursor-pointer group transition-colors bg-black-200 hover:bg-black-600 dark:bg-black-600 dark:hover:bg-black-200 has-checked:bg-foreground has-disabled:bg-black-400 dark:has-disabled:bg-black-300 has-disabled:cursor-no-drop"
for="toggle-32">
<input class="w-0 h-0 outline-none sr-only peer"
type="checkbox"
name="toggle-32"
id="toggle-32" />
<span class="w-12px h-12px rounded-full bg-background absolute right-[18px] top-2px peer-checked:right-2px transition-[right]"
aria-hidden="true"
focusable="false"></span>
</label>
</div>
<!-- Disabled -->
<div class="flex gap-4px items-center">
<label class="p-2px w-32px h-16px rounded-full relative cursor-pointer group transition-colors bg-black-200 hover:bg-black-600 dark:bg-black-600 dark:hover:bg-black-200 has-checked:bg-foreground has-disabled:bg-black-400 dark:has-disabled:bg-black-300 has-disabled:cursor-no-drop"
for="toggle-74">
<input class="w-0 h-0 outline-none sr-only peer"
type="checkbox"
name="toggle-74"
id="toggle-74"
disabled
checked />
<span class="w-12px h-12px rounded-full bg-background absolute right-[18px] top-2px peer-checked:right-2px transition-[right]"
aria-hidden="true"
focusable="false"></span>
</label>
</div>