Skip to main content

Checkboxes

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

Specifications

  • A checkbox must have a visible label that clearly conveys what option a user is choosing.
Type Example Height
Default

56dp
Focus

56dp

Note: In-cab sizes only. See mobile patterns for smaller options for in-field.

Behaviors

All checkboxes should have the following states:

  • Active
  • Active Focus
  • Active Disabled
  • Active Error
  • Default
  • Default Focus
  • Default Disabled
  • Default Error
  • Indeterminate
  • Indeterminate Focus
  • Indeterminate Disabled
  • Indeterminate Error

Checkboxes Progression

State Active Default Indeterminate
Default

Focus

Disabled

Note: Focus state uses “global blue.”

Labels

Label Right Label Left

OEM Branding

  • Checkboxes may be branded based on the primary color or other complementary colors for the best visibility in the cab.

Checkboxes OEM

Editorial

  • Checkbox labels may be capitalized in two ways, depending on their length and placement on the UI:
    • Use title case for short labels (fewer than three words) that are to the left or above a checkbox.
    • Use sentence case for longer labels (more than three 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.
Last updated November 14, 2023.