Toggle
Binary state control with visual feedback.
<div class="flex gap-4px items-center">
<label
for="toggle-20"
class="p-2px w-32px h-16px rounded-full relative cursor-pointer group transition-colors bg-black-200 hover:bg-black-500 dark:bg-black-600 dark:hover:bg-black-300 has-checked:bg-black has-disabled:bg-black-400 dark:has-disabled:bg-black-300 dark:has-checked:bg-white has-disabled:cursor-no-drop">
<input
type="checkbox"
name="toggle-20"
id="toggle-20"
class="w-0 h-0 outline-none sr-only peer">
</input>
<span
class="w-12px h-12px rounded-full bg-white absolute right-[18px] top-2px peer-checked:right-2px transition-[right] dark:bg-black"
aria-hidden="true"
focusable="false">
</span>
</label>
</div>
Usage
Just copy-paste the HTML or Figma code into your project.