Refine By

Checkboxes

  • Contents:

Checkboxes:

  • Allow a user to make single or multiple selections.

Guidelines

 

  • Checkboxes should be rectangular unless the native OS guidelines specify otherwise, or in case of a special usage scenario.
  • The checked and unchecked states of a checkbox should be clearly distinct from one another.

Use checkboxes to make multiple selections from a related group of options, like a list of filters.

However, if you need to:

  • Activate or deactivate options independent of other options
  • Denote immediate results
  • Turn options on or off (not to choose between options)

Consider using switches instead.

Special use case

 

  • In special cases, like favoriting a hotel, checkboxes can be stylized to look like icons or even images.
  • Form interactions should never use stylized checkboxes.
  • Use stylized checkboxes for special interaction cases.
  • Do not use stylized checkboxes for controlling forms.

Style

 

Accessibility

 

For all checkboxes: 

  • Checkboxes must receive focus without the need for a mouse.
  • Users must be able to interact with the checkbox from the keyboard (using the spacebar or enter key).

For item selection checkboxes: 

  • Be sure users can select more than one item from a list of items.
  • Help users with screen readers understand when your items are grouped: provide a fieldset to group related checkboxes and a legend to describe them.
  • Give each checkbox a clear label. Be sure it’s announced by screen readers.
  • Each checkbox’s checked or unchecked state must be announced for screen reader users.

For action confirmation checkboxes: 

  • Give each checkbox a clear label. Be sure it’s announced by screen readers.
  • Each checkbox’s checked or unchecked state must be announced for screen reader users.

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Jul. 24 2019 2:10pm Updated checkbox and radio disabled treatment
May. 08 2017 4:14pm Initial content entry