Checkbox
Independent on or off choices, where the label is part of the target.
Definition
A checkbox represents a binary choice that is independent of other checkboxes. Multiple checkboxes in a group allow any combination, including none.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Independent binary options.
- Multi-select from a small set.
- Consent and agreement.
Common mistakes
- Labels outside the target area.
- Negatively worded labels.
- Pre-checked consent.
- Checkbox used where a toggle is meant.
Requirements
- The label must be clickable and part of the target area. This often triples the effective target size for free.
- Write labels as positive statements. 'Do not send me email' inverted with a checkbox produces double negatives.
- Group related checkboxes in a fieldset with a legend, so the group's purpose reaches assistive technology.
- Support an indeterminate state for parent checkboxes controlling a group, and set it through the DOM property rather than an attribute.
- Consent checkboxes must never be pre-checked.
Groups, states and labels
Do
- Use the indeterminate state for a parent whose children are partly selected.
- Make the label clickable and describe what ticking means.
- Group related checkboxes in a fieldset with a legend.
- Keep the tick and the label on the same line where the label is short.
Do not
- Phrase a label so that ticking means declining, as in Do not send me updates.
- Preselect a consent checkbox, which is unlawful in several jurisdictions.
- Use a checkbox for something that takes effect immediately. That is a toggle.
- Hide the tick behind a custom control that keyboard users cannot reach.
In practice
- i.
The double negative
Label phrasingUnticking Do not exclude archived items requires two mental inversions to work out what is being asked. Positive phrasing costs nothing and removes the error entirely.
- ii.
Select all, partly
The indeterminate stateA header checkbox that shows ticked when only nine of forty rows are selected is lying about scope, and the bulk action that follows will surprise somebody. The mixed state exists for exactly this case.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Toggle Switch
ComponentA switch that applies its change immediately, with no confirming action.
Key difference
A checkbox records an intent that a later submit will apply. A toggle is the action: flipping it changes the system now, so it needs no Save and does need a way back.
Use Checkbox when
- The change takes effect on submit, alongside other fields.
- The reader is choosing several things from a list.
- Leaving the page without saving should discard the change.
Use Toggle Switch when
- The setting takes effect the moment it is flipped.
- The result is visible at once, or a status message says it saved.
- The change is cheap to reverse.
Local chart
CMP·005 · Region III · Grid F2
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Default EffectBIAS·004 · Cognitive bias
- Fitts's LawLAW·002 · Law
- Deceptive PatternsPRIN·011 · Principle
Depends on
Get these right first, or this one will not hold.
- Labels and InstructionsA11Y·017 · Accessibility
Often used with
These usually appear in the same screen or the same decision.
- Radio GroupCMP·006 · Component
- Bulk ActionsPAT·017 · Pattern
- FilteringPAT·004 · Pattern
Check your work
Review passes that test whether this was done properly.
- Form UX ChecklistCHK·001 · Checklist