Components

Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

Usage

Checkboxes allows the user to enable or disable options in a form setting. Multiple checkboxes may be presented in group, where the user can enable none, one or several options. For a longer list of options consider using the Select component. Typically an associated action is required for settings changed to be confirmed.

For scenarios where only one option may be enabled at one time, use a radio group. For designs outside of a form setting, where the enabling or disabling is expected to be triggered immediately consider using a switch.

Text labels

Provide a label text to clearly indicate what option the associated checkbox enables or disables. Avoid too long label texts, the content should not exceed one line. Use the description field if extra clarification is required.

Provide a clear concise label for each checkbox

Don’t be unclear or unnecessarily wordy to describe what the setting means.

Formatting

Anatomy

The checkbox features a label, along with an optional description text.

A. Checkbox
B. Label
C. Description

Behavior

States

The checkbox allows for a set of states: checked, unchecked and indeterminate. Indeterminate indicates that a subgroup of checkboxes have a mix of checked and unchecked states.

1. Checked
2. Unchecked
3. Indeterminate

Modify

Alignment

The checkbox can be aligned to the left or the right within a design, according to needs.

Left- and right aligned checkboxes.

Description field

If further explanation is required in order to communicate what the associated option means, further clarification can be added in the description text.

A checkbox with label and description text.