Checkbox
A common interactive control for users to make a range of selections (zero, one, or multiple).
Page sections
Type
Default
Usage
Use for forms where users can make optional and multiple selections among a range of choices
Use for forms where users can toggle something on or off
Behavior
Checkboxes should operate independently of each other, except when a "Select all"-type option is presented
A checkbox can be toggled by both the checkbox itself and its label
Avoid pairing with other interactive elements, such as a tooltip or link
Visual style
Always keep checkbox top-aligned to the first label line when the label wraps to multiple lines
Never change the layout to have the checkbox on the right side of the label
Always maintain 16px between checkbox options
Content strategy
- Consider copy that accompanies checkboxes “body copy”
- Generally, make actionable (e.g. Use primary shipping address for billing. vs. Billing same as shipping address)
- Follow normal casing, grammar, and punctuation practices. (e.g. use a period for full sentences)
- Adhere to parallel syntax when authoring multiple checkboxes on a single page / screen
Accessibility
Characteristics
- One/multiple checkboxes can be checked
- Clicking label checks/unchecks the checkbox
- Label clearly identifies purpose for checkbox
Keyboard/focus expectations
- Checkbox receives focus
- Spacebar checks/unchecks the checkbox
Screen reader expectations
- For large groups, the group label and number of options are announced. Ex. “Medical History 20 options. Check all that apply.”
- For small groups, the group label is announced. Ex. “Medical History, Check all that apply.”
- Checkbox label is announced. Ex. “Asthma, …”
- Checked/unchecked status is announced. Ex. “…unchecked.”