Add another thing

How it works

The basic user flow is:

1. Question page or pages for an item
2. Summary list page with options to add another item, change or remove existing items, or continue the journey
3. If a user chooses to add another item they return to the first question page for the new item

For complex items with many fields or with more than one question page, include a Check answers page after the last question and before the summary list page.

This loop can be repeated as many times as your service allows.

If there is a maximum number of items, make this clear to the user. For example, you might include text to show how many more items can be added and display an error message if they try to add too many items.

Summary list page

After adding each item, the user is shown a summary list of what they have added so far and can:

• change or remove previous items
• add another item of the same type
• continue to the next step in the service

Consider which information from each item will appear on the summary list page. It may be useful to show more than one field for each item, for example name and date of birth or vehicle registration and model.

This uses the GOV.UK Summary list with a 'Remove' link added for each item alongside the 'Change' link (see how the HMRC Add to a list pattern does this).

If at least one item is required, consider how the summary list will behave when a user wants to remove the only item. You might decide that this item can only be changed, not removed.

The 'Add another' button is a standard GOV.UK secondary button which returns the user to the first question page for a new item.

If there is a Check answers page at the end of the overall online journey, think about how items added to the list will be represented there and where the 'Change' links from that page will go.

Changing and removing items from the summary list page

On the summary list page each item has a 'Change' link and a 'Remove' link.

The 'Change' link works differently for single page items and multi-page items.

If each item only has one question page, selecting 'Change' returns the user to that item's question page with the previous answers prepopulated.

If each item has several question pages and a Check answers page, selecting 'Change' returns the user to the item's Check answers page. From there they can change individual answers.

Selecting 'Remove' on the summary list page sends the user to a question page asking if they are sure they want to remove that item. From here they return to the updated summary list page.

Content

You may need error or validation messages for:

• when too many items are added
• when the user tries to remove the only item

Keep the text of the secondary 'Add another' button short. This may mean using a short name for the item you are adding: for example, 'Add another condition' rather than 'Add another health condition to your application'.

Use the same word for an item on question pages, summary list heading and the 'Add another' button. For example:

• Add a vehicle
• You have added 4 vehicles
• Add another vehicle

When asking a user for confirmation before removing an item, it can be helpful to include the item name in the radio label, like this:

• Yes, remove [item name]
• No

Alternative approaches

One alternative (not recommended) is to clone fields on the same screen and then add all items at once with a single ‘Submit’ action. Research on this approach at Ministry of Justice found that it could cause performance and validation problems; it also makes it more difficult for users to fix validation errors as they go.

Get support

Need help implementing this in a prototype or production build? Get support from the Design System team.

Give feedback

We depend on insights from real projects to update and improve the design system. If you use something we made, tell us how it went.

---

Could we improve this page?

Send questions, comments or suggestions to the DWP Design System team.

Last updated: 1 March 2022