CSS Switch Generator
Tune a native checkbox into a switch, inspect each interactive state, and copy a compact HTML and CSS pattern with a visible keyboard focus ring.
LIVE PREVIEW
Native checkbox states
Each preview is a native checkbox with a connected label. Use Tab and Space to inspect its keyboard behavior and visible focus ring.
A QUICK WALKTHROUGH
How to use this tool
- Set the track width, height, radius, outer margin, transition speed, and three colors.
- Inspect checked, unchecked, disabled, and keyboard-focus examples. Use Tab and Space on the live native inputs.
- Copy the linked checkbox and label HTML plus the CSS, then replace the sample label and id for your interface.
A checkbox supplies the behavior
The generated control is an input type=checkbox with appearance removed, not a clickable div or hidden replacement. It remains focusable, works with Space, reports its checked and disabled state to assistive technology, and participates in forms. A visual switch is appropriate when an option changes immediately; use a checkbox label that clearly states the setting.
Sizing and movement rules
Track width and height define the control. The thumb is the track height minus 6px, leaving a 3px inset on each side. The editor keeps the width at least 6px greater than the height, and the checked state moves by width minus height so the thumb lands at the opposite edge. Review the result at the sizes used by your interface.
Focus, disabled state, and local output
The CSS keeps a :focus-visible outline rather than removing keyboard focus. Disabled controls stay visible, cannot be changed, and use lower opacity as a supporting cue. Previewing and generating code happen in this browser; no design, color, or code is uploaded. Confirm color contrast, target size, form behavior, and product wording in your own context.
GOOD TO KNOW
Common questions
Is a switch different from a checkbox?
A switch is often presented as a checkbox whose label describes a setting that changes immediately. The underlying checkbox still has two states. Use the wording and interaction model that match your product; this generator does not decide whether a change needs a separate Save action.
Can I remove the focus outline?
Do not remove it unless you provide another clearly visible focus indicator. Keyboard users need to see which switch will change when they press Space.
Why does the thumb move by width minus height?
The thumb has the track height minus 6px, with a 3px inset on either side. Moving it by the difference between the outer width and height places it against the far inset edge.
Does the output include an accessible name?
The sample connects input and label through matching id and for values. Replace the sample text with a clear setting name and make every id unique when you place several switches on one page.