Checkbox, radio and switch

Checkboxes and radios with custom marks, and role="switch" to turn a checkbox into a switch.

Put the input inside its label. The label lines up with the box and the whole label is clickable.

Notifications Email SMS

Plan Monthly Yearly

Switch

role="switch" on a checkbox draws a switch. Screen readers announce it as on or off.

Dark mode Autoplay

Checked boxes, radios and switches use the primary color. A color class on the input changes it.

Danger Info Accent

A checkbox for a partly selected list shows a dash. Set indeterminate from a script, since there is no attribute for it.

Select all

document.getElementById("select-all").indeterminate = true;

Checkbox Radio Switch

Variable	Default
`--i-checkbox-radio-border-width`	`0.125rem`
`--i-switch-border-width`	`0.1875rem`
`--i-switch-thumb-shadow`	`0 0 0 #0000`
`--i-switch-color-background`	`light-dark(#8790a3, #5f6880)`
`--i-switch-color-thumb`	`var(--i-color-white)`