CSS Toggle Switches
60 pure CSS toggle switches: iOS, day and night, dark mode, neumorphic, ON/OFF text and playful ones. Every switch is a real checkbox, so it works with the keyboard and in forms, with no JavaScript.
How to use these toggle switches
Open any switch, copy the HTML into your form and the CSS into your stylesheet. Each switch is a <label> wrapping a real <input type="checkbox">, so clicking the label toggles it, the space bar toggles it, and the value submits with the form.
To change the color, set --tgl-color on the switch or any ancestor. To change the size, set --tgl-size: the track, knob and icons are in em, so they scale together. Read the state in CSS with :checked, or in JavaScript with input.checked.
Every snippet keeps a visible :focus-visible ring and ships with a prefers-reduced-motion rule, so the knob jumps instead of sliding for people who asked their OS for less motion.
Frequently asked questions
How do I make a toggle switch with only CSS?
Style a real checkbox as the track, draw the knob with a pseudo-element, and move it with transform when the input is :checked. Every switch above is that pattern with a different look.
Is a CSS toggle switch accessible?
Yes, as long as it stays a real checkbox (or has role="switch"), has a label, keeps a visible :focus-visible ring and respects prefers-reduced-motion. The snippets here do all four.
How do I add ON/OFF text inside a toggle switch?
Put the two labels in pseudo-element content or in two spans inside the track, and swap their opacity or position on :checked. The entries tagged "with-text" show several ways.
Can I build a dark mode toggle without JavaScript?
Yes. :root:has(#theme:checked) can swap your color variables for the whole page. Remembering the choice across visits still needs a line of JavaScript or a cookie.
Should I use a toggle switch or a checkbox?
Use a switch when the change takes effect immediately, like a setting. Use a checkbox when the choice is submitted later with a form.