Add more fields

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: 

• forms  
• buttons 
• summary cards 
• text input fields 

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: 

1. select ‘change’ on a summary card 
2. ‘save and continue’ after editing 
3. 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.

Validation

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. 

Use error message and error summary to communicate errors.  

Evidence

This pattern is experimental and is being tested with users.

Website analytics

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.

Accessibility

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.