Checkbox
A native checkbox input styled as a small square box.
Basic
Add .checkbox to the input. Wrap each input + label pair in .field__item, and group items inside a .field so the rows pick up consistent vertical rhythm. See Radio for the round single-choice variant and Switch for the track-and-thumb.
Inline
Add .field--inline on the field root to lay items on one row with wrap.
Indeterminate
The indeterminate state is set from script; there's no HTML attribute for it. Useful as a parent of a partially-selected group.
Reverse
Add .field__item--reverse to flip the label to the start and the input to the end. Useful for settings rows where the affordance sits on the right edge.
Disabled
Add disabled to dim the input and its label, and block interaction.
Browser validation
Pair required with the native :user-invalid pseudo. The browser fires it after a submit attempt, and clears it the moment the constraint is satisfied.
Server validation
Set aria-invalid="true" from your form library. The attribute is sticky; Stisla just paints the red while it's present. The checked variant shows both signals at once: primary fill says "selected", red rim says "the server still considers it invalid".
Without labels
Drop the .field__item wrapper for a bare .checkbox. Always pair with an aria-label. Common in tables (row-select) and toolbars.
Customization
These variables retune .checkbox without touching component CSS. Override on the input, a parent scope, or :root.
| Variable | Use |
|---|---|
--checkbox-size | Box dimension |
--checkbox-radius | Corner radius; raise to round or zero out for sharp edges |
--checkbox-bg | Unchecked background |
--checkbox-border-width | Border thickness |
--checkbox-border-color | Unchecked border; validation hooks flip this to the danger token |
--checkbox-bg-checked | Checked or indeterminate background |
--checkbox-indicator | Glyph SVG painted over the checked fill. Checked and indeterminate each set their own; the fill is a literal because data: URLs can't read CSS vars, so recolor by replacing the URL |