Last reviewed: 4 June 2021

Elements

Select dropdowns

Select dropdowns let people choose an option from a list.

Guidelines

Research shows that select dropdowns can be difficult to use. Watch Alice Bartlett's video about the difficulties of select dropdowns.

Whenever possible, ask questions with fewer options and use radio buttons.

Go to the guidelines for radio buttons.

Sometimes due to technical constraints, you may need to use a select dropdown.

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

Labels

Select dropdowns 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.

Error messages

Give error messages after the user submits the form.

Error messages should appear above the relevant select dropdown. 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 select dropdowns, 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

Select dropdown.

This is an example hint

Select dropdown with hint text.

Select a sort by option

Select dropdown with error message.

This is an example hint

Select a sort by option

Select dropdown 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.