Checkbox
A square box that fills with the accent and draws a tick when checked. No class needed.
Examples
Checkbox
Group
Anatomy
label | Optional but recommended. A label whose direct child is a checkbox lines box and text up in a row, with a gap and a pointer cursor. |
> input[type=checkbox] | The native checkbox, no class. Box and tick snap to even pixels so the tick stays centred. |
API
| Attribute | Values | Description |
|---|---|---|
checked | boolean | Fills the box with the accent and springs the tick in. |
Accessibility
- Wrap the input in its
<label>(or point a<label for>at it) so the text is its name and a click on the text toggles it. - Group related checkboxes in a
<fieldset>with a<legend>; the legend is read before each option. - A disabled box dims and its label turns muted; still say in the text why it can't be changed.
indeterminate(set from script) draws a bar instead of the tick and is announced as mixed. - Focus shows the shared ring around the box.
| Key | Effect |
|---|---|
| Space | Toggles the focused checkbox. |
| Tab / ShiftTab | Moves between checkboxes; each is its own tab stop. |