Last reviewed: 23 August 2021

Patterns

Date input

The date input pattern is 3 input fields that allow people to enter a date.

Guidelines

Use the date input when you're asking people for a date.

You could use the date input to:

  • check identity
  • check eligibility
  • process a holiday request

Only ask for a date when a product or service requires it.

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

Go to our foundations.

Example

What is your date of birth?

For example 21 8 1990

Date input with legend, hint text and 3 input labels.

What is your date of birth?

For example 21 8 1990

Enter your date of birth

Date input with error message.

What is your date of birth?

For example 21 8 1990

Enter your year of birth

Date input with error message for specific field.

Legend

When using the date input, clearly ask the user what date is required. For example, ‘What is your date of birth’ or ‘Enter the first date of your holiday request’.

Label

Each field in a date input 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.

Make sure that any example dates you use in hint text are valid for the question being asked.

For example, a date of birth field might have the hint text ‘For example 21 8 1990'.

Placeholder text

Placeholder text is text inside an 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 input. This can cause stress and frustration.

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

If only one field has been entered incorrectly, only highlight the field that has an error. The error message must say which field has an error, for example ‘enter your year of birth’.

Go to our guidelines on form validation.

Focus ring

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

Changelog for this page

Date Notes
18 August 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.