Add to a list

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

When to use

Use this pattern when the user needs to add information with more than one item 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

You need HMRC Frontend to use this pattern – find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

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

              <h1 class="govuk-heading-xl">You have added 3 directors</h1>
<div class="govuk-form-group">
  <ul class="hmrc-add-to-a-list hmrc-add-to-a-list--short">

    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Sydney Russell</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Sydney Russell from the list</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Michael Cain</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Michael Cain from the list</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Jeremy Winter</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Jeremy Winter from the list</span>
        </a>
      </span>
    </li>

  </ul>
</div>
<form method="post" action="">

  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset" aria-describedby="add-another-hint">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend govuk-fieldset__legend--m">
        Do you need to add another director?
      </legend>
      <div id="add-another-hint" class="govuk-hint">
        You must tell us about all your directors.
      </div>
      <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another" name="add-another" type="radio" value="Yes">
          <label class="govuk-label govuk-radios__label" for="add-another">
            Yes
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another-2" name="add-another" type="radio" value="No">
          <label class="govuk-label govuk-radios__label" for="add-another-2">
            No
          </label>
        </div>
      </div>

    </fieldset>
  </div>

  <button class="govuk-button" data-module="govuk-button">
    continue
  </button>
</form>
            
                <h1 class="govuk-heading-xl">Rydych wedi ychwanegu 3 directors</h1>
<div class="govuk-form-group">
  <ul class="hmrc-add-to-a-list hmrc-add-to-a-list--short">

    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Sydney Russell</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Sydney Russell o’r rhestr</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Michael Cain</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Michael Cain o’r rhestr</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Jeremy Winter</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Jeremy Winter o’r rhestr</span>
        </a>
      </span>
    </li>

  </ul>
</div>
<form method="post" action="">

  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset" aria-describedby="add-another-hint">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend govuk-fieldset__legend--m">
        Oes angen i chi ychwanegu director arall?
      </legend>
      <div id="add-another-hint" class="govuk-hint">
        Mae’n rhaid i chi roi gwybod i ni am eich holl gyfarwyddwyr.
      </div>
      <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another" name="add-another" type="radio" value="Iawn">
          <label class="govuk-label govuk-radios__label" for="add-another">
            Iawn
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another-2" name="add-another" type="radio" value="Na">
          <label class="govuk-label govuk-radios__label" for="add-another-2">
            Na
          </label>
        </div>
      </div>

    </fieldset>
  </div>

  <button class="govuk-button" data-module="govuk-button">
    Yn eich blaen
  </button>
</form>
              
                {%- from "hmrc/components/add-to-a-list/macro.njk" import hmrcAddToAList -%}

{{
  hmrcAddToAList({
    itemList: [
      {
        name: 'Sydney Russell',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Michael Cain',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Jeremy Winter',
        changeUrl: '#',
        removeUrl: '#'
      }
    ],
    itemType: {
      singular: 'director',
      plural: 'directors',
      formAction: '#'
    },
    hintText: 'You must tell us about all your directors.'
  })
}}
              
                  {%- from "hmrc/components/add-to-a-list/macro.njk" import hmrcAddToAList -%}

{{
  hmrcAddToAList({
    language: 'cy',
    itemList: [
      {
        name: 'Sydney Russell',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Michael Cain',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Jeremy Winter',
        changeUrl: '#',
        removeUrl: '#'
      }
    ],
    itemType: {
      singular: 'director',
      plural: 'directors',
      formAction: '#'
    },
    hintText: 'Mae’n rhaid i chi roi gwybod i ni am eich holl gyfarwyddwyr.'
  })
}}
                

Add things to the list

              <h1 class="govuk-heading-xl">You have added 4 directors</h1>
<div class="govuk-form-group">
  <ul class="hmrc-add-to-a-list hmrc-add-to-a-list--short">

    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Sydney Russell</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Sydney Russell from the list</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Michael Cain</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Michael Cain from the list</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Jeremy Winter</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Jeremy Winter from the list</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Elizabeth Kean
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Change</span>
          <span class="govuk-visually-hidden">Change Elizabeth Kean</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Remove</span>
          <span class="govuk-visually-hidden">Remove Elizabeth Kean from the list</span>
        </a>
      </span>
    </li>

  </ul>
