Cookies on MoJ Design System

We’d like to use analytics cookies so we can understand how you use the service and make improvements.

Skip to main content

Patterns Add to a list

Important

Other departments have a similar patterns

Add to a list in HMRC Design Patterns and add multiple things in the Home Office Design System have a similar function and visual design to this pattern.

This pattern is in the GOV.UK Design System 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 add another.

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 question page to ask users for information you need within your service. This is the information that users may need to add many times.

Use components that best suit the information you're asking for, such as text inputs or radios.

View a summary of what they have 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 summary list to let users view a summary of what they have 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 these links to the summary list:

  • 'Change' link to change things on the list
  • 'Remove' link to remove things from the 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.