Add checkbox “select all” behaviour

[frankieroberto]

This updates the Checkbox component with a new option for “select all” checkboxes, using inclusive: true alongside the existing “none of the above” option which deselects all the others when checked.

[frankieroberto]

I've found myself using this in a prototype this week, for a checkbox listing pharmacies (where there can be a lot of them):

We’re aiming to user test this in the coming weeks.

[frankieroberto]

@colinrotherham I’ve updated this (with some help from AI) so I think it’s a reviewable state now.

I made one behavioural change which is that the “select all” checkbox becomes automatically checked if you individually check all the other checkboxes.

[frankieroberto]

One difference with the GOVUK implementation of this (which I originally wrote) is that that uses behaviour: "exclusive" whereas the NHS one uses exclusive: true.

The advantage of the GOVUK one is that you can’t specify both inclusive and exclusive on same input! (Not that they support inclusive behaviour yet)

We could either choose to align with the GOVUK version and switch to a behaviour param (which could be backwards-compatible), or keep with exclusive: true and inclusive: true but make a decision about which one takes priority if both are specified?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
96.9% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[frankieroberto]

@anandamaryon1 @colinrotherham @sarawilcox any chance we could review this for the next release? I think we have enough evidence that it would be useful?! (It's been designed into at least 2 vaccination services).

[anandamaryon1]

Sorry for not replying on this one. It makes total sense. Did you get to run your user testing with it?

I think we'd want to add guidance and an example in the design system too. Any insight as to why gov haven't added it?

[colinrotherham]

Related issues etc

• Checkboxes alphagov/govuk-design-system-backlog#37 (comment)
• 'Select / Unselect all' functionality? alphagov/govuk-design-system-backlog#292
• Add 'select all' style functionality to checkboxes alphagov/govuk-frontend#4653

[frankieroberto]

I've asked in the cross-gov Slack about it too.

[frankieroberto]

We tested the interface in #1707 (comment) in our last round of user research, with staff who use Record a vaccination across multiple pharmacies. We didn’t find any issues with the interaction.

In our current prototype I’m always including the select-all option so long as there’s 2+ options (if there’s only a single option they skip the screen entirely).

It might be that it only makes sense to include the select-all option if there are 5+ or some other number of options though.

[colinrotherham]

I'd like us to support item.behaviour to set data-behaviour="{{ item.behaviour }}" like GOV.UK Frontend

We'd want backwards compatibility with our NHS specific item.exclusive option in v10.x too

But what about multiple inclusive groups—would we support these too?

Multiple named groups

Unlike GOV.UK Frontend we also support multiple named groups via item.exclusiveGroup

E.g. Try the 3 named exclusive groups:
https://nhsuk.github.io/nhsuk-frontend/examples/conditional-reveals/

• None of the primary colours
• None of the secondary colours
• None of the above

Should we rename to item.exclusiveGroup item.behaviourGroup to pair with item.behaviour?

[frankieroberto]

@colinrotherham maybe initially we add this in a backwards-compatible way, by adding inclusive: true and inclusiveGroup (see the PR as it is now)?

Then could consider switching to behaviour: "inclusive" and behaviour: "exclusive" in the next breaking change release, along with either behaviourGroup or removing the group functionality (depending on whether we still think there’s a good use case for it)?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
88.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[colinrotherham]

@frankieroberto I've had a go at deduplicating the spike code I added back in 70ee9ba

Then could consider switching to behaviour: "inclusive" and behaviour: "exclusive" in the next breaking change release, along with either behaviourGroup or removing the group functionality (depending on whether we still think there’s a good use case for it)?

Rather than add new options, only to remove them later, I've pushed up changes to:

• Add Nunjucks options behaviour and behaviourGroup
• Deprecate Nunjucks options exclusive: true and exclusiveGroup

This gives us both behaviour: "inclusive" and behaviour: "exclusive" without breaking changes

[colinrotherham]

@frankieroberto Also to discuss, whether we should hide "Select all" (or even "None of the above") without JS?

See commits 895e722 and 77d95e4 – thoughts?

[sarawilcox]

Hi @frankieroberto, do we need something adding to the guidance in the design system about this?

[frankieroberto]

@colinrotherham I think it makes sense to not show the 'select all' checkbox where javascript is unavailable, and treat it as progressive enhancement? Otherwise, we'd have to infer that if someone ticked 'select all' but none (or only some) of the other checkboxes, which feels slightly risky?

This is different from the 'none' checkbox, as that still has a benefit with no javascript - and we have some guidance suggesting showing an error if they selected both another checkbox and 'none':

If JavaScript is unavailable, and a user selects both the "none" checkbox and another checkbox, display an error message.