Checkbox group
More options can be selected among the given ones (e.g. in a form), or nested checkbox, in which one checkbox present sub-elements (e.g. in a filter menu).
Read Checkbox inputs for further information on checkbox.
Writing guidelines
Group titles
Give a title to a group of checkboxes in case the content is not immediately self-explanatory.
Labels
Checkboxes always include a label. Although the length of the label can vary according to the context, always keep it concise and direct.
Capitalization and case
Write labels in sentence case and without punctuation.
Text overflow
In case of overflow, text wraps to another line.
Specifications
Anatomy
- Checkbox group title (optional)
- Unselected checkbox
- Selected checkbox
- Helper text (optional)
Checkbox group - Nested elements
- Indeterminate checkbox
- Checkbox group title
- Selected checkbox
- Checkbox input label
- Unselected checkbox
Behavior
Grouping
Checkboxes group come with no default option selected. Unless differently specified, any number of options can be selected (none, one or multiple).
When grouped, checkboxes can be laid out vertically or horizontally. If you include a group title and helper text, use caption text style.
| Use case | Alignment | |
|---|---|---|
| Vertical grouping | It is advised to stack checkboxes vertically for better readability. | Leave a 16px spacing between each element of the group. |
| Horizontal grouping | Depending on the case, checkboxes can be laid out horizontally. | Leave a 32px space between each items. |
| Multiple columns | Depending on the case, items can span over two or three columns (e.g. in a checkbox group with several elements). | Align columns to the grid. |
Indeterminate checkbox
In checkbox group, checkbox can come in an additional state variant: Indeterminate. This is to be used when a checkbox contains nested checkboxes, some of which are selected, and some unselected.
For additional info about theme and styling, read Checkbox
Accessibility guidelines
Make sure there is enough contrast between selection controls color and the background.
For a more accessible experience:
- Keep labels concise and direct.
- Consider adding group titles and helper text to provide additional information. - Keep in mind that if you decide to not show the label, one is always needed in code anyway.
- List option in a logical way.