29 Tailwind CSS Checkboxes

Every demo keeps a real <input type="checkbox"> in the DOM and visually hides it with a sr-only/peer pattern — clipped to a 1px box, not removed. The visible box is a sibling element styled entirely with peer-checked: and peer-focus-visible: utilities. This is the load-bearing rule: never use hidden or display:none on the input, because that pulls it out of the tab order and stops screen readers announcing checked state. Wrap the input and its fake box in a <label> so a click or tap on the drawn box toggles the input for free, and the whole row becomes one hit target. Because the input still fires natively, Space toggles it and forms submit its value with no script — see demo 06, the accessible custom checkbox.

peer-checked: styles a later sibling of the input — you mark the input peer, then any following element reacts, which is why the fake box and label must come after the input in source order. has-checked: styles the ancestor that contains a checked input, using the :has() selector, so the whole card, chip or stage can repaint from one checkbox anywhere inside it. Demo 02's filter chip and demo 03's selectable pricing card use has-checked: to light up the entire container; demo 22's dark-mode toggle puts has-checked: on the stage to swap the surrounding theme. The common bug is reaching for peer-checked: when the element you want to style is a parent or an earlier sibling — peer only looks forward, so nothing happens. Choose by asking whether the target sits after the input or wraps it.

Demo 04 animates grid-template-rows, not height, because height:auto is not animatable but a grid track between grid-rows-[0fr] and grid-rows-[1fr] is. The panel is a grid whose single row goes from 0fr (collapsed) to 1fr (open) via peer-checked:grid-rows-[1fr], with a transition on the rows. The inner content needs overflow-hidden and min-h-0 or it refuses to shrink below its intrinsic height and the collapse looks broken. The toggle itself is a hidden checkbox with a <label> as the clickable header. Because it is a checkbox rather than radios, more than one panel can be open at once; swap to grouped radios if you need a single-open accordion. It respects prefers-reduced-motion by dropping the transition, so the panel snaps instead of sliding for users who ask for less motion.

Demo 05 uses the real DOM property: an input is neither checked nor unchecked but indeterminate, targeted in Tailwind with peer-indeterminate: to fill the master box with a dash instead of a tick. The catch is that indeterminate cannot be set in HTML — there is no attribute for it, so it needs a small script that watches the child boxes and sets master.indeterminate = someButNotAll while setting master.checked only when every child is on. Clicking the master should then check or uncheck all children and clear its own indeterminate flag. Keep aria-checked="mixed" in sync so screen readers announce the partial state. Do not fake this with a third image swap on a plain checkbox — assistive tech reads the property, not the pixels, so the real indeterminate flag is what makes the pattern honest.

The ring disappears because hiding the native input with sr-only also hides the browser's default outline — the outline was on the input you just clipped, and your drawn box has none of its own. Demo 06 fixes it by moving the ring onto the visible box with peer-focus-visible:, layering a white gap ring plus a 3px blue ring so it reads on any background. Use focus-visible, not focus, so the ring shows for keyboard users but not on every mouse click. Do not set outline-none without a replacement — that is the single most common accessibility regression in custom checkboxes and it strands keyboard users with no visible position. Because the input still receives focus natively, Tab lands on it and Space toggles; the styling is the only thing you relocated. Test by tabbing through with the mouse untouched.

Demo 22 is a checkbox, not a script. The sun/moon switch is a hidden input marked peer, and the surrounding stage carries has-checked: utilities so that when the box is checked the container's background, text and card colours all flip together via :has(). The thumb slides with peer-checked:translate-x and the sun/moon icons cross-fade with opacity. This works because everything that recolours lives inside the element carrying has-checked: — the theme is scoped to that subtree, not the document. That is also its limit: it cannot theme the whole page or persist across reloads, since there is no localStorage and no <html> class toggle. For a real site-wide theme you still need a script to write a class on the root and remember the choice; this pattern is right for a self-contained widget or a settings preview, not the global switch.

Demos 09 and 24 draw an inline <svg> path using the stroke-dash trick: the tick's stroke-dasharray equals its own length and the idle stroke-dashoffset is set to that length too, so the line is one long gap and invisible. On peer-checked: the offset transitions to 0, revealing the stroke as if a pen drew it. The most common bug is a wrong offset number — if stroke-dashoffset is smaller than the real path length, part of the tick shows before checking; larger and it never fully draws. Measure the path or use pathLength="..." to normalise it. Demo 24 trades two paths, retracting a dash while the check draws, which needs both offsets tuned to their own lengths. Guard the transition with prefers-reduced-motion so the tick appears instantly for users who opt out, otherwise the checked state depends on an animation they never see.

Semantics decide it, not looks. A toggle switch — demos 01, 07, 22, 29 — means an instant on/off setting that takes effect immediately, like enabling notifications; a checkbox means a selection you confirm later, usually before submitting a form. Do not dress a checkbox as a switch for a multi-select list, and do not use a switch where the user expects to tick several boxes and press a button. Under the hood both are the same <input type="checkbox"> here, so keyboard and form behaviour are identical; the difference is the affordance you show and the timing you imply. Avoid the flashy demos — confetti (27), gooey blobs (21), 3D flip (17) — for long forms or dense settings panels, where 30 competing animations become noise and the motion slows perceived response. Reserve those for a single hero interaction, and keep the workhorse rows on demos 01 or 06.