Also known as:
Choice listRadio buttonOption buttonChoiceSelection

Checkbox Group

A checkbox group contains checkbox fields that let people select zero or more options from a set.

Need to know

  • Prefer vertical (stacked) checkboxes to easily scan and compare options.
  • When choices are mutually exclusive, use a radio instead.
  • For settings that are immediately applied, consider using a toggle switch instead.

To keep in mind

  • Show options in a sensible order, such as alphabetical, numeric.
  • Avoid long lists. Chunk long lists and group related options together.
  • The setting only applies when the user takes an action, such as clicking a save button. The rare exception is for filtering checkboxes, which apply instantly.
  • Use specific, clear, concrete labels.
  • Prefer vertical (stacked) checkbox fields to easily scan and compare options.
  • Offer a default option.
  • Avoid nesting.

When to use

  • Single choice options
  • Shown side-by-side or stacked
  • Where there is space to show them all at once

When not to use

  • Don’t use when there is more than 20 options.
  • When choices are mutually exclusive, use a radio instead.
  • For settings that are immediately applied, consider using a toggle switch instead.

See also

External Links

Here are some examples of other existing design systems: