Version 6.2.0

Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Group of three checkboxes for interests. Two selected, labels Illustration and Photography. One not selected, label UI/UX design.

Anatomy#


Image illustrating through labels the component parts of a checkbox in a checked, unchecked and indeterminate state, including its label.

Options#


Key example of checkboxes, one group with labels, and one group standalone.

Label#

Checkboxes should always have a label. When the label is not defined, a checkbox becomes standalone. Standalone checkboxes are only used when their connection to other components is clear and they give sufficient context — for example, in application panels.

Key example of two types of checkboxes, the first group not emphasized, and the second group emphasized.

Emphasis#

By default, checkboxes are not emphasized (gray). This version is optimal for when the checkbox is not the core part of an interface, such as in application panels, where all visual components are monochrome in order to direct focus to the content.

The emphasized (blue) version provides a visual prominence that is optimal for forms, settings, lists or grids of assets, and other situations where a checkbox need to be noticed.

Key example of three checkboxes in a disabled state. One unchecked, on checked and one in an indeterminate state.

Disabled#

A checkbox in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.

Key example of three checkboxes in an error state. One unchecked, one checked and one in an indeterminate state.

Error#

Checkboxes can be marked as having an error to show that a selection needs to be made in order to move forward, or that a selection that was made is invalid. For example, in a form that requires a user to acknowledge legal terms before proceeding, the checkbox would show an unchecked error to communicate that it needs to be selected.

Key example of read-only checkboxes. Label, Label. Checkboxes shows visual change when moused over, but text can still be selected.

Read-only#

Checkboxes have a read-only option for when they’re in the disabled state but still need their labels to be shown. This allows for content to be copied, but not interacted with or changed.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Value
label
text / nothing
When the label is not defined, the checkbox appears as a standalone checkbox.
is selected
yes / no
no
is indeterminate
yes / no
When a checkbox is indeterminate, it overrides the selection state.
no
is emphasized
yes / no
no
is disabled
yes / no
no
is error
yes / no
no
is read-only
yes / no
no

Behaviors#


Key example of the text overflow behavior for checkboxes. A selected and emphasized checkbox is placed on the left of a long checkbox label text. The long text breaks into a new line and is flushed-left at the same column as the first word of the label.

Text overflow#

When the label is too long for the horizontal space available, it wraps to form another line.

Key example of a checkbox in an indeterminate state with a label of "Lens correction".

Mixed value#

When a checkbox presents multiple values that are not identical, the checkbox should appear as indeterminate. Any subsequent click or tap should select the checkbox, and update all values.

Usage guidelines#


Emphasized or not?#

Emphasized checkboxes are optimal for forms, settings, etc. where the checkboxes need to be noticed, or to bring attention to selected items such as cards or table rows. Not emphasized checkboxes are optimal for application panels where all the visual components are monochrome in order to direct focus to the canvas.

Key example of an emphasized checkbox. The first checkbox in a form is emphasized (blue) and the two other checkbox are gray as they are located in an application panel.

When to use a standalone checkbox?#

Standalone checkboxes should be used in situations where the context is clear without an associated text label. For example, a checkbox connected to other controls inside a panel.

Key example showing the correct usage of standalone checkboxes. The checkbox labeled "Background blur" follows to gray checkboxes for fill and border.

Checkbox or radio button?#

Checkboxes and radio buttons are not interchangeable. A set of checkboxes should be used to select as many options as desired (or none). A set of radio buttons should be used to select only a single option from a list of mutually exclusive options.

Key example showing the correct use of checkboxes for selecting many options. The checkboxes "Travel" and "Music" are checked in a checkbox group for interests. The last checkbox label "Shopping" is unchecked.
Key example showing the incorrect usage of checkboxes for selecting a single option.
Instead of radio buttons three checkboxes in a checkbox group select the size. The checkboxes small and medium are checked.

Checkbox or switch?#

Checkboxes are best used for communicating selection (e.g., multiple table rows) while switches are best used for communicating activation (e.g., on/off states). Checkboxes, unlike switches, can have an error state.

Key example showing the correct usage of a checkbox. A checked is used to "Agree to terms".

Sets of checkboxes should always have a clear label that describes what the list of options represents and guides users what to do. This is important for accessibility, since a screen reader will read the label before each option.

Key example showing the correct use of label groups of related checkboxes. The label group "Page(s to display" group the three checkboxes Homepage, Gallery and Contact. The first two checkboxes are checked.
Key example showing the incorrect use of label groups. The group label for the three checkboxes "Tomorrow", "In 3 days"  and "Next week" is missing.

Internationalization#


Key example showing a checkbox in the right-to-left language use case. The checkmark is placed on the right side of the text.

RTL#

For RTL (right-to-left) languages, the layout of the checkbox is mirrored. The checkmark is placed on the right side of the text.

Keyboard interactions#


KEYINTERACTION
SpaceToggles the checkbox between selected and not selected. If the checkbox is partially selected initially, the checkbox becomes selected first (subsequent toggles alternate normally between selected and not selected).

Changelog#


DateNumberNotes
Feb 26, 20206.2.0
  • Added read-only option
Aug 22, 20196.1.0
  • Added text overflow behavior
Jul 31, 20196.0.0
  • Replaced “standard/quiet” variants with emphasis (“emphasized/not emphasized”)
Apr 19, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.