Intro

A checkbox lets users make a yes or no choice or turn a setting on or off. The checked state means the option is on or selected.

Checkboxes can also be grouped. Within a group, users can check any combination of options.

Checkbox – unchecked and checked

When to Use

Use the checkbox if:

Only one option can be selected or deselected, for example to accept terms of use. Use it only if the meaning is obvious (single checkbox).
You have a group or a list of options that can be selected independently of each other (checkbox group).
Your use case requires all available options to be displayed right away without any user interaction (also in read-only cases).
The values of the option list are primary information and need to be displayed right away.
Changes to the settings need to be confirmed and reviewed by the user before they are submitted. This helps prevent users from changing settings accidentally.
You want to group multiple suboptions under a parent option, and require an intermediate selection state (indeterminate state). This state indicates that some (but not all) suboptions are selected.

Don't

Don’t use the checkbox if:

The user needs to choose multiple options from a large list. Use a multi-combo box instead.
The user can choose only one option from a list. For a small list, use a radio button group instead. For a large list, use the select control or a list with multi-selection functionality.
You want to offer two options for a “yes/no” or “on/off” type of decision. Consider using a switch control instead.
The user needs to perform instantaneous actions that don't need reviewing or confirming. Consider using the switch control instead.
There is not enough space available on the screen. Use the combo box control instead.

Use for a list of options that can be selected independently of each other.

Don't use when the user can choose only one option from a list.

Anatomy

Box: Represents a selectable control with 3 possible states: selected, unselected, or indeterminate.
Text: Describes the purpose of the checkbox. If the purpose of the checkbox is already described by another element, such as a label, the checkbox text is optional.

Checkbox anatomy

guideline

If there is only one checkbox, you can use a label or a checkbox text, depending on the form format.
If there is more than one checkbox, the label describes the whole group of checkboxes. In this case, use the text property of the checkbox to describe the individual checkboxes.

Behavior and Interaction

Checked/Unchecked

Clicking a checkbox toggles the state of the checkbox between checked and unchecked.

Checkbox click interaction

A checkbox doesn't apply a setting right away; the changes take effect after user confirmation via a triggering action button (such as Save).

Indeterminate State

The main purpose of this state is to represent the mixed selection states of dependent input fields. If some (but not all) of the dependent fields are selected, the checkbox shows a partially selected state. This is only a visual state and can’t be achieved by direct user interaction.

Checkbox selection states

Error Handling for a Checkbox Group

You can apply selection rules to a checkbox group. If an error occurs, the checkbox group is displayed in an error state. You can also display an error message below the checkbox group to explain the problem. For the error message, use the message strip.

Error handling for checkbox group

Responsiveness

Checkbox Sizes

A checkbox can appear in two different sizes. In cozy mode, it is bigger than it is in compact mode. This makes the checkbox easier to select on touch devices. For more information on cozy and compact modes, see the article on content density.

Compact and cozy mode

Active Area

In both sizes, the touch/click area around the checkbox is bigger than the checkbox itself, making the checkbox easier to select. Clicking inside this area toggles the checkbox.

Note: Because the touch/click area doesn't include the label on the left, clicking the label won't toggle the checkbox.

Checkbox touch/click area with label

Layout

Checkbox Control

The checkbox control consists of a box and a text that describes the purpose of the checkbox. If the checkbox is checked, an indicator is shown inside the box.

Focus is indicated by a solid line that surrounds both the checkbox and the text to the right of it.

If the checkbox appears alone inside a form, the text can be omitted if the label in front of the checkbox takes over its function.

Checkbox layout

If there are several options to choose from in a form, the label describes the entire checkbox group, and the texts describe the individual checkboxes. When selection rules need to be explained, add the explanation in parentheses ( ) as part of the label component.

Layout for a checkbox group

Text Formatting

Since checkbox texts are also a type of label, use title case to be consistent with other labels. If a label is too long, it wraps to fit within the visible area. There is no limit on the number of lines a text can wrap.

Exception: If one or several of the checkbox texts is too long, or is framed as a phrase, use sentence case and appropriate ending punctuation.

Short text in title case; Long text in sentence case; Text wrap

Labels and Text

For forms with labels above the fields, place the label above the checkbox group. For a single checkbox, use only a checkbox text.

Labels for a checkbox group / single checkbox – form labels above fields

For forms with labels to the left of the fields, place the label next to the group, aligned with the first checkbox field. For a single checkbox, use only a label, or only a checkbox text.

Labels for a checkbox group / single checkbox – form labels left of fields

hint

Don't use empty labels to arrange the checkboxes. Creating a label in front of each checkbox and leaving the text empty looks fine – nobody sees the label, and the checkboxes are aligned correctly underneath each other. However, the screen reader will notice these labels and read each of them as “label”. Instead, use the layout data property (layoutData) for the checkbox. In this property, force a line break (linebreak) and set the value of the indents in sizes L and M (indentL, indentM) according to the value of the label span in the simple form (labelSpanL, labelSpanM).

States

Interaction States

A checkbox can appear in different interaction states depending on how a user interacts with it.

A. Regular: Default appearance when the checkbox is enabled.

B. Hover: Highlights the checkbox when the cursor moves over it.

C. Disabled: Shows the checkbox is unavailable. Users can’t select or change it.

D. Read Only: Displays a fixed selection that can't be changed by the user.

E. Display Only: Shows a non-interactive checkbox for visual reference only.

Checkbox interaction states

Value States

In addition to interaction states, checkboxes can be styled to reflect intent or meaning, which are indicated using semantic colors.

A. Information: Provides context or neutral guidance.

B. Positive: Highlights a successful or desirable option.

C. Critical: Draws attention to a potentially risky or sensitive choice.

D. Negative: Signals an irreversible or destructive option, such as file or account deletion or service cancelation.

Checkbox value states

information

For details on the different states, see States.

For more information on semantic colors for value states, see Using Semantic and Industry-Specific Colors.

Localization

In left-to-right languages like English, the checkbox is typically aligned to the left of the label text. For right-to-left languages like Arabic or Hebrew, the checkbox should be aligned to the right of the label text to maintain consistency with the reading flow.