Switch

<div class="space-y-3">
  <label>
    <input type="checkbox" role="switch" />
    Airplane Mode
  </label>
  <label>
    <input type="checkbox" role="switch" checked />
    Wi-Fi
  </label>
</div>

<div class="space-y-3">
  <label>
    <input type="checkbox" role="switch" disabled />
    Disabled (off)
  </label>
  <label>
    <input type="checkbox" role="switch" checked disabled />
    Disabled (on)
  </label>
</div>

<div class="space-y-3">
  <label>
    <input type="checkbox" role="switch" class="switch-blue" checked />
    Blue
  </label>
  <label>
    <input type="checkbox" role="switch" class="switch-orange" checked />
    Orange
  </label>
  <label>
    <input type="checkbox" role="switch" class="switch-red" checked />
    Red
  </label>
  <label>
    <input type="checkbox" role="switch" class="switch-pink" checked />
    Pink
  </label>
</div>

<div class="space-y-3">
  <label>
    <input type="checkbox" role="switch" checked style="--color-switch: purple; --color-switch-hover: rebeccapurple;" />
    Purple
  </label>
  <label>
    <input type="checkbox" role="switch" checked style="--color-switch: oklch(0.65 0.15 200); --color-switch-hover: oklch(0.60 0.15 200);" />
    Teal
  </label>
</div>

<form class="grid gap-4" onsubmit="return false">
  <h3 class="text-lg font-medium">Email Notifications</h3>
  <label class="flex flex-row items-start justify-between gap-2 rounded-lg border p-4 cursor-pointer">
    <div class="flex flex-col gap-0.5">
      <span class="text-sm leading-normal">Marketing emails</span>
      <small>Receive emails about new products, features, and more.</small>
    </div>
    <input type="checkbox" role="switch">
  </label>
  <label class="flex flex-row items-start justify-between gap-2 rounded-lg border p-4">
    <div class="flex flex-col gap-0.5">
      <span class="text-sm leading-normal">Security emails</span>
      <small>Receive emails about your account security.</small>
    </div>
    <input type="checkbox" role="switch" checked disabled>
  </label>
</form>