Checkbox
A common input control for users to select one or more options from a number of choices.
Types
Default
Usage
Use for forms where users can choose from a group of options.
Checkbox groups should always have a Section Title that clearly defines or explains what the grouped options are for
Use for forms where users can make multiple selections
Use for forms where users can toggle something on or off
Avoid pairing with other interactive elements, such as a tooltip or link
Behavior
Checkboxes should operate independently of each other, except when a “Select all”-type option is presented
Visual Style
Always maintain 48dp minimum hit area for each option
Content Strategy
The overall content goal of Checkbox is to present selections with appropriate scope and style for the screen’s context. A major consideration for the content strategy is whether Checkbox stands alone or appears in a set.
Titles
- A standalone Checkbox typically appears within an established section, requiring no additional title.
- A set of Checkboxes requires a title to introduce the selections as a whole.
- Think of titles as a tone-setter for the content that follows.
Grammar & Punctuation
- Selections should follow best practices for capitalization and punctuation. For example, more complex selections should be Sentence case, using end punctuation only if a full sentence.
- Sets, simple and complex, should adhere to parallel syntax.
Actions
- Because Checkbox is inherently selectable, actions are not required to highlight that behavior.
- Instead, use actions to clearly define the selection’s intent— bringing clarity to a standalone Checkbox or better distinguishing selections in a set.
Character Count
Checkbox can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.
Accessibility
Characteristics
- One/multiple Checkboxes can be checked
- Tapping label or icon checks/unchecks the Checkbox
- Label clearly identifies purpose for Checkbox
Keyboard/Focus Expectations
- Enabled Checkboxes receive focus when tapped and with keyboard navigation
- Tap or return/spacebar checks/unchecks the Checkbox
Screen Rreader Expectations
Reading Order
- Not checked/checked, “label”, “Checkbox group label”, Checkbox
- If disabled: not selected/selected, “label”, “Checkbox group label”, Checkbox, disabled