Add to a list

This pattern lets the user add information with more than one part to a list.

When to use

Use this pattern when the user needs to add information with more than one part to a list. For example, when they need to enter more than one address or more than one person’s details.

​​​​When not to use

Do not use this pattern when the user needs to add different kinds of information that do not relate to each other.

How it works

Allow the user to:

  • view a summary of what they have added to the list
  • add things to the list
  • check their answers
  • change things on the list
  • remove things from the list

View a summary of what they have added to the list

Do you need to add another director? You must tell us about all your directors.
<header class="page-header">
  <h1 class="heading-xlarge">You have added 3 directors</h1>
</header>
<div class="form-group">
  <dl class="hmrc-add-to-a-list hmrc-add-to-a-list--short">
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a href="#">
          <span aria-hidden="true">Change</span>
          <span class="visually-hidden">Change Sydney Russell</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a href="#">
          <span aria-hidden="true">Remove</span>
          <span class="visually-hidden">Remove Sydney Russell’s name</span>
        </a>
      </dd>
    </div>
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a href="#">
          <span aria-hidden="true">Change</span>
          <span class="visually-hidden">Change Michael Cain</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a href="#">
          <span aria-hidden="true">Remove</span>
          <span class="visually-hidden">Remove Michael Cain’s details</span>
        </a>
      </dd>
    </div>
    <div class="hmrc-add-to-a-list__contents">
      <dt class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </dt>
      <dd class="hmrc-add-to-a-list__change">
        <a href="#">
          <span aria-hidden="true">Change</span>
          <span class="visually-hidden">Change Jeremy Winter</span>
        </a>
      </dd>
      <dd class="hmrc-add-to-a-list__remove">
        <a href="#">
          <span aria-hidden="true">Remove</span>
          <span class="visually-hidden">Remove Jeremy Winter’s details</span>
        </a>
      </dd>
    </div>
  </dl>
</div>
<form>
  <div class="form-group">
    <fieldset class="inline" id="director">
      <legend>
        <span class="bold-small">Do you need to add another director?</span>
        <span class="form-hint">You must tell us about all your directors.</span>
      </legend>
      <div class="multiple-choice">
        <input id="psa-director-yes" type="radio" name="redirectUrl" value="/">
        <label class="block-label" for="psa-director-yes">Yes</label>
      </div>
      <div class="multiple-choice">
        <input id="psa-director-no" type="radio" name="redirectUrl" value="/">
        <label class="block-label" for="psa-director-no">No</label>
      </div>
      <input type="hidden" name="errorData" value="">
    </fieldset>
  </div>
  <button type="submit" class="button">Continue</button>
</form>

Animated example of add to a list pattern that includes asking for name, date of birth, National Insurance number, Unique Taxpayer Reference, and letting you check your answers.

Change things on the list

Show all the information about the entry and let the user make a change.

What is the company director’s name?
Elizabeth Keen
Change Elizabeth Keen’s name
What is Elizabeth Keen’s date of birth?
9 March 1986
Change Elizabeth Keen’s date of birth
Does Elizabeth Keen have a National Insurance number?
Yes
Change if Elizabeth Keen has a National Insurance number
National Insurance number
DU385176B
Change Elizabeth Keen’s National Insurance number
Does Elizabeth Keen have a Self Assessment Unique Taxpayer Reference (UTR)?
No
Change if Elizabeth Keen has a Self Assessment Unique Taxpayer Reference (UTR)
Why does Elizabeth Keen not have a Self Assessment UTR?
She has registered for Self Assessment but not received a UTR yet.
Change why Elizabeth Keen does not have a Self Assessment UTR

Continue

<header class="page-header">
  <h1 class="heading-xlarge">Change Elizabeth Keen’s details</h1>
</header>
<div class="form-group">
  <dl class="govuk-check-your-answers form-group cya-questions-long">
    <div>
      <dt class="cya-question">What is the company director’s name?</dt>
      <dd class="cya-answer">Elizabeth Keen</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change Elizabeth Keen’s name</span></a></dd>
    </div>
    <div>
      <dt class="cya-question">What is Elizabeth Keen’s date of birth?</dt>
      <dd class="cya-answer">9 March 1986</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change Elizabeth Keen’s date of birth</span></a></dd>
    </div>
    <div>
      <dt class="cya-question">Does Elizabeth Keen have a National Insurance number?</dt>
      <dd class="cya-answer">Yes</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change if Elizabeth Keen has a National Insurance number</span></a>
      </dd>
    </div>
    <div>
      <dt class="cya-question">National Insurance number</dt>
      <dd class="cya-answer">DU385176B</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change Elizabeth Keen’s National Insurance number</span></a>
      </dd>
    </div>
    <div>
      <dt class="cya-question">Does Elizabeth Keen have a Self Assessment Unique Taxpayer Reference (UTR)?</dt>
      <dd class="cya-answer">No</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change if Elizabeth Keen has a Self Assessment Unique Taxpayer Reference (UTR)</span></a>
      </dd>
    </div>
    <div>
      <dt class="cya-question">Why does Elizabeth Keen not have a Self Assessment UTR?</dt>
      <dd class="cya-answer">She has registered for Self Assessment but not received a UTR yet.</dd>
      <dd class="cya-change"><a href="/"><span aria-hidden="true">Change</span><span class="visually-hidden">Change why Elizabeth Keen does not have a Self Assessment UTR</span></a></dd>
    </div>
  </dl>
</div>

<a href="#" class="button" role="button">Continue</a>

Remove things from the list

Ask the user to confirm they want to remove something from the list.

Are you sure you want to remove Elizabeth Keen?

<form>
  <div class="form-group">
    <fieldset class="inline">
      <legend class="page-header">
        <h1 class="heading-large">Are you sure you want to remove Elizabeth Keen?</h1>
      </legend>
      <div class="multiple-choice">
        <input id="delete-yes" type="radio" name="yes-no-group" value="Yes">
        <label for="delete-yes">Yes</label>
      </div>
      <div class="multiple-choice">
        <input id="delete-no" type="radio" name="yes-no-group" value="No">
        <label for="delete-no">No</label>
      </div>
    </fieldset>
  </div>
  <button class="button" role="button">Continue</button>
</form>

Research

We need more research. If you have used add to a list, get in touch to share your research findings.

Discuss add to a list on GitHub

Help and support

Contact the Service Design Tools team in #team-sdt on HMRC Slack (open in app) or email us.