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.

A checkbox might be used outside of a form field when:

1. Serving as a UI control showing or hiding page content, such as revealing additional content or inputs which are only relevant when a particular feature is enabled.
2. Scenarios in which having a form field label in addition to the checkbox label would be redundant for the user.
3. Allowing a user to opt-in or acknowledge a disclaimer, such as a privacy policy or terms and conditions.
4. Allowing an item to be selected within a list, table row, or drop down.

By default, CheckBox has built-in pad to create space between the CheckBox and FormField border therefore when using checkbox alone pad="none" will need to be applied. When using CheckBox outside of FormField, it does not have a border or label. The hover indicator is applied to the checkbox itself.

• 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.