Also known as:
CheckboxTick boxCheck itemOption buttonChoiceSelection

Checkbox Field

A checkbox field includes a checkable input and its label. Checkbox fields are used in checkbox groups that let people select zero or more options from a set.

AnchorNeed to know

  • Lets a user choose to select or unselect a single item. When used in a Checkbox Group, a checkbox lets a user select zero or more items from a set, which are all visible at the same time.


To keep in mind

  • Ensure both label and input are clickable to select the checkbox field. That is, use label tags that wrap the input element or use a for attribute.

When to use and when not to use

When to use
  • For a single opt-in choice: show one checkbox field.
When not to use
  • For a few options: show two or more checkbox fields in a Checkbox Group.
  • 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: