A checkbox allows users to select multiple options from a set.

List with Accordion menu and checkboxes

Behavior

Checkbox selected

Clicking on a checkbox selects the corresponding item. A checkmark appears to confirm the selection.

Error message

A warning or error message under the selected item appears if an error occurs.

Warning message
Error message

Style

Color

Checkboxes are filled with a light grey color. They also have a darker grey outline to better differentiate them from the background.

When selected, checkboxes are filled with a black color and have a white checkmark.

Format

Checkboxes are shown as a small square with a corner radius of 25%.

Related pages

A radio button allows users to select one option from a set.
A select field allows users to select one option from a list of more than 10 items.