Add 'None of these' feature to checkboxes

[joelanman]

What

Add guidance and possibly code to checkboxes to allow a 'None of these'

Why

We previously had this guidance in Dropbox Paper. The alternative is the user selects no checkboxes and clicks continue, which is an implicit answer. This is arguably less clear than an explicit answer, and there is a risk the user clicked continue accidentally.

[alexnewmannn]

We need to implement this pattern on 2 pages in our service and will need to research how people deal with (we are agent facing). Our current idea is None of these will disable all other checkboxes and deselecting it will enable the checkboxes retaining their previous values (so that if you click None by accident you don't need to reenter other options). It might be that this is strange behaviour so will be testing it against None of these just deselecting everything else hopefully! Will keep this issue updated when we come to research it (hopefully in the upcoming weeks)

[edwardhorsford]

My service has an example of this. Screenshot below.

If you check none, all other options are cleared. If you check one of the other options, none is cleared. This requires javascript so we'll also have to check this server side.

---

NB - more generically you might call this a 'mutually exclusive' option. Any checkbox that is set to mutually exclusive will automatically clear others when set (and vice versa)

[terrysimpson99]

The inverse of this is 'All' (see: https://www.euroncap.com/en/ratings-rewards/latest-safety-ratings/).

[peteryates]

I struggle to see what having a "None of the above" option achieves. 'None of the above' and leaving all the checkboxes blank mean the same thing, and that is what causes confusion.

Isn't having a one checkbox that doesn't act like any of the other checkboxes an antipattern? Perhaps that's too strong a word, but it's at least a case of material dishonesty.

[alexnewmannn]

@peteryates Yeh you're right, they do mean the same thing. The main difference, at least for us, is that one is explicit and one isn't. How can you tell the difference between accidentally submitting without checking an answer and actively not answering that question? You could obviously go down the route of "how do you know they selected any of them correctly?" But this feels like a good middle ground of removing possible user error.

[edwardhorsford]

@peteryates this allows the user to positively give an answer that's clearly for them. Without it, it may be unclear for them how to proceed.

I actually needed this today on a government form - none of the options seemed appropriate - but without an option like this, I may have picked one thinking that I needed to pick the most appropriate.

[fofr]

@edwardhorsford In your design, have you tried separating the last item from the others with "or" text, like the Radio example: https://design-system.service.gov.uk/components/radios/#radio-items-with-a-text-divider

I wonder if this text helps separate the different kind of option from the list, or if users would misinterpret checkboxes as behaving like radios because of it.

[spattisson]

There is also the option for the checkboxes to be preceded with a qualifying question. So before @edwardhorsford's example, something like "Do you know about some parts of the supply chain?" - that being a Yes or No question would allow the effective "none of the above" answer to be given.
Downside would be the addition of more questions to a journey if many instances of checkbox questions were necessary.

[joelanman]

I think what might help define when you use a guard question (Do you X?) or a 'None of the above' would be how common the situation would be for users. So if it's common to have None, use a guard question, but if it's rare, use a None of the above, instead of making all users answer a guard question.

[peteryates]

Using a guard question seems like the cleanest approach to me.

The idea of having one check box that acts differently to the others, more like a radio button, just doesn't sit right.

[LucaDelBuonoHMCTS]

I wrote a little ES6 script to deal with this:

(function() {
    'use strict';

    const $selectCheckboxes = document.querySelectorAll('[data-mutually-exclusive="js-select-choice"]');
    const $deselectCheckboxes = document.querySelectorAll('[data-mutually-exclusive="js-deselect-choice"]');

    for (const selectedElement of $selectCheckboxes) {
        selectedElement.addEventListener('click', () => {
            for (const elementToDeselect of $deselectCheckboxes) {
                elementToDeselect.checked = false;
            }
        }, false);
    }

    for (const selectedElement of $deselectCheckboxes) {
        selectedElement.addEventListener('click', () => {
            for (const elementToDeselect of $selectCheckboxes) {
                elementToDeselect.checked = false;
            }
        }, false);
    }
}).call(this);

[edwardhorsford]

Here's an example from one of the new Covid services (GDS made?):

[joelanman]

Yes this is from Offer Coronavirus support from your business - I think its a good example of where None is useful. It's not easy to ask a yes/no question here as the question would be 'Can you offer expertise' when we're interested in specific types.

[LucaDelBuonoHMCTS]

This is what I needed it for in the upcoming Equality questionnaire:

[edwardhorsford]

Sent via @wayneddgu - another example of a service with an or option in checkboxes.

[joelanman]

To expand more on when I think this pattern is necessary - its when there's no obvious guard question for the list. So 'Do you have a car?' easily guards 'What kind of car do you have?'. But there's no obvious guard question for 'These conditions' or 'These countries' as in the examples above.

[timpaul]

It would be great if the people on this thread could let us know what logic they applied for users who don't have JavaScript enabled.

[alexnewmannn]

@timpaul We've not yet got any client side javascript to deselect or disable other checkboxes when 'none' is selected. This may be because with our question there isn't really room for interpretation, but can't say for certain. When we validate server side we return an error that you can't select 'none' and something else. I've just had a look and we've seen that error 23 times in the past 6 and a bit months which is pretty low. We are adding a new page with this pattern again so will be keeping an eye on the errors for this page and push to add a js feature. It's worth noting that our events vs unique events (meaning one checkbox being clicked more than once) is for the most case almost identical, meaning very few people are changing their mind once selected. So from our perspective it seems like having no client side javascript is working fine and server side validation is sufficient for when js isn't available.

[joelanman]

I'd suggest an error message something like:

"You cannot select 'None of these' and other options"

[alexnewmannn]

@joelanman Yeh, we currently have Cannot select 'none' and a benefit when none and something else is selected and Select the benefits they were getting or waiting to hear about, or select 'none' when nothing is selected, which both seem to work fine when they do appear.

[vanitabarrett]

GOVUK (specifically @alex-ju ) have added this as a component in their own component library: alphagov/govuk_publishing_components#1478 . Can be previewed here: https://components.publishing.service.gov.uk/component-guide/checkboxes/checkbox_with_exclusive_item

[36degrees]

We'll need to think about conditional reveals when we do this – at the minute the logic for checkboxes assumes that we only need to sync the conditional reveal state for the checkbox that was clicked:

govuk-frontend/src/govuk/components/checkboxes/checkboxes.js

Lines 68 to 77 in 6e3a992

	Checkboxes.prototype.handleClick = function (event) {
	var $target = event.target
	// If a checkbox with aria-controls, handle click
	var isCheckbox = $target.getAttribute('type') === 'checkbox'
	var hasAriaControls = $target.getAttribute('aria-controls')
	if (isCheckbox && hasAriaControls) {
	this.syncWithInputState($target)
	}
	}

We'll also need to think about scope – do we scope to the immediate module, or make it act like a radio button and deselect any checkboxes with the same name in the same form?

[edwardhorsford]

We added something for this in my service.

More abstractly it creates 'mutually exclusive' groups - which get defined using data attributes on each checkbox. When a checkbox is checked, checkboxes in groups other than the current one get unchecked. The idea for this came from someone on the cross gov slack - but I don't remember who suggested it (they were doing similar).

This generically supports where you might have more than one group. eg:

[] a
[] b
[] c
or
[] d
[] e

[joelanman]

example from the census

Alt text

Do any of the following people also live at [address] on Sunday 21 March 2021?

Who to include
Do any of the following people also live at 47 East Road, London on Sunday 21 March 2021?
Select all that apply. You can select more than one for each person

Family members and partners
Include babies born on or before 21 March 2021, children, students and schoolchildren who live away from home during term time

Housemates, tenants or lodgers

People who usually live outside the UK who are staying in the UK for 3 months or more

People temporarily away
For example, working away, on holiday, in the armed forces, living in an establishment such as a care home for up to 6 months, abroad for up to a year

People staying temporarily who usually live in the UK but do not have another UK address
For example, UK residents between addresses or currently without a home
Or

Or, None of these apply, I am the only person who usually lives here