Checkboxes are used to pick an option when one or more options can be chosen.
- If the user can only select one option from a list, use radio buttons instead.
- Checkbox label should always clearly describe what will happen if the specific option is chosen. A good practice is to keep labels a maximum of three words long.
- Checkboxes work independently from each other. This means that checking one option should never affect other checkboxes.
- If Checkboxes are related to each other, use HDS Selection group to achieve that.
- Checkboxes should not have any immediate effects. The checkbox selection takes effect when the user presses a submit button (e.g. in a form). If you need the selection to have an immediate effect, use HDS Toggle button component instead. Also see guidelines for choosing between radio buttons, checkboxes and toggles.
Related checkboxes can be grouped together with the Selection group component. See HDS Selection group page for full documentation.
Checkboxes also have a "mixed" state that is called an indeterminate state. This state is meant to be between the checked and unchecked states. While not very common, the usual use case for the indeterminate state is nested checkboxes. The parent checkbox can be in the indeterminate state when only part of the children checkboxes are checked.
indeterminate property is given.