Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several.

A checkbox can also be used to sign off or agree to something using a single checkbox.

If you want the user to only select one option, use a radio button list instead.

Do:

• Always include an associated label with a matching ID next to each checkbox

• Position checkboxes to the left of their labels

• Left-align checkboxes

• Stack checkbox vertically

  • Exception is Yes/No can be listed horizontally

• Enabled/selected checkboxes use white checkmark and coloured background that meets WCAG contrast requirements

• Have default, selected, hover, and focused states

• Keyboard navigation: checkboxes can be navigate using the tab key and selected using the spacebar

• Mouse users may select checkboxes by clicking either on the box itself or the label

• Checkbox labels are written in sentence case

Do not:

• Pre-select checkboxes

Order of checkbox lists

Put checkbox lists in alphabetical order, with these exceptions:

• list yes before no

• if there is an option that you know about 90% or more of your users will choose, put that option first

  • be careful not to bias the user’s choice or imply the importance of one option over another

• put any “None of the above” or “I do not know” options last

Technical specifications

• Checkbox size: 32 x 32 px

• Space between label and input: 16px

• Space between previous input and next label: 40px

  • Note that you can adjust the spacing between elements but make sure the elements align to an 8-pixel grid

Example

Open

References and resources

1. Ontario Design System - Checkbox