Skip to main content

Checkbox

A checkbox is an interactive element that allows users to select or deselect an option.

Anatomy

Anatomy of a checkbox component.
  1. Checkbox: A Checkbox input indicating the appropriate state. By default it is unselected.
  2. Label (Optional): Describes the item you want to select or unselect.
  3. Assistive text (Optional): The assistive text provides additional instructional information / error / success messaging.

Variants

Default

Unchecked checkbox with label.

Modifiers

Label - without

Unchecked checkbox without label.

Label positioning

Place labels in the trailing position by default. Use a leading label when the design requires more flexibility. Only one label is allowed to be present.

Unchecked checkbox with a trailing label.
Unchecked checkbox with leading label.

Assistive text

Assistive text is used where needed to provide additional information or error / success messaging. The assistive text is always used for an error state to provide the user with the information required to complete the form element.

Unchecked checkbox with assistive text.
Unchecked checkbox with assistive text.

Alignment

If there is a Checkbox grouping, they can be laid out vertically or horizontally depending on the use case; with the option of a label. When possible, arrange the Checkbox group vertically for easier reading.

Unchecked checkbox with assistive text.
Unchecked checkbox with assistive text.

Content

Checkbox labels

  • Always use clear and concise labels for Checkboxes.
  • Be explicit about the results that will follow if the Checkbox is selected.

Overrides

Checkbox with a label containing a link.
  1. Label: The label can include a link, when the string is a complete sentence or more.

Overflow

  • If you are tight on space, consider rewording the label.
  • 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.
Checkbox with a label that wraps to a second line.

Layout

Fill container

By default label container is set to hug. Designers can set the textbox to fill the container when using a leading label. This allows the layout to adapt more flexibly to different designs.

When using the Fill container layout, take tablet and landscape views into account.
Unchecked checkbox with a leading label.
Unchecked checkbox with a space before the leading label.

Interactions

If the checkbox has a label, the label is clickable for easier interaction.

Unchecked checkbox showing the label and checkbox are both clickable.
Unchecked checkbox showing the checkbox is clickable.

If the label contains a link, the link has its own touch target, while the standard text remains selectable for the checkbox control.

Checkbox label containing a link, showing the clickable area around the link.
Checkbox label containing a link.

States

The Checkbox input allows for three states: unselected, selected, and partially selected. The default view of a set of Checkboxes is having no option selected.

Selected, unselected and partially selected checkboxes.

Interactive states

Outlines the atomic level interactive elements for the component.

Checkboxes showing default, active, error and disabled states.

Examples

Potential use cases for the component.

An example checkbox group showing email and text message communication preferences.
An example of a terms and conditions checkbox showing an error state.

RTL Examples

Here are some examples of Checkbox in RTL context.

An RTL example checkbox group showing email and text message communication preferences.
An RTL example of a terms and conditions checkbox showing an error state.
Back to top