Components Add another
Last updated: 11 October 2022
<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>
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 (Her Majesty’s Prison and Probation Service)
Accessibility issues
Some people who use assistive technology will find it hard to identify form items that are added. This is because the form labels this component creates are given the same ID when added to the page. A fix for this has been proposed on GitHub. This has been raised in an external audit under Web Content Accessibility Guidelines (WCAG) 2.4.6 Headings and Labels (Level AA). If you use this component without addressing this issue, you must list it in the accessibility statement.
People with low vision have also reported difficulty interacting with the remove button. This is because by default it is aligned to the right of the page away from their main focus.