Custom Toggle Switch

Easy

cssforms

Build a custom on/off toggle switch — the iOS-style pill that slides between two states — from a plain <input type="checkbox">, styled entirely with CSS (no image assets).

This is a classic "style a native form control" exercise: the checkbox itself should still be a real, functional checkbox (for accessibility and keyboard support), just visually transformed.

Check your work against

Built from a real `<input type="checkbox">`, not a plain clickable `<div>`
Clicking anywhere on the switch toggles it
The knob visibly slides from one side to the other
On/off states are clearly distinguishable by color, not just position

There's no automated grading for UI challenges — self-check against this list, then compare with the solution preview.

Live preview