- A checkbox must have a visible label that clearly conveys what option a user is choosing.
Note: In-cab sizes only. See mobile patterns for smaller options for in-field.
All checkboxes should have the following states:
- Active Focus
- Active Disabled
- Active Error
- Default Focus
- Default Disabled
- Default Error
- Indeterminate Focus
- Indeterminate Disabled
- Indeterminate Error
Note: Focus state uses “global blue.”
|Label Right||Label Left|
- Checkboxes may be branded based on the primary color or other complementary colors for the best visibility in the cab.
- 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.
- 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.
- Use full sentences with punctuation for the checkbox group label.
- Try to keep checkbox labels brief and start them with verbs.
Was this page helpful?
Thanks for your feedback!