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.
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.