Version 6.2.1

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 showing 2 selected, 2 indeterminate, and 2 not selected checkboxes, each with a generic label.

Selection#

Checkboxes can be selected, not selected, or in an indeterminate state. They are in an indeterminate state when they represent both selected and not selected values. Learn more about representing mixed values.

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#


Checkbox with placeholder label, not selected, in focus.

Keyboard focus#

A checkbox can be navigated using a keyboard. The keyboard focus state takes the checkbox’s visual hover state and adds a blue ring to the checkbox in focus.

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 checkbox in Windows “high contrast black” theme with label “Checkbox”, selected checkbox with label “Selected checkbox, and disabled checkbox with label “Disabled checkbox”.

Windows high contrast mode#

In Windows high contrast mode, checkboxes should be displayed using the high contrast theme-specified colors for buttons. By default, borders should be the same as the button text color and labels should use default text color. In hover and keyboard focus states, a border should display as the button border color. Selected checkbox fills should be the same as button border color. In the disabled state, border, and text color should display as the disabled color.

Checkbox (Windows high contrast mode) UI kit

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".
checkbox_usage-guidelines_checkbox-or-switch_dont@2x_qu5eYSRj2ympZiTLpPwDs.png

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.

Representing mixed values#

When a checkbox represents multiple values that are not identical, the checkbox should appear in the indeterminate state. Any subsequent click or tap should select the checkbox, and update all values to be selected. Another click or tap after that should deselect the checkbox, and update all values to be not selected.

Key example showing correct way to to show multiple checkboxes with mixed values. One checkbox, label All interests, is in the indeterminate state. This applies to a group of 3 checkboxes, labels Travel, Music, Shopping. Travel and Music are in the selected state, while Shopping is not selected, so the All interests checkbox is indeterminate.
Key example showing incorrect way to to show multiple checkboxes with mixed values. One checkbox, label All interests, is in the not selected state. This applies to a group of 3 checkboxes, labels Travel, Music, Shopping. Travel and Music are in the selected state, while Shopping is not selected.

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
Apr 13, 20206.2.1
  • Updated keyboard focus state to be more accessible
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 20, 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).

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).

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

Content design

UI language and information design considerations have been incorporated into component design.

Defined options

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

Defined behaviors

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

Usage guidelines

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

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

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.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

N/A

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.