Checkbox

Status: Available View in Storybook

A common interactive control for users to make a range of selections (zero, one, or multiple).

Type

Default

Default radio button

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.”
↑ Back to top