Adobe Logo

Spectrum

Version 7.0.2

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.

Table of contents#

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.

Examples of the four sizes of checkboxes, small, medium, large, extra-large, shown ascending from smallest to largest. All examples show a selected checkbox with generic label text, reading Label.

Size#

Checkboxes come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

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 two read-only checkboxes, stacked vertically. Each has a label with generic placeholder text that says Label. Neither of the checkboxes are selected. The second checkbox shows an arrow cursor hovering over and highlighting the label text in blue, to copy it.

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
size
small / medium / large / extra-large
medium
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. An example of this would be when a checkbox is connected to other controls inside of 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

Label groups of related checkboxes#

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

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of two checkboxes in Spectrum for Adobe Express theme, labels Label. Top checkbox is selected, bottom checkbox is not selected.

Spectrum for Adobe Express#

Checkboxes in Spectrum for Adobe Express have indigo accents. They are slightly larger and more rounded compared to the default Spectrum checkboxes.

Changelog#

DateNumberNotes
Feb 24, 20237.0.2
  • Updated read-only option design
Sep 08, 20227.0.1
  • Updated disabled text color (from gray-500 to gray-400)
Apr 06, 20227.0.0
  • Updated all colors to 6.0.0
Feb 15, 20226.3.1
  • Updated label color for error state
Jan 19, 20226.3.0
  • Added size option
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.