What it must accomplish
Represent independent binary choices without implying that only one answer is allowed.
Usage
Choose the control by behavior
- Several options may be selected
- A single agreement or preference can be on or off
- Selections should take effect when a form is submitted
- Only one option can be selected; use radio buttons
- A setting takes effect immediately; consider a switch
- The action itself should be triggered; use a button
Anatomy
Stable parts create a reliable contract
- 1Native input
- 2Visible control indicator
- 3Clickable label
- 4Optional group legend
- 5Hint or error message
Interaction and keyboard behavior
- Tab reaches the checkbox
- Space toggles the focused checkbox
- Tab continues through other interactive controls
Visual similarity does not guarantee behavioral equivalence. The component contract must preserve state, focus, semantics, and recovery across input methods.
Accessible behavior
- Keep the input and label programmatically associated
- Use fieldset and legend for a related group
- Do not communicate selection through color alone
- Expose indeterminate state accurately when used
Responsive considerations
Adapt the decision—not only the dimensions
Let labels wrap without separating them from their controls. Increase the clickable area around the visible indicator for touch contexts.
Content considerations
Language is part of the component
- Write labels as statements the user can affirm
- Keep choices parallel in grammar
- Put qualifying context in a hint rather than the label
Patterns that weaken the experience
Using checkboxes for mutually exclusive options
Tiny label hit areas
Hiding a required agreement inside legal copy
Using indeterminate as a third user-selectable answer
Comparison
What to study across systems
Public-service systems emphasize generous hit areas and question structure; enterprise systems add dense grouping and mixed-selection behavior for tables and trees.
Open comparison