← Docs

Recipe: Switch toggle design

A pure CSS toggle switch using sibling combinators and a hidden checkbox. No JavaScript, no libraries — just Tailwind and native HTML.

The sr-only checkbox drives the toggle via peer-checked: modifiers. The knob uses absolute positioning with a translate transition.

Wrap the knob in a relative container for production use — this demo keeps it flat for clarity.