Specifications
There are two sizes of checkboxes:
- Default (24px x 24px)
- Large (32px x 32px)
States
Checkboxes have the following States:
- Default
- Focus
- Checked
- Disabled
- Disabled Checked
- Indeterminate
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 two 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.