Checkbox

Checkboxes allow the user to select one or more options from a list of options.

OverviewPropertiesUsage

Alignment of multiple checkboxes

Vertical

• Use vertical alignment in most instances. It's suitable for responsive layouts, a relatively large number of options, or when vertical alignment is consistent in its context, for example, in a form.

Horizontal

• If you need a horizontal layout, avoid having options wrapping into a new line.

Checkbox vs. Switch

Checkbox

A Checkbox can have three states: unchecked, checked, and indeterminate.

• Use a Checkbox if users can select multiple related items from a list.
• Use a single checkbox when it doesn't trigger an immediate action, for example, when users need to confirm a selection by a further step, like a submit button in a form.
• Use the indeterminate state to convey that some children of a hierarchically higher checkbox are checked. For example, a Select all checkbox in a table header.

Switch

A Switch has two different states: on and off.

• Use a Switch to toggle an option on or off.
• Use a Switch when an immediate action gets triggered, like turning a setting's option on or off.
• Use a Switch when users toggle independent options on or off.