Checkbox
A common input control for users to select one or more options from a number of choices.
Type
Default
Usage
Use for forms where users can choose from a group of options.
Checkbox groups should always have a Fieldset Legend 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
Validation & Errors
Upon validation, if any Checkboxes within Fieldset do not have valid input, an error message will be presented.
Visual style
Always maintain 44px 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.
Fieldset Legend
- A standalone Checkbox typically appears within an established section, requiring no additional title.
- A set of Checkboxes requires a Fieldset Legend to introduce the selections as a whole.
- Think of a Fieldset Legend 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 Fieldset.
Character Count
Checkbox can accommodate multiple lines, but as with all selection-related content, short and sweet options make it easier for users.
Errors
A set of Checkboxes presented in a Fieldset receive validation and require an error message for the set. View Aetna’s error guidelines.
Accessibility
Characteristics
- One/multiple Checkboxes can be checked
- Clicking label and/or icon checks/unchecks the Checkbox
- A label clearly identifies purpose for each Checkbox
- Use a Fieldset Legend to define Checkboxes presented as a group
Keyboard/Focus Expectations
- Enabled Checkboxes receive focus with user interaction and keyboard navigation
- User interaction or Return/Spacebar checks/unchecks a single Checkbox
- Tabbing navigates to the next Checkbox, Spacebar makes a selection
Screen Reader Expectations
- Reading order: “{Checkbox label}, not checked/checked, Checkbox”
- If disabled: Disabled Checkbox is not focused but findable using Browse Mode. When highlighting with Browse Mode: “Checkbox, unavailable, not checked/checked, {Checkbox label}”
- Error on Fieldset: “{Fieldset Legend Label}, group, {Error message}”
- Error on Checkbox: “{Checkbox Label}, not checked/checked, Checkbox, {Error message}”
*Note: This is a general experience expectation, but there are variations in how assistive technology responds on certain browsers and screen readers.