Skip to main content Skip to main content
Patterns

Add to a list

Status: To be reviewed

Created in July 2021.

How to use ‘to be reviewed’ patterns
Patterns with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently. Read about all the Design System statuses.

Important

Other departments have similar patterns

The HMRC ‘Add to a list’ pattern and the Home Office ‘Add multiple things’ pattern have a similar function and visual design.

This pattern is in the GOV.UK community backlog for review.

A three step process: Ask the user for information, view a summary of that information and ask if they want to add more of the same type of information, if they do it will take them back to the first step to ask the user for information again.

When to use

Use this pattern when users need to add similar information many times, and check and add more if needed.

When not to use

Do not use this pattern when users need to add different kinds of information that do not relate to each other.

If users only need to add information a couple of times, consider using the add another component.

How to use

Example of adding things to a list which includes adding the name and date of birth of a dependant and their relationship to the client making the application, with a button to save and continue to the next page.

Add things to the list

Example of adding things to a list which includes adding the name and date of birth of a dependant and their relationship to the client making the application, with a button to save and continue to the next page.

Use a GOV.UK ‘question page’ pattern to ask users for information you need within your service. This is the information that users may need to add many times.

View a summary of what they’ve added to the list

Example of a summary of information the was added to the list which includes the name of a dependent and the ability to change or remove them from the list. Has a question if they wanto to add more dependents, and a button to save and continue to the next page.

Use the GOV.UK summary list component to let users view a summary of what they’ve added to the list.

Use radios to ask users if they want to add more things to the list. Use their answer to take users to the original question page to add similar information, or move to the next question.

You may want to add ‘change’ and ‘remove’ links to the summary list.

If you use a ‘remove’ link, you should ask the user to confirm they want to remove something from the list.

Example of a warning screen asking if the user is sure they want to remove a dependent from the list with yes or no options, and a button to save and continue.

Research

This pattern:

  • has been usability tested
  • has had an external accessibility audit with Digital Accessibility Centre (DAC)
  • is working in a live service (Apply for legal aid)

Things we don’t know enough about

  • On the list page, should we have the page title large and the question small or the page title small and the question large.

Get help and contribute

Get help

You can contact the MOJ Design System team for help or support using this pattern.

Help improve this pattern

The MOJ Design System team would like to hear:

  • how you have used this pattern in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the add to a list discussion on GitHub.