</div>
<form method="post" action="">

  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset" aria-describedby="add-another-hint">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend govuk-fieldset__legend--m">
        Do you need to add another director?
      </legend>
      <div id="add-another-hint" class="govuk-hint">
        You must tell us about all your directors.
      </div>
      <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another" name="add-another" type="radio" value="Yes">
          <label class="govuk-label govuk-radios__label" for="add-another">
            Yes
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another-2" name="add-another" type="radio" value="No">
          <label class="govuk-label govuk-radios__label" for="add-another-2">
            No
          </label>
        </div>
      </div>

    </fieldset>
  </div>

  <button class="govuk-button" data-module="govuk-button">
    continue
  </button>
</form>
            
                <h1 class="govuk-heading-xl">Rydych wedi ychwanegu 4 directors</h1>
<div class="govuk-form-group">
  <ul class="hmrc-add-to-a-list hmrc-add-to-a-list--short">

    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Sydney Russell
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Sydney Russell</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Sydney Russell o’r rhestr</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Michael Cain
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Michael Cain</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Michael Cain o’r rhestr</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Jeremy Winter
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Jeremy Winter</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Jeremy Winter o’r rhestr</span>
        </a>
      </span>
    </li>
    <li class="hmrc-add-to-a-list__contents">
      <span class="hmrc-add-to-a-list__identifier hmrc-add-to-a-list__identifier--light">
        Elizabeth Kean
      </span>
      <span class="hmrc-add-to-a-list__change">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Newid</span>
          <span class="govuk-visually-hidden">Newid Elizabeth Kean</span>
        </a>
      </span>
      <span class="hmrc-add-to-a-list__remove">
        <a class="govuk-link" href="#">
          <span aria-hidden="true">Dileu</span>
          <span class="govuk-visually-hidden">Dileu’r Elizabeth Kean o’r rhestr</span>
        </a>
      </span>
    </li>

  </ul>
</div>
<form method="post" action="">

  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset" aria-describedby="add-another-hint">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend govuk-fieldset__legend--m">
        Oes angen i chi ychwanegu director arall?
      </legend>
      <div id="add-another-hint" class="govuk-hint">
        Mae’n rhaid i chi roi gwybod i ni am eich holl gyfarwyddwyr.
      </div>
      <div class="govuk-radios govuk-radios--inline">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another" name="add-another" type="radio" value="Iawn">
          <label class="govuk-label govuk-radios__label" for="add-another">
            Iawn
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="add-another-2" name="add-another" type="radio" value="Na">
          <label class="govuk-label govuk-radios__label" for="add-another-2">
            Na
          </label>
        </div>
      </div>

    </fieldset>
  </div>

  <button class="govuk-button" data-module="govuk-button">
    Yn eich blaen
  </button>
</form>
              
                {%- from "hmrc/components/add-to-a-list/macro.njk" import hmrcAddToAList -%}

{{
  hmrcAddToAList({
    itemList: [
      {
        name: 'Sydney Russell',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Michael Cain',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Jeremy Winter',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Elizabeth Kean',
        changeUrl: '#',
        removeUrl: '#'
      }
    ],
    itemType: {
      singular: 'director',
      plural: 'directors',
      formAction: '#'
    },
    hintText: 'You must tell us about all your directors.',
    messages: {
      yes: 'Yes',
      no: 'No'
    }
  })
}}
              
                  {%- from "hmrc/components/add-to-a-list/macro.njk" import hmrcAddToAList -%}

{{
  hmrcAddToAList({
    language: 'cy',
    itemList: [
      {
        name: 'Sydney Russell',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Michael Cain',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Jeremy Winter',
        changeUrl: '#',
        removeUrl: '#'
      },
      {
        name: 'Elizabeth Kean',
        changeUrl: '#',
        removeUrl: '#'
      }
    ],
    itemType: {
      singular: 'director',
      plural: 'directors',
      formAction: '#'
    },
    hintText: 'Mae’n rhaid i chi roi gwybod i ni am eich holl gyfarwyddwyr.',
    messages: {
      yes: 'Iawn',
      no: 'Na'
    }
  })
}}
                

