We’ve recently updated the GOV.UK Design System to add a new feature to the existing checkboxes component. This was the result of research and collaboration from across government, and we think it will benefit users in lots of services. If you use checkboxes in your service, here’s some things you should know about adding a ‘none’ option to your questions.
Why we’ve added a ‘none’ option to checkboxes
We’ve called this feature the ‘none’ checkbox, although you should label this checkbox specifically to suit your service.
Unlike radio buttons which only allow a single answer, checkboxes allow users to select as many options as needed.
Often, it’s fine to answer a question by leaving all of the checkboxes unchecked. However, several teams across government have found a few issues with this.
users can be unsure whether they’re allowed to do this – this can be explained using hint text, but not all users will see this
users sometimes want to give a clear answer, especially if they're concerned about completing an application accurately and truthfully
allowing all checkboxes to be unticked means that users might accidentally skip the question, perhaps assuming that they’ll return to it later
To solve these issues, several teams started adding checkboxes for users to answer with ‘none’ (the exact wording was different across services) and requiring at least one checkbox to be ticked.
We’ve added further support for this by displaying the ‘none’ checkbox after a small ‘or’ divider. Radio buttons already follow this pattern to help to make it clear that the ‘none’ option is different from the others.
Finally, we also added some JavaScript code to prevent users from ticking the ‘none’ checkbox as well as one of the others. This is to avoid users giving contradictory answers.
When to use this new feature
Use this new feature wherever services already have a ‘none’ checkbox. It can also replace any guidance that tells users that they can leave all boxes empty.
How to create the ‘none’ answer
Avoid giving directions like ‘none of the above’, as this implies a visual reference that may not be relevant for users of screen-reading software. Instead, use ‘none of these’ or similar.
Mention part of the question, instead of a generic answer. For example “I’ll be doing none of these activities” instead of just “none of these.”
When writing the question, make sure that it can be answered with all your possible answers, including the ‘none’ option.
If the user does not need to see the list to know that none of the options apply, consider asking a filter question first. This helps the user avoid having to scan a page looking for a ‘none’ option, particularly if it’s a long list of checkboxes.
Based on the user’s answer to the filter question, you can either show the list of checkboxes on the next page, requiring at least one to be ticked, or skip the checkboxes entirely.
Let us know if you find this new feature helpful, and especially if you discover any issues with it via user research. Get in touch with the team, or comment below, if you have any questions or feedback.
Add user research findings by messaging the Design System team on x-gov slack or adding a comment to the GOV.UK design system backlog in Github, where there’s an open issue on checkboxes.
Comment by Gavin Laking posted on on 16 November 2021
Perhaps it have been easier to use radio buttons styled as checkboxes to remove a bunch of JavaScript which may or may not be broken, or may break in the future, by a less familiar maintainer? Browsers also allow you to ‘tab’ through radio buttons to make filling the form easier, which may be omitted from the JavaScript solution if it has been written to only trigger on mouse events. Radio buttons also enforce a single selection from multiple options whereas checkboxes were designed for multiple selections in multiple options.
Replies to Gavin Laking>
Comment by Frankie Roberto posted on on 18 November 2021
Hi Gavin. I would definitely recommend radio buttons (styled as circles) if users can only pick one option. This could include a "none" option.
However, sometimes users can pick more than one option OR no options at all. In this case, an explicit "none" checkbox can be helpful (rather than allowing all checkboxes to be unchecked).
The javascript only checks that the "none" checkbox isn’t checked as well as one of the others, which wouldn’t make sense. If no javascript is available (or it gets broken), then the checkboxes still work, and the error of checking both "none" and another checkbox should get caught by a server-side validation.
The javascript we’ve added works with both mouse clicks and when using the keyboard to check or uncheck the boxes.
Comment by alex posted on on 16 November 2021
Important! If you add a filter question make sure it is actually a filter and the user does not see the unnecessary question.
In so many forms I have seen the second question being asked even though it was preceded by a filter question. Filter questions only work digitally (for properly designed forms) or for in-person questions. Paper forms and badly designed digital forms are not compatible with filter questions.
Hi Alex. Good point - designing paper forms with conditional questions is a whole other challenge!
Comment by Tam posted on on 16 November 2021
Small spelling error in example - carcuses should be carcasses.
Replies to Tam>
Thank you for spotting that, Tam! We’ve fixed that in the graphic now.
Comment by Jonathan Harker posted on on 16 November 2021
Surely, that question should be: "Do you transport any of these forms of waste?" [ ] Waste from animal carcasses [ ] Waste from mines [ ] Agricultural waste [ ---- ] [ ] None of these
Replies to Jonathan Harker>
Filter questions should be considered as an alternative in a service before using the ‘none’ component; therefore, the example does not include that option.
Comment by Yorwba posted on on 17 November 2021
In the example screenshot for using a filter question, the answer "Waste from animal carcuses" should have "carcasses" instead.
Replies to Yorwba>
Well spotted! Thanks for highlighting that, Yorwba! We’ve fixed that now.