Skip to main content

Checkbox

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

Overview

Checkboxes provide a binary selection mechanism where users can either check the box to indicate they want a particular option or leave it unchecked to indicate they do not want that option.

They are commonly used in forms, settings panels, and various other interfaces where users need to make a single selection.

Checkbox labeled 'I have read and accepted the terms and conditions' is checked.

Dos and Don’ts

Do
  • Make sure labels are concise and that they clearly describe what checking the box means.
Don't
  • If multiple checkboxes are needed, use a checkbox group.

Anatomy

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

Variations

Default

Checkbox component in a default state.

Modifiers

Label

A label should always be present unless being utilised as a nested component and an alternative label is present.

A blank checkbox followed by the label text.
A blank checkbox component.

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.

A blank checkbox followed by assistive text in red below it.

Content

All content should use sentence case.

Label

  • Always use clear and concise labels for checkboxes.
  • Labels appear to the right of checkbox input (when the text direction is left-to-right).

Overflow

Multiple words overflow

When the label exceeds the available width, the label will wrap onto a new line.

A blank checkbox followed by the label that exceeds the available width and wraps onto a new line.

Behaviours

States

The checkbox input allows for a series of three states: unselected, selected, and partially selected. The default state for a checkbox is unselected.

Use the partially selected state when the checkbox contains a sublist of selections, some of which are selected, and some unselected.

Checkbox component in a selected state.
Checkbox component in an unselected state.
Checkbox component in a partially selected state.

Interactions

Users can trigger the checkbox directly or by clicking the checkbox label. Having all regions interactive creates a more accessible click target.

An illustration represents that users can trigger the checkbox directly.
An illustration represents that users can trigger the checkbox by clicking the checkbox label.

Interactive states

Outlines the atomic level interactive elements for the component.

Default

Checkbox component in a default state.

Hover

Checkbox component when hovered over.

Active

Checkbox component in an active state.

Focus

Checkbox component when it has focus.

Disabled

Checkbox component in a disabled state.

Error

Checkbox state example showing an error.

Examples

LTR examples

Here are some examples of the component in a left-to-right context:

Checkbox labeled 'I have read and accepted the terms and conditions' in a left-to-right context.
Selected checkbox followed by the label text in a left-to-right context.

RTL examples

Here are some examples of the component in a right-to-left context:

Checkbox labeled 'I have read and accepted the terms and conditions' in a right-to-left context.
Selected checkbox followed by the label text in a right-to-left context.

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Alpha
Vue [Fozzie]
 Stable
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 Stable