ComponentCraft conventionFoundational
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 page
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.
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 EffectCognitive bias
- Fitts's LawLaw
- Deceptive PatternsPrinciple
Often used with
These usually appear in the same screen or the same decision.
- Radio GroupComponent
- Bulk ActionsPattern
- FilteringPattern
Commonly confused with
Close enough to be mixed up, different enough to matter.
- Toggle SwitchComponent
A toggle takes effect immediately. A checkbox waits for submit.