Check their answers

              <div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds-from-desktop">

    <h1 class="govuk-heading-l">Check your answers</h1>

    <dl class="govuk-summary-list govuk-!-margin-bottom-9">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          What is the director’s name?
        </dt>
        <dd class="govuk-summary-list__value">
          Elizabeth Kean
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> name</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          What is Elizabeth Kean’s date of birth?
        </dt>
        <dd class="govuk-summary-list__value">
          12 October 1984
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> date of birth</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Does Elizabeth Kean have a National Insurance number?
        </dt>
        <dd class="govuk-summary-list__value">
          Yes
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> if they have National Insurance number</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          National Insurance number
        </dt>
        <dd class="govuk-summary-list__value">
          QQ 12 34 56 C
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> National Insurance number</span>
          </a>
        </dd>
      </div>
    </dl>

    <form action="/form-handler" method="post" novalidate>

      <input type="hidden" name="answers-checked" value="true">

      <button class="govuk-button" data-module="govuk-button">
        Continue
      </button>

    </form>
  </div>
</div>
            
                <div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds-from-desktop">

    <h1 class="govuk-heading-l">Check your answers</h1>

    <dl class="govuk-summary-list govuk-!-margin-bottom-9">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Beth yw enw’r cyfarwyddwr?
        </dt>
        <dd class="govuk-summary-list__value">
          Elizabeth Kean
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> name</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Beth yw dyddiad geni Elizabeth Kean?
        </dt>
        <dd class="govuk-summary-list__value">
          12 October 1984
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> date of birth</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          A oes gan Elizabeth Kean rif Yswiriant Gwladol?
        </dt>
        <dd class="govuk-summary-list__value">
          Iawn
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> if they have National Insurance number</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Rhif Yswiriant Gwladol
        </dt>
        <dd class="govuk-summary-list__value">
          QQ 12 34 56 C
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> National Insurance number</span>
          </a>
        </dd>
      </div>
    </dl>

    <form action="/form-handler" method="post" novalidate>

      <input type="hidden" name="answers-checked" value="true">

      <button class="govuk-button" data-module="govuk-button">
        Yn eich blaen
      </button>

    </form>
  </div>
</div>
              
                {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{% from "govuk/components/button/macro.njk" import govukButton %}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">

      <h1 class="govuk-heading-l">Check your answers</h1>

      {{ govukSummaryList({
        classes: 'govuk-!-margin-bottom-9',
        rows: [
          {
            key: {
              text: "What is the director’s name?"
            },
            value: {
              text: "Elizabeth Kean"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "name"
                }
              ]
            }
          },
          {
            key: {
              text: "What is Elizabeth Kean’s date of birth?"
            },
            value: {
              text: "12 October 1984"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "date of birth"
                }
              ]
            }
          },
          {
            key: {
              text: "Does Elizabeth Kean have a National Insurance number?"
            },
            value: {
              html: "Yes"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "if they have National Insurance number"
                }
              ]
            }
          },
          {
            key: {
              text: "National Insurance number"
            },
            value: {
              text: 'QQ 12 34 56 C'
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "National Insurance number"
                }
              ]
            }
          }
        ]
      }) }}

      <form action="/form-handler" method="post" novalidate>

        <input type="hidden" name="answers-checked" value="true">

        {{ govukButton({
          text: "Continue"
        }) }}

      </form>
    </div>
  </div>
              
                  {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{% from "govuk/components/button/macro.njk" import govukButton %}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">

      <h1 class="govuk-heading-l">Check your answers</h1>

      {{ govukSummaryList({
        classes: 'govuk-!-margin-bottom-9',
        rows: [
          {
            key: {
              text: "Beth yw enw’r cyfarwyddwr?"
            },
            value: {
              text: "Elizabeth Kean"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "name"
                }
              ]
            }
          },
          {
            key: {
              text: "Beth yw dyddiad geni Elizabeth Kean?"
            },
            value: {
              text: "12 October 1984"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "date of birth"
                }
              ]
            }
          },
          {
            key: {
              text: "A oes gan Elizabeth Kean rif Yswiriant Gwladol?"
            },
            value: {
              html: "Iawn"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "if they have National Insurance number"
                }
              ]
            }
          },
          {
            key: {
              text: "Rhif Yswiriant Gwladol"
            },
            value: {
              text: 'QQ 12 34 56 C'
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "National Insurance number"
                }
              ]
            }
          }
        ]
      }) }}

      <form action="/form-handler" method="post" novalidate>

        <input type="hidden" name="answers-checked" value="true">

        {{ govukButton({
          text: "Yn eich blaen"
        }) }}

      </form>
    </div>
  </div>
                

