Use checkboxes to present a list of options to a user where multiple selection can be made.
A user can select multiple options.
- Some examples are:
- Selecting multiple locations in a location picker
- A user can only select one options.
Use when multiple selection can be made.
- Always use the default component style.
- Always include a label to the right of the checkbox.
- 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.
- Each label should clearly describe the result of selecting the checkbox.
- Always write label in sentence case.
- Avoid long labels.