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">
<dl class="govuk-summary-list hmrc-list-with-actions hmrc-list-with-actions--short">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Sydney Russell
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Sydney Russell</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Sydney Russell from the list</span></a></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Michael Cain
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Michael Cain</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Michael Cain from the list</span></a></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Jeremy Winter
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Jeremy Winter</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Jeremy Winter from the list</span></a></li>
</ul>
</dd>
</div>
</dl>
</div>
<form method="post" novalidate 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" data-module="govuk-radios">
<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 type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<h1 class="govuk-heading-xl">Rydych wedi ychwanegu 3 o gyfarwyddwyr</h1>
<div class="govuk-form-group">
<dl class="govuk-summary-list hmrc-list-with-actions hmrc-list-with-actions--short">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Sydney Russell
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Sydney Russell</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Michael Cain
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Michael Cain</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Jeremy Winter
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Jeremy Winter</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
</dl>
</div>
<form method="post" novalidate 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 cyfarwyddwr 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" data-module="govuk-radios">
<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">
Iawn
</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">
Na
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" 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: 'cyfarwyddwr',
plural: 'o gyfarwyddwyr',
formAction: '#'
},
hintText: 'Mae’n rhaid i chi roi gwybod i ni am eich holl gyfarwyddwyr.'
})
}}
Add things to the list
Open this example in a new tab: View list summary after addition
Display in English
Display in Welsh
<h1 class="govuk-heading-xl">You have added 4 directors</h1>
<div class="govuk-form-group">
<dl class="govuk-summary-list hmrc-list-with-actions hmrc-list-with-actions--short">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Sydney Russell
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Sydney Russell</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Sydney Russell from the list</span></a></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Michael Cain
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Michael Cain</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Michael Cain from the list</span></a></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Jeremy Winter
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Jeremy Winter</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Jeremy Winter from the list</span></a></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Elizabeth Kean
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Change</span><span class="govuk-visually-hidden">Change Elizabeth Kean</span></a></li>
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Remove</span><span class="govuk-visually-hidden">Remove Elizabeth Kean from the list</span></a></li>
</ul>
</dd>
</div>
</dl>
</div>
<form method="post" novalidate 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" data-module="govuk-radios">
<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 type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<h1 class="govuk-heading-xl">Rydych wedi ychwanegu 4 o gyfarwyddwyr</h1>
<div class="govuk-form-group">
<dl class="govuk-summary-list hmrc-list-with-actions hmrc-list-with-actions--short">
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Sydney Russell
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Sydney Russell</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Michael Cain
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Michael Cain</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Jeremy Winter
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Jeremy Winter</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
<div class="govuk-summary-list__row">
<dt class="govuk-summary-list__key govuk-!-font-weight-regular hmrc-summary-list__key">
Elizabeth Kean
</dt>
<dd class="govuk-summary-list__actions hmrc-summary-list__actions">
<ul class="govuk-summary-list__actions-list">
<li class="govuk-summary-list__actions-list-item"><a class="govuk-link" href="#"><span aria-hidden="true">Newid</span><span class="govuk-visually-hidden">Newid Elizabeth Kean</span></a></li>
<li class="govuk-summary-list__actions-list-item"><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></li>
</ul>
</dd>
</div>
</dl>
</div>
<form method="post" novalidate 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 cyfarwyddwr 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" data-module="govuk-radios">
<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">
Iawn
</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">
Na
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" 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: 'cyfarwyddwr',
plural: 'o gyfarwyddwyr',
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 type="submit" 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">Gwirio'ch atebion</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 Hydref 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 type="submit" 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">Gwirio'ch atebion</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 Hydref 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 type="submit" 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 manylion Elizabeth Keen</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 Hydref 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 type="submit" 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 manylion Elizabeth Keen</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 Hydref 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--l">
<h1 class="govuk-fieldset__heading">
Are you sure you want to remove Elizabeth Kean?
</h1>
</legend>
<div class="govuk-radios" data-module="govuk-radios">
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="delete" name="delete" type="radio" value="yes">
<label class="govuk-label govuk-radios__label" for="delete">
Yes
</label>
</div>
<div class="govuk-radios__item">
<input class="govuk-radios__input" id="delete-2" name="delete" type="radio" value="no">
<label class="govuk-label govuk-radios__label" for="delete-2">
No
</label>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="govuk-button" data-module="govuk-button">
Continue
</button>
</form>
<form>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<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-label 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>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/button/macro.njk" import govukButton %}
<form>
{{ govukRadios({
name: "delete",
fieldset: {
legend: {
text: "Are you sure you want to remove Elizabeth Kean?",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
items: [
{
value: "yes",
text: "Yes"
},
{
value: "no",
text: "No"
}
]
}) }}
{{ govukButton({ text: "Continue" }) }}
</form>
<form>
<div class="govuk-form-group">
<fieldset class="govuk-fieldset">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<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-label 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.