Checkbox

Definition

Checkboxes let users make a binary choice like turning a feature on or off, or selecting multiple options from a list.

Anatomy

Defining shared language for discussing the construction and structure of this component.

Key	Category	Parts
1	Shape	Border radius, border color
2	Text, Label	Font family, size/line height, color
3	Shape	Background color
4	Text, Description	Font family, size/line height, color

Usage

Figma library (internal only)

Use a checkbox for choice selection.

A user must sometimes take another action to submit the checkbox choice.

Variants

Figma library (internal only)

HCM library (internal only)

Acorn offers 3 checkbox variants in 1 size, with 5 states across 3 modes (themes).

Sizes

Acorn doesn't offer any sizing variants for checkboxes.

States

A checkbox can be checked or unchecked — this is a visual affordance. In addition, checkboxes have 5 interactive states that may affect the visual output.

Available interactive states: Default, hover, active, focus, and disabled.

The focus and disabled states have important caveats that apply across modes.

Focus

:focus states are used for keyboard navigation and sometimes when clicking a focus-able element using a mouse. Focus states are vital for accessibility and may not be omitted.

The CSS pseudo class :focus does not affect visual output in iOS or Android.

Disabled

Disabled visual styles should only be applied when a checkbox is disabled.

Disabled checkboxes are unusable. Disable a checkbox to keep users from interacting with the checkbox until conditions are met.

With description

Figma component (internal only)

HCM component (internal only)

Examples

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert theme

Night Sky theme

With label

Figma component (internal only)

HCM component (internal only)

Examples

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert theme

Night Sky theme

Layouts

Checkboxes can be used in the following layouts.

Single

Provides users with a single, binary choice. A selected box (showing the check) means an item is “on” or enabled.

List

Provides users with a list of related elements from which multiple items can be selected.

Nested

Nest checkboxes to convey that some options are only available if the parent option is selected.

Nested checkboxes can lead to a mixed state.

Closed

Open

Behavior and interaction

Checkboxes are an interactive element with a binary state: checked or unchecked.

When a user clicks a checkbox the state changes from current state to opposite state. I.e. clicking an unchecked checkbox changes it to a checked checkbox.

The state change involves a color change, and adds a checkmark.

Writing guidelines

Do not truncate checkbox labels. Can wrap (to two lines max) but avoid if possible.

When possible, use labels that describe the action or result of selecting the checkbox: “Search for text when you start typing”.”

Use the same terms to describe the selection in the label and any supporting copy.

Use the imperative voice.

Maintain parallel construction for lists of related checkbox labels: “Use autoscrolling” and “Use smooth scrolling”.

Don't

Use terminal punctuation..

Use first person.

Localization

Avoid colloquialisms that don’t translate well or prove a barrier to understanding.

To pressure test designs, use tools like Google Translate or Transvision to see how design reacts to Chinese, English, and German.

Not sure? Check with #l10n in Slack.

Accessibility

Labels should always be clickable. Clicking a label should activate the associated checkbox.

Labels should always be to the right of the associated checkbox.

Need guidance? Check with #accessibility in Slack.

Changelog

Date	Version	Notes
Jan 29, 2024	1.0.0	Initial draft of checkbox guidance

Status checklist

All States

Includes all applicable states (hover, focus, disabled, etc...)

All Themes

Works properly across all themes (theme name, theme name, etc...)

All Modes

Works properly across all modes (light, dark, high contrast)

All Desktop Environments

Works properly across all environments (Windows, MacOS, Linux)

All Mobile Environments

Works properly across all environments (iOS, Android)

Overall Accessibility

Has been tested and reviewed by A11y Team.

Color / Accessibility

All color has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Text / Accessibility

All text has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Contrast / Accessibility

All contrast has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Interaction / Accessibility

All interactions have been tested against and passed all the latest WCAG 2.1 A & AA standards.

Content Design Review

Has been tested and reviewed by Content Design Team.

Writing Guidelines

Follows guidance for writing and language use.

Localization

Works properly across locales, and includes guidance for RTL languages.

Defined Behavior

Guidance for behavior when interacted with.

Defined Interactions

Guidance for interaction capabilities, ie. keyboard interactions.

Usage Guidelines

Includes guidance for usage, dos and don'ts, best practices.

Tokens

All attributes are available as tokens.

Figma Library

Has a reusable Figma component.

Storybook

Is documented in Storybook.

Code

Has a code counterpart.