Checkboxes

Checkboxes are used for a list of options where the user may select multiple options, including all or none.

Specifications

There are two sizes of checkboxes, default (24 x 24) & large (32 x 32)

Checkboxes Specifications

States

Checkboxes have the following States:

  • Default
  • Focus
  • Checked
  • Disabled
  • Disabled Checked
  • Indeterminate

Checkboxes States

Behaviors

  • Reflects the affirmative (“yes” or “true”) of its label when checked.
  • Choices made via checkbox should always be submitted or saved using a Button.
  • A checkbox’s label is included in the clickable target area.
  • The default view of a set of checkboxes is having no option selected.

Editorial

  • Checkbox labels may be capitalized in 2 ways, depending on their length and placement on the UI:
    • Use title case for short labels (fewer than 3 words) that are to the left or above a checkbox.
    • Use sentence case for longer labels (more than 3 words) that are placed to the right of a checkbox, especially if the label reads like a phrase.

Default

  • Use full sentences with punctuation.
  • If user is consenting to something, start the sentence with “I,” and also run the phrasing you choose by compliance.

Groups

  • Use full sentences with punctuation for the checkbox group label.
  • Try to keep checkbox labels brief and start them with verbs.