Change things on the list

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

              <div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds-from-desktop">
    <h1 class="govuk-heading-xl">Change Elizabeth Keen’s details</h1>

    <dl class="govuk-summary-list govuk-!-margin-bottom-9">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          What is the director’s name?
        </dt>
        <dd class="govuk-summary-list__value">
          Elizabeth Kean
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> name</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          What is Elizabeth Kean’s date of birth?
        </dt>
        <dd class="govuk-summary-list__value">
          12 October 1984
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> date of birth</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Does Elizabeth Kean have a National Insurance number?
        </dt>
        <dd class="govuk-summary-list__value">
          Yes
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> if they have National Insurance number</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          National Insurance number
        </dt>
        <dd class="govuk-summary-list__value">
          QQ 12 34 56 C
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Change<span class="govuk-visually-hidden"> National Insurance number</span>
          </a>
        </dd>
      </div>
    </dl>

    <form action="/form-handler" method="post" novalidate>

      <input type="hidden" name="answers-checked" value="true">

      <button class="govuk-button" data-module="govuk-button">
        Continue
      </button>

    </form>
  </div>
</div>
            
                <div class="govuk-grid-row">
  <div class="govuk-grid-column-two-thirds-from-desktop">
    <h1 class="govuk-heading-xl">Newid Elizabeth Keen’s details</h1>

    <dl class="govuk-summary-list govuk-!-margin-bottom-9">
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Beth yw enw’r cyfarwyddwr?
        </dt>
        <dd class="govuk-summary-list__value">
          Elizabeth Kean
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> name</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Beth yw dyddiad geni Elizabeth Kean?
        </dt>
        <dd class="govuk-summary-list__value">
          12 October 1984
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> date of birth</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          A oes gan Elizabeth Kean rif Yswiriant Gwladol?
        </dt>
        <dd class="govuk-summary-list__value">
          Iawn
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> if they have National Insurance number</span>
          </a>
        </dd>
      </div>
      <div class="govuk-summary-list__row">
        <dt class="govuk-summary-list__key">
          Rhif Yswiriant Gwladol
        </dt>
        <dd class="govuk-summary-list__value">
          QQ 12 34 56 C
        </dd>
        <dd class="govuk-summary-list__actions">
          <a class="govuk-link" href="#">
            Newid<span class="govuk-visually-hidden"> National Insurance number</span>
          </a>
        </dd>
      </div>
    </dl>

    <form action="/form-handler" method="post" novalidate>

      <input type="hidden" name="answers-checked" value="true">

      <button class="govuk-button" data-module="govuk-button">
        Yn eich blaen
      </button>

    </form>
  </div>
