On this page
Overview
Show code, IncludeArchived.tsx
Anatomy
Checkbox
Box
Check
Label
Show code, CheckboxAnatomy.tsx
Behaviour
States
Pressing the box or its label toggles it. A mixed box shows a dash. A checked box that is disabled takes the neutral fill rather than the accent, as a disabled button does.
Select all
A parent checks or clears all its children.
- Checked when every child is.
- Mixed when some are.
Show code, SelectAll.tsx
Adapting to width
The label wraps onto more lines, and the box stays centred beside it.
Show code, LongLabel.tsx
Rules
A checkbox says what it turns on, and a group of them has a name.
Use it when
- Any number of options, each chosen on its own, such as which e-mails to receive
- Agreeing to or including one option, applied when a form is sent, such as the terms
- A parent that selects or clears a group, and shows when only some are chosen
Show code, NamedGroup.tsx
Labels
Write the label as the choice it turns on, in sentence case, so checking it means yes.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the next or previous checkbox. |
| Space | Checks or unchecks it, and checks a mixed one. |