Last reviewed: 27 July 2021

Elements

Checkboxes

Checkboxes allow people to select one or more options from a list, or toggle a single option on or off.

Guidelines

When using checkboxes, allow people to select anywhere in the checkbox or label to select that option.

Display the options from top to bottom, not left to right. This means that people:

  • can scan the options
  • who have zoomed in to the content will not have to scroll side to side to work out which checkbox they need to select

Consider letting people select a 'None of these' option. Some people might need this so that they can move on to the next question or task.

We've used our foundations to design checkboxes. For consistency across Co-op products and services, do not change the styling of the checkboxes.

Labels

Checkboxes must have a label that tells people what information to enter. Space form fields evenly and close to their associated label.

The label must be short and make it clear what information you’re asking for.

Hint text

You can add optional hint text to help people understand the information they need to enter.

For example, you might want to make it clear to a user that they can select multiple options. For this you could add hint text ‘Select all that apply’.

Error messages

Give error messages after the user submits the form.

Error messages should appear above the relevant checkboxes. This means they are read out by assistive technology in an order that makes sense.

Focus ring

The focus ring appears as a purple outline around any object, including checkboxes, when someone selects it.

Do not remove the focus ring. Some people who use assistive technology need it to navigate our products and services.

Examples

Do you own:

Checkboxes.

Do you own:

Select all that apply

Checkboxes with hint text.

Do you own:

Select options owned by you

Checkboxes with error message.

Do you own:

Select all that apply

Select options owned by you

Checkboxes with hint text and error message.

Single checkbox.

Descriptive hint text goes here

Single checkbox with hint text.

Please accept the terms and conditions

Single checkbox with error message.

Please accept the terms and conditions

Descriptive hint text goes here

Single checkbox with hint text and error message.

Changelog for this page

Date Notes
4 June 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.