Guidelines

Usage

A Checkbox should:

Have one (for stand-alone) or more (for Checkbox Group) options that are mutually inclusive.

List options in a rational order that makes logical sense.

Have comprehensive and distinct options.

Have one or more options checked at a time.

Have no options checkedby default.

List options vertically, making the options more distinguishable.

Always have a flat hierarchy, as nesting Checkboxes is not following common design standards and add unnecessary complexity.

Have its hit area span the width of an entire row when used in a Select or overlay context for optimal accessibility.

☝️ Watch out

help-text, validation-message, and multiline (connected to required in Figma) are properties that should be used only for a standalone Checkbox.

Checkbox vs. Radio

Follow common design standards when using Checkbox or Radio Group, as this will enhance a user's experience when selecting preferred options.

A Checkbox should:

Have a single option when used standalone. The user can turn it on or off.

When using multiple Checkboxes for one form input refer to Checkbox Group.

A Radio should:

Be used for two or more options that are mutually exclusive. The user must select exactly one option.

Standalone Checkbox

Use the standalone Checkbox to select or deselect a single option. Typically, it’s used at the end of a form, for example, to confirm that a user agrees to specific terms.

A standalone Checkbox should:

Have help-text provide additional information.

Have validation-message to inform if the user's input was invalid and to give instructions on the situation.

Use multiline to have the required state reflected correctly for a text that wraps across multiple lines.

States

A Checkbox's state changes when the user engages with it. When used inside a group, the state can be determined by a parent Checkbox.

A Checkbox should:

Use disabled when the Checkbox is temporarily inaccessible, but when it has the prospect to be enabled in a different setting.

Only automatically focus the Checkbox on page load when a user expects it. With autofocus assigned, a screen reader immediately directs users to the form control without warning them.

Always update its state independently from other Checkboxes, unless the Checkbox is inside a group of Checkboxes where its state can be set by a parent Checkbox.

When used in a nested group, a Checkbox should:

Use checked set to 'true' for the parent Checkbox when all others are checked.

Use checked set to 'false' for the parent Checkbox when all others are unchecked.

Use checked set to 'indeterminate' for the parent Checkbox when some, but not all, of the other Checkboxes, are checked.

Label

A Checkbox's label communicates the option that will be set when the user engages with it.

A label should:

Use affirmative language to indicate to a user what will happen when they switch on the Checkbox rather than informing them about what won't happen.

Use sentence-case for optimal readability.

Use clamp to force it into a single line when needed, while always making sure that the visible part of the label still conveys the meaning of the option.

Never include interactive elements like a link or button as they are considered inaccessible by assistive technologies. Instead, contextual information that can include links and buttons should be displayed next to a Checkbox.

Help text

A Checkbox’s help-text provides extra guidance or instructions to the user. It can also clarify how the information will be used.

A help-text should:

Be used when extra guidance or instructions are beneficial.

Be supplementary to the Radio Group's label, not repeating it.

Use sentence-case for optimal readability.

Only be used on a stand-alone Checkbox. Checkboxes are used in a Checkbox Group the group controls the help-text.

Prefix

A Checkbox can set a prefix when its meaning should be visually emphasized, e.g. through commonly used elements such as flags or thumbnails.

A prefix should:

Always be used in combination with a label.

Use a maximum size of 24 x 24 pixels.

Use only one single non-interactive element.

Be uniform in size and ratio.

Use the same color as the label when it is an Icon.

Never be embedded through an iframe.

Use the same kind of prefix as its parent Checkbox when used inside a group of Checkboxes, as a consistent usage of prefixes across a group of Checkboxes gains a persistent and equal representation of options.

🎨 How to implement a prefix in Figma

Find a tutorial on changing prefixes in Figma, including an explanation of prefix definition and the specific sizes used in our components here.

Form Validation

A Checkbox should:

Use required if checking the control is required to submit a form.

Be marked as "Required" when the majority of the fields in the same form are optional.

Be marked as "Optional" when the majority of the fields in the same form are required.

Update its validation state when the form is submitted. And after submitting as soon as the user interacts with the component.

Have a validation message that is supplementary to the Checkbox's label and help-text without repeating them.

Instruct how to avoid possible errors with a validation message.

Have the validation message be as short and clear as possible.

Accessibility

A Checkbox should:

Set a contrasting appearance based on the environment it's used in. Use light appearance in dark environments and vice versa.