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.
Example
Date input with legend, hint text and 3 input labels.
Date input with error message.
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 |