Components

Components are reusable parts of our user interface that have been made to support a variety of templates

Action

Buttons

How we use buttons and where to use styling to help the user carry out an action

Input

Text input

Use the text input component when you need to let users enter text

File upload

You should only ask users to upload something if it’s critical to the delivery of the service

Personal details

You should follow this pattern whenever you need to ask for a user’s name and personal details

Date input

Use the date input component when a user needs to choose a specific date

Selection

Radios

Use the radios component when users can only select one option from a list

Checkboxes

Use the checkboxes component when you need to help users select multiple options

Select

The select component should only be used as a last resort

Communication

Questions and field names

Only add a question if you need to know the answer

Terms and privacy policies

Every form should have a declaration page before submit

Error messages

Error messages should be written for every required field

Hints and guidance

Use hint for help that’s relevant to the majority of users

Summary list

Use the summary list to summarise a user’s responses at the end of a form

Success and confirmation

Use the success block to let users know they’ve completed a transaction