- 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.
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.
See also
Related elements
Related components
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| Jul. 24 2019 2:10pm | Ella Ip | Updated checkbox and radio disabled treatment |
| May. 08 2017 4:14pm | Initial content entry |