Checkbox

Checkboxes allow users to enter data by selecting one or more option.

Usage guidelines

When to use

Checkboxes are most commonly used in forms, in filter menus, or before a submission (e.g. to agree to terms and conditions). In particular:

Use checkbox when more than a single option in a group of items can be selected (or none).
A checkbox can also be used as a standalone option (e.g. to agree to terms and condition before a submission).

When not to use

Do not use if only one option in a group of items can be selected. Use Radio select instead.
Do not use if the selection has to be made between two distinct and opposite states, such as "On" and "Off". Use Switch instead.

Writing guidelines

Labels:
- Checkboxes always include a label. Although the length of the label can vary according to the context, always keep it concise and direct.
- Frame labels positively, e.g. “I want to receive updates” instead of “I don't want to receive updates” (if applies).
Capitalization and case: Write labels in sentence case and without punctuation.
Text overflow: In case of overflow, text wraps to another line.

Specifications

Anatomy

Checkbox input: Indicates wether an option is selected or not and its state. Checkbox is generally unselected by default.
Checkbox label: Describes the option to select or unselect.

Size

Checkboxes come in one size.

Styling

Checkbox is available for both dark and light theme.

Two styling variants are available: “Shape” and “Outlined”. Take into account factors such as contrast with the background and balance with other elements of the UI when choosing the variant to use.

Styling for this component also depends on whether items are selected, unselected or indeterminate. This last state variants is to be used when a checkbox contains nested checkboxes, some of which are selected, and some unselected. (Read Checkbox Group for detailed information)

Behavior

Positioning

Checkboxes are most often found in forms but can also be part of filter menus or tables, or used as standalone elements.

Alignment

Checkboxes ar always aligned to the left of te label.

Interaction

Apart from being selected, unselected or indeterminate, checkboxes come in five possible states: inactive hover, focused, disabled and error.

To select o deselect a option, simply press on the input or label.

Accessibility guidelines

Make sure there is enough contrast between selection controls color and the background.

Checkbox ​

Usage guidelines ​

When to use ​

When not to use ​

Writing guidelines ​

Specifications ​

Anatomy ​

Size ​

Styling ​

Behavior ​

Positioning ​

Alignment ​

Interaction ​

Accessibility guidelines ​

Related components ​