Is the toggle accessible?

Yes — it's a styled checkbox, so it keeps native semantics. Wrap in a 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.

CSS Switch / Toggle | DevTools Surf

DevTools Surf

Example: CSS Switch / Toggle

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

accent=#10b981

Output

.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer; transition: .2s; }
.switch .slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .slider { background: #10b981; }
.switch input:checked + .slider::before { transform: translateX(20px); }

About CSS Switch / Toggle

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.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus