Checkbox

Checkboxes are most commonly used to give users a way to make a range of selections. They may also be used as a way to have users indicate they agree to specific terms and services.

View in Storybook

Anatomy

A checkbox can be a standalone element to sit next to additional text or work within certain components. Users can select a number of options ranging from zero to multiple options.

Anatomy
  1. Checkbox: Signifies whether a selection of an item has been made by the consumer.
  2. Label (optional): Title of an item that can be selected.
  3. Help Text (optional): An additonal text description to help explain the purpose of the checkbox.

 

States

Checkbox has unchecked, checked, error, indeterminate and disabled states.

States

Indeterminate is a state that is neither checked nor unchecked. These are typically used in long selectable lists or a Table when not every item is selected or unselected.

 

Usage

The checkbox is used differently depending on where it is being used. If checkbox is a standalone element, it can only ever be selected one at a time. When nested within other components like dropdown Menu or Table, consumers can select a checkbox multiple times depending on the contents on display.

 

Accompanying label and helper text

Include a subtitle when required to provide more explanation. Additional links can be added for further detail but are not advised as the label should give the correct level of information.

Include a subtitle when required to provide more explanation. Additional links can be added for further detail but are not advised as the label should give the correct level of information.

 

Single select

Work independently from each other. Selecting one checkbox shouldn’t change the selection status of another checkbox in the list.

Work independently from each other. Selecting one checkbox shouldn’t change the selection status of another checkbox in the list.

This pattern should flow through nested single selected items. Opening a selected folder should show all subsequent nested items active as well.

This pattern should flow through nested single selected items. Opening a selected folder should show all subsequent nested items active as well.

 

Multi select

In dropdown menus, we can display multiple checkboxes in the selected states of list items.

In dropdown menus, we can display multiple checkboxes in the selected states of list items.

Independent checkbox lists do not have the selected state as they are not in any container.

Independent checkbox lists do not have the selected state as they are not in any container.

 

 

Best practice

Checkbox can be used in many parts of the product for various types of selection purposes;

 

  • In a list, form or a Table to present users with multiple, related options where more than one option can be selected. Users must be able to select all, none or some of the presented options.
  • In a Form and along with a TextField.
  • When selection doesn’t take immediate effect and requires form submission.
  • 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.

 

Do's and Don'ts

Do

Don't

✅ Use for confirmations and conditional changes

🚫 Use when only one of multiple options can be selected - use a Radio

✅ Use when there is one or more options in a list to select

🚫 Use when it’s difficult to tell that a checkbox turns something on or off. Use Switch instead

 

🚫 Overwhelm users with too much information in a label or helperText - single line descriptions are recommended

 

Also see