Smaller checkboxes and radio buttons

[owenm6]

What

This is a proposed addition to the existing checkboxes and radios components.
The proposal is to add smaller versions of these form controls, and guidance on when and when not to use them.

Why

Smaller checkboxes and radios allow more information to be included on a screen. This can be useful in services designed for regular use, where users need to work efficiently, such as case working and administration systems.

They can also be used to create visual hierarchy in more information rich user interfaces such as these.

These components are already being used in government services. However, the implementation and design is currently inconsistent, and there are instances of these components being misused.
Adding these components to the design system would allow us to standardise them and give guidance on their appropriate use.

Examples

Examples of services using these components include:

• GOV.UK Pay
• Companies House
• Passport application checking
• General aviation reports

Common use cases for these components include:

Selectable table rows

Search filters

Anything else

Smaller radios and checkboxes will be harder for some people to use, because the hit area is smaller. They should be implemented in a way which minimises this issue.

These components should be carefully tested on smaller screen devices to check that they are still usable.

There’s a risk that smaller radios and checkboxes might be used as a way to fit more things on the screen, when another approach might be more appropriate. The guidance should be carefully written to mitigate against this.

Related links

• Smaller checkboxes in the Home Office Design System
• Smaller radio buttons in the Home Office Design System
• Previous proposal for this component

[frankieroberto]

@owenm6 is this the same as #121?

[owenm6]

@frankieroberto Same contribution. But we decided to create a fresh issue and archive the old one.

[alex-ju]

@owenm6 I've been using the code from your proposal to build a miller columns prototype.
Here's a screen capture of it:

I consider this being valuable to make the most of the space while ensuring the checkboxes are accessible especially when needed as part of another component (be that a table, a dropdown list or in our case a miller columns component).

[timpaul]

Working group review session

This proposal was reviewed by the Design System working group on 25 Oct 2018.

The group agreed that the proposal can be taken forward as a contribution to the GOV.UK Design System because:

• there was evidence that in specific cases they are useful, for example search filters and selectable table rows
• they are already appearing in services, so there’s a need to make them more consistent and provide guidance on their appropriate use

Some members were unsure whether the proposal met the ‘unique’ criteria because it’s a variation on an existing component. After a discussion the group agreed that the criteria should be iterated to clarify that variations that meet specific common use cases are allowed.

The group also made the following comments and recommendations for future work.

Design

• The component must be usable on devices with small touch screens - for example by making them revert to the larger size
• The component must meet level AA of the WCAG 2.1 guidelines

Research

• Some members wondered whether the component was necessary. It would help if there was more evidence to show that in specific use cases this component is an improvement on the larger version
• More evidence is needed to establish whether or not smaller radios are needed. They should not be developed unless this is found

Guidance

• The guidance should clarify the specific use cases where this component should and should not be used

[NickColley]

You can see these used in the GOV.UK Publishing 'options select' component: https://finder-frontend.herokuapp.com/component-guide/option-select

This is used in the https://github.com/alphagov/finder-frontend application.

An example of it used in a page: https://www.gov.uk/employment-tribunal-decisions

Update:

They have now updated to use smaller checkboxes...

[NickColley]

Another example that is similar to @alex-ju in that it uses a full clickable row to increase the click area:

https://home-office-digital-patterns.herokuapp.com/components/table-multiselect

[edwardhorsford]

I'd love to see these in use - we have a column of filters in our list of things, and smaller checkboxes would give us much needed screen real-estate.

[amyhupe]

Working group review session

This proposal was reviewed by the Design System working group on 28 February 2019.

The working group is a multidisciplinary panel of 11 representatives from HMCTS, GDS, HMRC, DWP, Environment Agency and Home Office.

The group agreed that small radios and checkboxes can be published in the GOV.UK Design System.

The working group also made the following recommendations.

Guidance

• Clarify guidance on when and when not to use small form controls, including adding the example of services designed for repeat use such as internal services and caseworking systems.

Examples

• Consider including visual examples of the small form controls being used in context.
• Consider providing other examples, showing use cases aside from reduced visual prominence. For example, when the control supports a primary option.