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-67">
<input class="w-0 h-0 outline-none sr-only peer"
type="checkbox"
name="toggle-67"
id="toggle-67" />
<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-22">
<input class="w-0 h-0 outline-none sr-only peer"
type="checkbox"
name="toggle-22"
id="toggle-22"
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>