Add 'select all' style functionality to checkboxes

[querkmachine]

Related component

• Checkboxes

Context

Checkboxes have the ability to have a 'None of the above' style option (in code, an exclusive option) that, when checked, automatically unchecks all other checkboxes in the same group.

Having a checkbox that can operate inversely, a 'select all' option that automatically checks all of the options, could be a useful complement to this.

This could be used in cases where all or a majority of options are likely to be checked, without explicitly assuming that will be the case.

Potential questions this functionality might fit:

• Selecting dates/times when a user is available for an appointment
• Selecting names for invites, who can be notified of updates, emergency contacts, etc.
• Selecting contact methods
• Bulk selecting and editing in caseworking systems

This was raised on crossgov Slack and in the backlog discussion as a piece of functionality teams often want or need.

Alternatives

Users can manually select all of the options relevant to them.

Some teams have resorted to recreating this functionality in their own code, in absence of it being part of the checkboxes component.

Additional thoughts

Placement in the list of options

Having the ability to 'select all' at the very top of a checkbox list is arguably the most useful placement: it means users can see it up-front and avoids the wastage of checking a bunch of boxes manually before realising there is an option to check them all at the bottom of the form. It also allows for the use case of checking all boxes and unchecking only those that aren't desired.

In a linear reading order, like a screen reader, having the option to 'select all' is less useful as the user will not yet have received context of what the options will be, whereas a sighted user could skip ahead to get this context.

Deselect all

If checking the 'select all' option checks all of the unchecked checkboxes, should unchecking it uncheck all of the checked checkboxes too? (Try saying that quickly.)

This function is probably most useful in the caseworking example. I'm not sure if it's likely to be needed as much in a linear form process.