Last reviewed: 22 February 2022

Elements

Text inputs

Text inputs are fields that allow people to enter information.

Guidelines

Use a text input that is appropriate for the amount of information someone needs to enter. Do not make it too wide or too narrow. Too wide and it might intimidate or confuse, too narrow and it might frustrate.

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

Go to our foundations.

Label

Text inputs 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, a password field might have the hint text ‘Use at least 8 characters with a mixture of uppercase, lowercase, numbers, and special characters'.

Placeholder text

Placeholder text is text inside a text input that disappears when someone selects that input.

Do not use placeholder text. It can be hard for people to remember what it said.

Error messages

Give error messages after the user submits the form. Do not give them as someone is entering information into each text input. This can cause stress and frustration.

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

Go to the guidelines on form validation.

Focus ring

The focus ring appears as a purple outline around any object, including text inputs, 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

Text input.

As it appears on your passport

Text input with hint text.

Enter your full name

Text input with error message.

As it appears on your passport

Enter your full name

Text input 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.