This is currently experimental because we need more research to validate it.
Also known as: add another, repeating form fields, add to a list, add multiple things
About this pattern
The add more fields pattern allows users to add single fields or a group of fields to complete an online form.
When to use this pattern
Use this pattern if users may need to give 2 or more pieces of information to complete an online form.
For example, if users need to list multiple names, addresses, items or upload multiple documents.
How to use this pattern
There are 2 versions of this pattern. You can give users the option to add either a:
- single field – for a single piece of information, such as a name
- group of fields – for multiple pieces of information, such as names and addresses
Allow users to check, change and delete information they’ve entered. Ask users to confirm a deletion before it’s deleted.
Follow the guidance for designing:
Add a single field
The user interaction to add a single field happens on one page.
The user selects the button to add another field and it appears below existing fields. Focus moves to the new field for users to input information.
The user can select ‘delete’ to delete a field and the information inside it.
There’s no deletion confirmation message. Use an aria live region in the code to announce the deletion to assistive technology users.
Add grouped fields
When users add grouped fields, they appear as summary cards in a list.
The summary card must have a unique identifier, such as a name, in the first row.
Changing grouped fields
The flow for changing grouped fields is:
- select ‘change’ on a summary card
- ‘save and continue’ after editing
- view the updated summary card in the summary list
Users can select ‘cancel’ to return to the original summary list.
Deleting grouped fields
Users delete grouped fields by selecting ‘delete’ on summary cards.
They’re asked to confirm the deletion. A confirmation message is displayed.
Users can add more fields before filling in previous fields.
Validate all fields before the user moves to the next section of the form to prevent errors and blank fields in the completed form.
This pattern is experimental and is being tested with users.
Data attributes are normally added automatically by the Design System’s ‘tracking’ script but this pattern requires additional implementation.
Add your own data attributes so that you can track interactions with the repeating field "add" and "remove" button elements in Google Analytics using Google Tag Manager.
Each button should have a data attribute that describes the action when the button is clicked. These interactions can be tracked along with the original page path, click text, and the data attribute showing the button action.
You must implement the add more fields component accessibly by:
- using Accessible Rich Internet Applications (ARIA) live regions
- moving keyboard focus to added fields
- moving keyboard focus when fields are deleted
- adding visually hidden text
- using accessible button text
- giving fields unique labels
ARIA live regions
Use ARIA live regions to confirm the addition or deletion of a single field.
Moving keyboard focus
When fields are deleted, move focus to the fieldset element around the grouped fields.
Visually hidden text
Add visually hidden text to ‘change’ and ‘delete’ links on summary cards to provide more context for the action.
For example, ‘change details for Barry Smith’ or ‘delete entry for Barry Smith’.
Accessible button text
Give the secondary button to add more fields descriptive text, for example:
- Add another address +
- Add an applicant +
- Add a tenant +
- Add a landlord +
- Add a document +
‘Add’ or ‘add another’ text is not descriptive enough for users.
Unique field labels
Give each field or group of fields a unique, descriptive label, such as:
- Subtenant 1: full name, subtenant 2: full name
- First applicant’s address, second applicant’s address
- Your delivery address, Your billing address
The label should show what information to input and who the information is about.
Feedback, help and support
There is a problem
Thanks for your feedback