Checkbox

Anatomy

1. Container: Wraps the input, label, and assistive text.
2. Checkbox: Visually represents the current state as either a checkmark or horizontal dash.
3. Label (optional): Describes what the Checkbox controls or represents. Can accept rich content.
4. Assistive text (optional): Displays description or error text to aid the user.

Guidelines

Checkbox vs Radio and Toggle

The Checkbox, Radio, and Toggle components are all form controls that allow a user to select options. However, it's important to understand the difference as they are not interchangeable:

• Checkboxes allow users to select zero or more options independently and allow deselection.
• Radios are limited to only one choice in a group of options that cannot be deselected.
• Toggles function similarly to real-world on/off switches. Form submission is not required; the setting takes effect immediately.

Standalone Checkboxes vs groups

Standalone Checkboxes are suitable for choices such as confirming an action, agreeing to terms, or enabling a single feature. Multiple options should be presented within a CheckboxGroup to take advantage of parent Checkbox controls and a shared label.

Best practices

Select all

When using a select all parent Checkbox, use Indeterminate to make it clear when not all options are selected.

Behaviors

States

Indeterminate

Indeterminate is a state represented by a horizontal dash instead of a checkmark and communicates partial Checkbox group selection. Within a group of Checkboxes, a parent Checkbox can control the state of its children. When only some children are selected, the parent checkbox adopts the indeterminate role.

The indeterminate state is unrelated to the checked state; a Checkbox may still be either checked or unchecked while indeterminate. This state is purely for visual communication.

Truncation

Truncation can be enabled for longer labels that would otherwise extend past the parent container. Truncation prevents text wrapping and will display an ellipsis to cut the label short when applicable.

Content

Assistive text

Assistive text displays below the Checkbox and gives the user information about the form field they're interacting with. Assistive text comes in different forms including descriptions and error text.

Description

Descriptions provide extra context to the Checkbox option when the label itself will not suffice. Short phrases are preferred and end punctuation is unnecessary.

Error

Error messages communicate issues with the Checkbox that the user must resolve before submission. Frame validation errors as direct instructions, not accusations. Be sure to provide guidance on how to fix the error. Keep messages direct and concise. Never use "Please".

Labels

Write labels that clearly describe what option the Checkbox controls or represents. Labels should be self-explanatory without relying on surrounding context.

For option Checkboxes, phrase labels as the setting or feature being enabled:

For confirmation or agreement checkboxes, use short first-person statements: