Components Add another

Last updated: 15 September 2021

<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" pattern="[0-9]*" 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" pattern="[0-9]*" 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" pattern="[0-9]*" 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 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 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.

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)