Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Usage

Use checkboxes to:

Select one or multiple items from a list
Present a list containing sub-selections
Turn an item on or off in a desktop environment
Replace switches if multiple options can be selected from a list

Each checkbox works independently of other checkboxes in the list. To use a checkbox, the user clicks the checkbox to toggle it between checked and unchecked. The checkbox text describes the action.

In a form if there is only one checkbox, either a label or text can be used, depending on the format.

If there are multiple checkboxes, the label describes the whole group and the text property of the checkbox describes each individual checkbox.

Within a group, each checkbox can be checked or unchecked. The changes take effect after user confirmation via a triggering action button (such as a “Save” button).

Placement

Checkboxes are 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.

Types

Other selection controls

Selection controls allow users to complete tasks which involve making choices such as selecting options, switching settings on or off, or adding or removing items.

Radio buttons and switches are alternative selection controls that can be used to enter decisions or declare preferences, such as settings or dialogs.

Anatomy and content

The checkbox component is composed of a checkbox label and a checkbox input. In case of a checkbox group, a group label can be added.

Checkbox input

Use the a checkbox input to indicate the appropriate state : selected or unselected.

By default, it is unselected.

Checkbox label

Use the checkbox label to describe the information you want to select or unselect:

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

Alignment

Checkbox labels are positioned to the left or the right of their inputs, depending on the situation.

Checkbox groups can be laid out vertically or horizontally, depending on the use case and the structure of the UI. When possible, arrange the checkbox and radio button groups vertically for easier reading.

Checkbox group

A checkbox group can have a resting or critical state. If the checkbox group includes assistive text in the form of error text for example, it is displayed at the very end of the list of options.

Group label (optional)

Use a group label to describe the set of options or provide guidance for making a selection.

Behavior and interaction

Checkboxes can be selected, unselected, or indeterminate.

States

Checkboxes can have one of the following states: enabled, disabled, hovered, focused, pressed or read-only.

Disabled state : to enhance user understanding, display the « not allowed » cursor and add a tooltip to explain the reason why a field is disabled.

Responsiveness and density

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.

Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the checkbox so the control and label are top aligned.