Smaller checkboxes and radio buttons

[devansXD]

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.

Research

These components have been tested in the context of professional use; Users found the larger components far too dominant in the user interface, which hindered task completion (Some users thought they were a survey, rather than filters).

Examples

The smaller versions in our current prototype have tested well across GOV and with 10 NHS professional users.They are based on the Home Office versions:

https://home-office-digital-patterns.herokuapp.com/components/radios https://home-office-digital-patterns.herokuapp.com/components/checkboxes

Filters example on the e Referral service

Adding these components to the design system would allow us to standardise them and give guidance on their appropriate use.

Anything else

Also related to this GOV backlog issue https://github.com/alphagov/govuk-design-system-backlog/issues/162

[devansXD]

@davidhunter08 smaller radios have now been added to the GOV design system https://design-system.service.gov.uk/components/radios/

[davidhunter08]

Thanks @devansXD, we are aware of this. We've other work commitments for the next few weeks so if you need this component sooner, I would suggest adding it into your service and then contributing the code back to the NHS.UK frontend.

[devansXD]

@davidhunter08 cheers - its already in the pipeline for us now, and the devs are going to write the components for contribution back. I assume the naming convention needs to remain the same if that were the case? (ie not just BEM but nhsuk-xyz)

[davidhunter08]

That's great @devansXD.

Yes, the naming convention needs to remain the same. Eg: nhsuk-radios--small

Further information can be found in our coding standards documentation.

[chrimesdev]

Hey @devansXD we've had another team enquire about smaller checkboxes. Has there been any progression on getting this back into nhsuk-frontend?

[devansXD]

@AdamChrimes this is in progress I think. Let me check tomorrow when i'm back in.

[devansXD]

Context of use for these components: These components were tested within the context of clinical professionals who use desktop computers, with a minimal device / screen width of 1024px on a range of browsers: IE, Chrome and Firefox, on a Windows operating system. Minimum touch target guidelines have been adhered to (44px x 44px) for desktop usage only.

[davidhunter08]

https://small-checkboxes-radios-test.herokuapp.com/ User: small Pass: test

https://github.com/nhsuk/smaller-checkboxes-test

[devansXD]

This looks great Dave.

[chrimesdev]

The code for this is pretty much done, we might need to add some guidance to the SM about when/when not to use the smaller variant. But this could be added.

[henocookie]

Smaller radios and checkboxes were presented at the October 2021 Design System Working Group and didn't get a majority vote to publish.

There were concerns from DSWG members about smaller checkboxes and radios being used by default, even with guidance that is tested and iterated.

The usefulness of smaller radios and checkboxes was also questioned as the space used on a webpage doesn't change, rather the visual radio or checkbox elements are shrunk in the same space.

[sarawilcox]

See GOV.UK checkboxes page info on smaller checkboxes: https://design-system.service.gov.uk/components/checkboxes/#smaller-checkboxes