Checkbox

Used to choose multiple options from a short list of choices.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To enable choosing several options from a list of no more than 7 options.

When not to use

  • When only single choice is expected (use Radio Group instead).
  • To convey a on/off or true/false choice (use Switch instead).

Best Practices

Do

Do use a Checkbox in the context of forms, when the selection is applied after submitting the form.

Caution

Be careful with having too many choices available. If there are more than 7 options, use a Select component.

Don't

Don’t use Checkboxes when only one option can be selected. Use Radio Group component instead.

Don't

Don’t use a Checkbox to change state between on and off. Use the Switch component instead.