</div>
              
                {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{% from "govuk/components/button/macro.njk" import govukButton %}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">
      <h1 class="govuk-heading-xl">Change Elizabeth Keen’s details</h1>

      {{ govukSummaryList({
        classes: 'govuk-!-margin-bottom-9',
        rows: [
          {
            key: {
              text: "What is the director’s name?"
            },
            value: {
              text: "Elizabeth Kean"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "name"
                }
              ]
            }
          },
          {
            key: {
              text: "What is Elizabeth Kean’s date of birth?"
            },
            value: {
              text: "12 October 1984"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "date of birth"
                }
              ]
            }
          },
          {
            key: {
              text: "Does Elizabeth Kean have a National Insurance number?"
            },
            value: {
              html: "Yes"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "if they have National Insurance number"
                }
              ]
            }
          },
          {
            key: {
              text: "National Insurance number"
            },
            value: {
              text: 'QQ 12 34 56 C'
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "National Insurance number"
                }
              ]
            }
          }
        ]
      }) }}

      <form action="/form-handler" method="post" novalidate>

        <input type="hidden" name="answers-checked" value="true">

        {{ govukButton({
          text: "Continue"
        }) }}

      </form>
    </div>
  </div>
              
                  {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
{% from "govuk/components/button/macro.njk" import govukButton %}

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">
      <h1 class="govuk-heading-xl">Newid Elizabeth Keen’s details</h1>

      {{ govukSummaryList({
        classes: 'govuk-!-margin-bottom-9',
        rows: [
          {
            key: {
              text: "Beth yw enw’r cyfarwyddwr?"
            },
            value: {
              text: "Elizabeth Kean"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "name"
                }
              ]
            }
          },
          {
            key: {
              text: "Beth yw dyddiad geni Elizabeth Kean?"
            },
            value: {
              text: "12 October 1984"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "date of birth"
                }
              ]
            }
          },
          {
            key: {
              text: "A oes gan Elizabeth Kean rif Yswiriant Gwladol?"
            },
            value: {
              html: "Iawn"
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "if they have National Insurance number"
                }
              ]
            }
          },
          {
            key: {
              text: "Rhif Yswiriant Gwladol"
            },
            value: {
              text: 'QQ 12 34 56 C'
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Newid",
                  visuallyHiddenText: "National Insurance number"
                }
              ]
            }
          }
        ]
      }) }}

      <form action="/form-handler" method="post" novalidate>

        <input type="hidden" name="answers-checked" value="true">

        {{ govukButton({
          text: "Yn eich blaen"
        }) }}

      </form>
    </div>
  </div>
                

Remove things from the list

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

              <form>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
        <h1 class="govuk-fieldset__heading">Are you sure you want to remove Elizabeth Kean?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input id="yes" type="radio" name="delete" class="govuk-radios__input" value="Yes">
          <label class="govuk-radios__label" for="yes">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input id="no" type="radio" name="delete" class="govuk-radios__input" value="No">
          <label class="govuk-radios__label" for="no">No</label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button">Continue</button>
</form>
            
                <form>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
        <h1 class="govuk-fieldset__heading">A ydych yn siŵr eich bod am dynnu Elizabeth Kean?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input id="yes" type="radio" name="delete" class="govuk-radios__input" value="Yes">
          <label class="govuk-radios__label" for="yes">Iawn</label>
        </div>
        <div class="govuk-radios__item">
          <input id="no" type="radio" name="delete" class="govuk-radios__input" value="No">
          <label class="govuk-radios__label" for="no">Na</label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button">Yn eich blaen</button>
</form>
              
                <form>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
        <h1 class="govuk-fieldset__heading">Are you sure you want to remove Elizabeth Kean?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input id="yes" type="radio" name="delete" class="govuk-radios__input" value="Yes">
          <label class="govuk-radios__label" for="yes">Yes</label>
        </div>
        <div class="govuk-radios__item">
          <input id="no" type="radio" name="delete" class="govuk-radios__input" value="No">
          <label class="govuk-radios__label" for="no">No</label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button">Continue</button>
</form>
              
                  <form>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
        <h1 class="govuk-fieldset__heading">A ydych yn siŵr eich bod am dynnu Elizabeth Kean?</h1>
      </legend>
      <div class="govuk-radios">
        <div class="govuk-radios__item">
          <input id="yes" type="radio" name="delete" class="govuk-radios__input" value="Yes">
          <label class="govuk-radios__label" for="yes">Iawn</label>
        </div>
        <div class="govuk-radios__item">
          <input id="no" type="radio" name="delete" class="govuk-radios__input" value="No">
          <label class="govuk-radios__label" for="no">Na</label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button">Yn eich blaen</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