Skip to main contentCarbon Design System

Checkbox

Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

Overview

Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

When to use

Forms

Can be used in forms on a full page, in modals, or on side panels.

Filtering and batch action

Used to filter data either on a page, in a menu, or within a component. Checkboxes are found in Data table for batch editing purposes.

Terms and conditions

Turning the checkbox input on or off can indicate whether you agree to the terms.

Lists with sub-selections

Used when there is a parent and child relationship. You can use a parent checkbox to make a bulk selection of all list items. Unchecking the parent deselects all of the list items. Alternatively, you can select children individually when the parent is not selected, which is where the indeterminate state comes in to play.

Example of a full page filter list

Example of a full page filter list

When not to use

If a user can select only one option from a list, radio buttons should be used instead of checkboxes. Checkboxes allow the user to select multiple items in a set whereas radio buttons allow the user to select only one option.

Do use radio buttons when only one item can be selected.

Do use radio buttons when only one item can be selected.

Don't use checkboxes when only one item can be selected.

Don't use checkboxes when only one item can be selected.

Live demo