Components / Forms
Checkbox
stableA binary or multi-select choice — click the box or the label, both toggle it.
States
In context — a list with select all
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | — | No | Label text, rendered next to the box and part of the click target. |
indeterminate | boolean | false | No | Shows a dash instead of a check — for partial "select all" states. |
checked | boolean | — | No | Controlled checked state. |
disabled | boolean | false | No | Standard HTML disabled state. |
Do
- Use for independent choices — several can be selected at once.
- Use the indeterminate state for a "select all" checkbox when some but not all rows are selected.
- Keep the label clickable — it’s part of the hit target.
Don't
- Use a Checkbox for a single, mutually-exclusive choice — that’s a Toggle or radio group.
- Leave a checkbox unlabelled.