Last reviewed: 20 January 2023


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

Get support

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.


Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.