Toggle Switch — Free Pure CSS Checkbox Snippet

A toggle switch communicates a binary on/off state more clearly than a custom checkbox. Checkboxes are associated with selecting items in a list; toggles are associated with enabling or disabling a single setting (as in a settings panel or dark mode toggle). Users understand the metaphor immediately because it matches physical switches — a light switch, a phone silent mode button. This snippet implements a full, accessible toggle switch with pure CSS and no JavaScript.

The hidden checkbox technique

The HTML structure wraps everything inside a <label> element. Inside the label: a <div class="toggle"> containing a hidden <input type="checkbox"> and a <span class="track">. The input is hidden with opacity: 0; width: 0; height: 0; position: absolute — it stays in the DOM and receives focus and keyboard events, but has no visible size. Since the input is inside the label, clicking anywhere on the visible track element clicks the label, which toggles the underlying checkbox. No JavaScript click handler needed.

The :checked sibling combinator

input:checked ~ .track selects the .track element when its preceding sibling input is in the checked state. When the user clicks, the browser toggles the checkbox, which triggers the CSS selector. The track background transitions to #6366f1 (the accent colour). The knob moves via input:checked ~ .track::after { transform: translateX(20px) }.

The knob travel calculation

The default track is 44px wide, the knob is 18px, and padding is 3px on each side. Available travel: 44 - 18 - 3 - 3 = 20px. The small variant (36×20px track, 14px knob): 36 - 14 - 3 - 3 = 16px travel.

Accessibility

The hidden checkbox is in the accessibility tree. Screen readers announce the label text when focused. The toggle responds to Space bar (standard checkbox behaviour). For full ARIA compliance, add role="switch" to the label and aria-checked="true/false" — update the attribute via JavaScript on change.

Reading and reacting to state in JavaScript

input.checked returns the boolean state. input.addEventListener('change', e => console.log(e.target.checked)) fires on every toggle. In React, bind the checked value to state and the onChange handler to setState.

The hidden checkbox pattern

The toggle uses a visually hidden input[type="checkbox"] associated with a label via for/id. Clicking the label clicks the checkbox. The :checked pseudo-class applies the "on" visual state via the sibling combinator: input:checked + .slider. This pattern makes the toggle keyboard-accessible by default (Tab to focus, Space to toggle) and semantically correct (the checkbox value is included in form submissions).

The CSS slider and knob

The .slider is a 44×24px rounded rectangle with a coloured background (grey for off, accent for on). The .knob is an 18×18px white circle with a box-shadow. In the off state, left: 3px positions it left. In the :checked + .slider .knob state, left: 23px (44 - 18 - 3) positions it right. CSS transition: left 0.15s, background 0.15s animates both simultaneously.

Labelling the state

For clarity, add visible text labels: "Off / On" or "Disabled / Enabled" alongside the toggle. Use aria-label="Enable notifications" on the checkbox for screen readers that only announce the toggle state. Do not rely on colour alone to communicate the on/off state — the knob position must also differ.