Checkboxes

Overview

Use checkboxes to help users toggle an option or select options from a list.

How it works

Make it clear that users can select multiple options

Many users do not know the difference between radio buttons and checkboxes. Make it clear from the wording whether you're asking users to select a single or multiple options. For example, before a set of checkboxes you can add the text: "Select all that apply:"

Design for the common case

If one choice is much more common than the others, make this the first option. Break large sets of options into related groups, or break out very frequent or infrequent options:

Be careful with defaults

In general, avoid pre-selecting checkboxes or radios. It can confuse some users, and you'll never know if they explicitly chose that option or just didn't notice the question. An exception is when the user is returning to a form they have previously filled out, in which case it should be in the exact state it was when they last saw it.

Remember 'none of the above'

 If 'None of the above' is a valid option it must be explicitly represented - you can't un-check a set of radio buttons once one has been checked.

Align the options vertically

 In general, align the options vertically as it makes them easier to scan. An exception is where you have binary choices with short labels, like 'Yes / No'. The convention here is for horizontal alignment. 

Research

Carer’s Allowance

On the Carer's Allowance service we tested a range of different styles for the active and hover states of radio buttons, none of which caused users to click the label instead of the control. 
 
Only when we removed the controls did people start to click the labels:
Basically, we got rid of radios and checkboxes and replaced them with a kind of button. They tested very well - no-one hesitated to use them. I'm nervous about throwing away well-established elements, but I'm all for reducing the overall vocabulary of elements. What do others think?

 GOV.UK Verify

 

Student Loans Company


They work  really well for less technically literate users. We’re only showing them in our simplest application and it’ll be interesting to see how they  fare in more complex designs.

The following research relates to the old ‘grey’ style radios and checkboxes.

We tested radio buttons recently, for questions that have 2 options for answers. We have yet to adopt radios in the same way other exemplars have. This is what we found out when we tested them in our app:
 
  • Some participants encountered issues successfully selecting radio buttons. Their click wouldn’t register since the mouse was moving across the button during the action
  • Some answered questions too soon (after skim reading the question) and this caused them to:
  • Doubt their action and re-read questions in full 
  • Refer to help text rather than reading the question
  • Change their answer before continuing 
  • Ask moderator for help
 
The behaviour above has been observed before within our current app. However our test would indicate that using radio buttons exacerbated these issues. 
It’s worth pointing out that we changed the labelling of our buttons for the test (example below) and our test sample was small.
I would be interested to hear feedback from anyone who has noticed similar issues using radio buttons.