Build an iOS-style toggle switch — slider moves on :checked. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.
Use Cases
Frontend developers building iOS-style toggles without JavaScript
UI designers creating settings panels with on/off switch controls
Mobile web developers ensuring toggle switches meet touch target guidelines
Design system engineers defining toggle component tokens and variants
Tips
The toggle animates a slider on the checkbox :checked state change
Customize track and knob colors for both on and off states
Adjust the toggle size to meet mobile touch target requirements
Fun Facts
The toggle switch UI pattern was popularized by Apple's iOS 1.0 in 2007, mimicking physical electrical switches — it became a universal mobile UI element within two years.
CSS-only toggle switches work by hiding the native checkbox with opacity: 0 and styling a label's ::before and ::after pseudo-elements as the track and knob.
A 2015 NN/g study found that toggle switches should only be used for settings that take immediate effect — using them for deferred-save settings confuses 32% of users.
FAQ
Is the toggle accessible?
Yes — it's a styled checkbox, so it keeps native semantics. Wrap in a <label> for click-anywhere behavior. Keyboard: Space toggles.
Can I animate the slider?
Yes — transition: transform on the ::after handle. Default is 200ms; adjust to taste.
What about reduced motion?
The tool includes a `@media (prefers-reduced-motion: reduce)` block that shortens the transition. Users who prefer stillness still see state change.
Should I use role="switch"?
Optional — the native checkbox is already announced correctly. role="switch" is for when a checkbox conceptually toggles a setting; use it if your label matches.
