Checkbox

The checkbox component is used when there are multiple items to select in a list. 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.

Checkboxes have a wide variety of usages, such as for forms, filtering, terms and conditions, and lists.

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.

The checkbox component is comprised of a checkbox label and a checkbox input. If there is a group of checkboxes, a group label can be added.

1. Group label: Communicates what needs to be selected below.
2. Checkbox input: A checkbox input indicating the appropriate state. By default it is unselected.
3. Checkbox label: Describes the information you want to select or unselect.
4. Helper Text (optional): Format instructions should appear as helper text below the checkbox or checkbox group. Can also appear as warning or error message.

Placement

The checkbox component is often used in forms. Forms can be placed on a full page, in a modal or in a side panel. A checkbox can also be used for agreeing to terms and conditions or to filter information.

Group labels

• A set of checkboxes is preceded by a group label to provide further context or clarity.
• A group label can either state the category of the grouping or describe what actions to take below.

Checkbox labels

• Always use clear and concise labels for checkboxes.
• Labels appear to the right of checkbox inputs.

Overflow content

• We recommend checkbox labels being fewer than three words.
• If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis, instead wrap to a second line.