We're creating a new front-end 'Experience Kit'

For more information go to the #Experience-library-support Slack channel (Co-op colleagues only).

Last reviewed: 20 January 2023

Forms

Form elements and patterns

A list of Co-op form elements and patterns, and when to use them.

Before designing a page, look at our form principles to check whether a form is needed.

Element or pattern	What it does	Examples
Buttons	Interactive elements that people can use to take an action.	Submit information pay Send a message Download an app
Checkboxes	Let people select one or more options from a list, or toggle a single option on or off.	Multiple choice question Opt in to marketing communications Accept terms and conditions
Date input	Three input fields that let people enter a date.	Date of birth Start date End date
Form validation	Tell people why data cannot be submitted and what they can do to fix it.	If someone has: left a required field empty entered information in the wrong format not entered the correct amount of characters
Radio buttons	Let people select a single option from a list of less than 5 options.	Select an answer Select delivery options Select payment method
Select dropdowns	Let people choose an option from a list.	Sort options using a particular filter, for example ‘price from low to high’ Select an address from a postcode look up
Textareas	Fields that let people enter long responses.	Feedback Additional information
Text inputs	Fields that let people enter information.	Enter your full name Enter your email Enter your password

Changelog for this page

Date	Notes
18 January 2022	First version of page published
20 January 2023	Minor content changes