Switch

A binary toggle built from a native checkbox with a CSS-rendered track. It keeps form semantics and keyboard behavior while presenting a switch-style UI.

Demo on CodePen

Preview

Implementation Notes

The input remains in the DOM and drives all state. The visible track and thumb are decorative spans that respond to the checkbox state with adjacent selectors.

Browser Compatibility

Feature Chrome Edge Firefox Safari Notes Source
type="checkbox" Broad support Yes Yes Yes Yes The switch keeps native checkbox semantics under the styled control. caniuse

The switch uses native checkbox behavior and standard CSS transitions.