Switch

A checkbox in a trench coat. CSS has been able to do this since forever — no ARIA gymnastics required.

plain CSS — works everywhere

PreviewCode

<label class="flex cursor-pointer items-center gap-2.5 text-sm font-medium">
  <input
    type="checkbox"
    checked
    class="relative h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-input transition-colors checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring before:absolute before:top-0.5 before:left-0.5 before:size-4 before:rounded-full before:bg-background before:shadow-sm before:transition-transform before:content-[''] checked:before:translate-x-4"
  />
  Marketing emails
</label>

<label class="flex cursor-pointer items-center gap-2.5 text-sm font-medium">
  <input
    type="checkbox"
    class="relative h-5 w-9 shrink-0 cursor-pointer appearance-none rounded-full bg-input transition-colors checked:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring before:absolute before:top-0.5 before:left-0.5 before:size-4 before:rounded-full before:bg-background before:shadow-sm before:transition-transform before:content-[''] checked:before:translate-x-4"
  />
  Security alerts
</label>

How it works

It’s <input type="checkbox"> with appearance-none and a before: pseudo-element as the thumb.
The thumb uses bg-background, so it stays visible in both themes — in dark mode the track turns near-white when checked and the thumb goes dark.
Wrapping it in a <label> makes the text a click target with zero extra attributes.

Accessibility

Screen readers announce it as a checkbox, which is exactly what it is. If your design system insists on “switch” semantics, add role="switch" — the keyboard behavior is identical.