Checkbox

v2.0

Checkboxes allow the user to select multiple options from a list or a single yes/no option.

Stylized artwork of a checkbox list.

Anatomy

Properties

Behavior

Platforms

Web

Checkboxes are either form-based or menu-based. Form-based checkboxes are the traditional checkboxes used in HTML form elements. Menu-based checkboxes appear in dropdown menus and in panel dialogs.

A checkbox list with the title ‘Choose language’ in a bottom sheet on mobile web.
A selected ‘Free shipping’ checkbox under a ‘Shipping Options’ dropdown, and a selected ‘Free Returns’ and an unselected ‘Returns Accepted’ checkboxes under a ‘Show only’ dropdown on a side menu on Desktop.

Best practices

Specs

A small and large checkbox is displayed with detailed specs showing dimension indicators in pink. The small checkbox size is 18px, and the space between the small checkbox and the label is 12px. The large checkbox size is 24px, and the space between the large checkbox and label is 16px.