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.

Also known as:
CheckboxTick boxCheck itemOption buttonChoiceSelection

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.

Visuals

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.

Copy guidelines

We use checkboxes across the platform to help users select specific settings, or to make declarations. To make checkbox fields as clear as possible, follow these rules:

Always use positive language

Checkbox fields should indicate to a user what will happen when they check the box. So, avoid negative language that makes the user check the box in order for something not to happen.

Do:
  • Do
    Only show completed tasks
  • Do
    Hide demographics
Don't:
  • Don't
    Don’t show incomplete tasks
  • Don't
    Don’t show demographics

Use first person in declarations

If the checkbox field includes a declarative sentence, use first person pronouns.

Do:
  • Do
    I agree to the terms and conditions
Don't:
  • Don't
    You agree to the terms and conditions

Write in sentence case with minimal punctuation

All checkbox field text should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

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: