When the user needs to select one or more options, use a checkbox.
CheckBox can be used to present an individual option or group of options to the user. When presented in a group, the user can select a single or multiple options. Refer to CheckBoxGroup for examples.
CheckBox should not be used if a user should only be allowed to select one option from a list of options. In the case that a user should only be able to select one option, refer to RadioButtonGroup.
There are three states which CheckBox provides:
- Unchecked - Value has not been selected.
- Checked - Value has been selected.
- Indeterminate - Used in situations where the CheckBox is a parent to a list of child options. Use the indeterminate state to indicate that only a subset of the child options have been checked.
Checked and unchecked states refer to when an individual CheckBox is checked or when all options from a group are checked.
- Toggle is a single option which prompts users to choose between two mutually exclusive options.
- Toggle is preferred to quickly switch between two possible states. Toggles usually provide immediate results (i.e. no form submission is required) in which gives users the ability to control their preference.
- When using toggles the order of text and toggle can be controlled using the reverse prop. If the toggles are used in a group that contains only toggles then it is preferred to have the text on the left and the toggle on the right.
CheckBox should be used inside of a FormField to ensure that a label is properly associated with the input. The labels on individual checkboxes should clearly describe the purpose of the checkbox.
If a CheckBox is used outside of the context of a FormField, it is important to meet accessibility requirements in an alternate way. There should always be clear visual indication, either by text or icon, that describes the purpose of the checkbox.
CheckBox can be used individually, within a group, or as a toggle. A standalone or toggle checkbox indicates that a user is opting-in to the context of the checkbox. Within a group, one or multiple checkboxes can be selected.
Adding a description provides the user additional information about the context or purpose of the checkbox.
Toggle is a great choice to use when the user is given a single option that they can turn on or off.
Validation is used to show that the checkbox does not meet the validation requirements of its bounding FormField.
Used to indicate that CheckBox cannot be interacted with.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.