Checkbox
A common input control for users to select one or more options from a number of choices.
Types
Basic
Table Cell
Usage
Use for forms where users can choose from a group of options.
Behavior
Visual Style
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.
Section Headers
- A standalone Checkbox typically appears within an established section, requiring no additional Section Header
- A set of Checkboxes requires a Section Header to introduce the selections as a whole
- Think of Section Headers 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
- Groups of Checkboxes require a Section Header to act as a group label
Keyboard/Focus Expectations
- Enabled and disabled Checkboxes receive visible focus with VoiceOver
- Tap checks/unchecks the Checkbox
Screen Rreader Expectations
- Reading order: “unchecked/checked, {Checkbox label}, {Checkbox group label}, Checkbox”
- If disabled: “unchecked/checked, {Checkbox label}, {Checkbox group label}, Checkbox, dimmed”