Last reviewed: 18 January 2022

Forms

Form elements and patterns

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

Before you design a form, go to our form principles

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

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.