Add another
Status: To be reviewedHow ‘to be reviewed’ components work
<div data-module="moj-add-another">
<h2 class="govuk-heading-l moj-add-another__heading" tabindex="-1">Add a person</h2>
<form method="post">
<fieldset class="govuk-fieldset moj-add-another__item">
<legend class="govuk-fieldset__legend moj-add-another__title govuk-fieldset__legend--m">
Person
</legend>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold" for="person[0][first_name]">
First name
</label>
<input class="govuk-input" id="person[0][first_name]" name="person[0][first_name]" type="text" data-name="person[%index%][first_name]" data-id="person[%index%][first_name]">
</div>
<div class="govuk-form-group">
<label class="govuk-label govuk-!-font-weight-bold" for="person[0][last_name]">
Last name
</label>
<input class="govuk-input" id="person[0][last_name]" name="person[0][last_name]" type="text" data-name="person[%index%][last_name]" data-id="person[%index%][last_name]">
</div>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" role="group" aria-describedby="date-of-birth-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Date of birth
</legend>
<div id="date-of-birth-hint" class="govuk-hint">
For example, 31 3 1980
</div>
<div class="govuk-date-input" id="date-of-birth">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="person[0][dob][day]">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="person[0][dob][day]" name="person[0][dob][day]" type="text" inputmode="numeric" data-name="person[%index%][dob][day]" data-id="person[%index%][dob][day]">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="person[0][dob][month]">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="person[0][dob][month]" name="person[0][dob][month]" type="text" inputmode="numeric" data-name="person[%index%][dob][month]" data-id="person[%index%][dob][month]">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="person[0][dob][year]">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="person[0][dob][year]" name="person[0][dob][year]" type="text" inputmode="numeric" data-name="person[%index%][dob][year]" data-id="person[%index%][dob][year]">
</div>
</div>
</div>
</fieldset>
</div>
</fieldset>
<div class="moj-button-action">
<button type="submit" class="govuk-button govuk-button--secondary moj-add-another__add-button govuk-!-margin-bottom-4" data-module="govuk-button">
Add another person
</button>
</div>
<div class="moj-button-action">
<button type="submit" class="govuk-button" data-module="govuk-button">
Submit
</button>
</div>
</form>
</div>{%- from "govuk/components/button/macro.njk" import govukButton -%}
{%- from "govuk/components/date-input/macro.njk" import govukDateInput -%}
{%- from "govuk/components/fieldset/macro.njk" import govukFieldset -%}
{%- from "govuk/components/input/macro.njk" import govukInput -%}
{%- from "govuk/components/textarea/macro.njk" import govukTextarea -%}
<div data-module="moj-add-another">
<h2 class="govuk-heading-l moj-add-another__heading" tabindex="-1">Add a person</h2>
<form method="post">
{% call govukFieldset({
classes: "moj-add-another__item",
legend: {
text: "Person",
classes: "moj-add-another__title govuk-fieldset__legend--m",
isPageHeading: false
}
}) %}
{{ govukInput({
id: "person[0][first_name]",
name: "person[0][first_name]",
label: {
html: "First name",
classes: "govuk-!-font-weight-bold"
},
attributes: {
"data-name": "person[%index%][first_name]",
"data-id": "person[%index%][first_name]"
}
}) }}
{{ govukInput({
id: "person[0][last_name]",
name: "person[0][last_name]",
label: {
html: "Last name",
classes: "govuk-!-font-weight-bold"
},
attributes: {
"data-name": "person[%index%][last_name]",
"data-id": "person[%index%][last_name]"
}
}) }}
{{ govukDateInput({
id: "date-of-birth",
fieldset: {
legend: {
text: "Date of birth",
classes: "govuk-fieldset__legend--s"
}
},
hint: {
text: "For example, 31 3 1980"
},
items: [
{
id: "person[0][dob][day]",
name: "person[0][dob][day]",
label: "Day",
classes: "govuk-input--width-2",
attributes: {
"data-name": "person[%index%][dob][day]",
"data-id": "person[%index%][dob][day]"
}
},
{
id: "person[0][dob][month]",
name: "person[0][dob][month]",
label: "Month",
classes: "govuk-input--width-2",
attributes: {
"data-name": "person[%index%][dob][month]",
"data-id": "person[%index%][dob][month]"
}
},
{
id: "person[0][dob][year]",
name: "person[0][dob][year]",
label: "Year",
classes: "govuk-input--width-2",
attributes: {
"data-name": "person[%index%][dob][year]",
"data-id": "person[%index%][dob][year]"
}
}
]
}) }}
{% endcall %}
<div class="moj-button-action">
{{ govukButton({
text: "Add another person",
classes: "govuk-button--secondary moj-add-another__add-button govuk-!-margin-bottom-4"
}) }}
</div>
<div class="moj-button-action">
{{ govukButton({
text: "Submit"
}) }}
</div>
</form>
</div>This component is in the ‘Assets’ tab in the MoJ Figma Kit.
If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.
When to use
Use this component when users need to add similar information a couple of times, such as several names for a single application.
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 need to add information many times, it may cause performance and validation issues as the page will get very long. In this case, you should use add to a list.
How to use
The add another component relies on JavaScript. When JavaScript is not available, your page should reload with the additional form elements if the “Add another” button is pressed.
By default the component adds a H2 to the page. Make sure a H1 is also present to provide a clear heading structure.
Research
This component has been tested in prototypes of several citizen and internal products, including:
- Claim fees for Crown court defence (Legal Aid Agency)
- Moving People Safely (His Majesty’s Prison and Probation Service)
Accessibility issues
Identifying form items
Some people who use assistive technology will find it hard to identify new form items (for example ‘first name’) that are created when they use the ‘add another’ button. This is because the form labels all have the same label text.
If you’re using this component in your service you need to add these issue details to your accessibility statement:
Assistive technology users will find it difficult to identify form items
When navigating this service with assistive technology, users will find it hard to identify new form items that are created when they use the ‘add another’ button. This fails WCAG success criteria 2.4.6 Headings and Labels (Level AA) and 3.3.2 Labels & Instructions (Level A). We’re aware of this issue and plan to review the component, and implement a fix by November 2025.
Adding another before resolving errors
When a user selects ‘add another’ before resolving a validation error, the error will also be shown in the new field set. If you’re using this component in your service you need to add these issue details to your accessibility statement:
Form submission errors are duplicated when a new field set is created using the ‘add another’ button
If someone uses the ‘add another’ button whilst there are unaddressed errors in an existing field set these errors will be duplicated into the new field set. This fails WCAG success criteria 3.3.1 Error identification (Level A), 3.3.3 Error Suggestion (Level AA). We’re aware of this issue and plan to review the component, and implement a fix by November 2025.
Get help and contribute
Get help
You can contact the MoJ Design System team for help or support using this component.
Help improve this component
The MoJ Design System team would like to hear:
- how you have used this component in your service
- any feedback you have about its usage, for example accessibility or ideas for improvement
Add these comments to the add another discussion on GitHub.