Checkbox
#
OverviewUse checkboxes to present a list of options to a user where multiple selection can be made.
#
Design Guidelines#
Use whenA user can select multiple options.
- Some examples are:
- Selecting multiple locations in a location picker
#
Don't use when- A user can only select one options.
Checkbox
Use when multiple selection can be made.
Visual Style
- Always use the default component style.
- Always include a label to the right of the checkbox.
Behaviour
- Clicking an unselected checkbox will select it.
- Clicking a selected checkbox will unselect it.
- Multiple checkboxes can be selected.
- If you use only one checkbox, it is the same as a toggle between two states. The change must be submitted before the state will be changed.
- If you have a list that has multiple levels, if all checkboxes within the levels are selected, the highest level one will be selected.
- If you have a list that has multiple levels, if only some of the checkboxes within the levels are selected, the highest level one will be in an indeterminate state.
Editorial
- Each label should clearly describe the result of selecting the checkbox.
- Always write label in sentence case.
- Avoid long labels.