Components
Error summary
Use this component at the top of a page to summarise any errors a user has made.
When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#dob-error">Date of birth must be in the past</a>
</li>
<li>
<a href="#postcode-error">Enter a postcode, like AA1 1AA</a>
</li>
</ul>
</div>
</div>{% from "error-summary/macro.njk" import govukErrorSummary %}
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Date of birth must be in the past",
href: "#dob-error"
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#postcode-error"
}
]
}) }}When to use this component
Always show an error summary when there is a validation error, even if there’s only one.
How it works
You must:
- add ‘Error: ’ to the beginning of the
<title>so screen readers read it out as soon as possible - show an error summary at the top of a page
- move keyboard focus to the error summary
- include the heading ‘There is a problem’
- link to each of the answers that have validation errors
- show the same error messages next to the inputs with errors
Read guidance on writing good error messages.
There are 2 ways to use the error summary component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#dob-error">Date of birth must be in the past</a>
</li>
<li>
<a href="#postcode-error">Enter a postcode, like AA1 1AA</a>
</li>
</ul>
</div>
</div>{% from "error-summary/macro.njk" import govukErrorSummary %}
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Date of birth must be in the past",
href: "#dob-error"
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#postcode-error"
}
]
}) }}Linking from the error summary to each answer
You must link the errors in the error summary to the answer they relate to.
For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#name">Enter your full name</a>
</li>
</ul>
</div>
</div>
<h1 class="govuk-heading-xl">Your details</h1>
<div class="govuk-form-group govuk-form-group--error">
<label class="govuk-label" for="name">
Full name
</label>
<span id="name-error" class="govuk-error-message">
Enter your full name
</span>
<input class="govuk-input govuk-input--error" id="name" name="name" type="text" aria-describedby="name-error">
</div>{% from "error-summary/macro.njk" import govukErrorSummary %}
{% from "input/macro.njk" import govukInput %}
{{ govukErrorSummary({
"titleText": "There is a problem",
"errorList": [
{
"text": "Enter your full name",
"href": "#name"
}
]
}) }}
<h1 class="govuk-heading-xl">Your details</h1>
{{ govukInput({
label: {
"text": 'Full name'
},
id: "name",
name: "name",
errorMessage: {
"text": "Enter your full name"
}
}) }}When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
If you do not know which field contains an error, link to the first field.
<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#dob-year">Date of birth must include a year</a>
</li>
</ul>
</div>
</div>
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="dob-error" role="group">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
<h1 class="govuk-fieldset__heading">
What is your date of birth?
</h1>
</legend>
<span id="dob-error" class="govuk-error-message">
Date of birth must include a year
</span>
<div class="govuk-date-input" id="dob">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day">
Day
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="number" value="5" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month">
Month
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="number" value="12" pattern="[0-9]*">
</div>
</div>
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year">
Year
</label>
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year" name="year" type="number" pattern="[0-9]*">
</div>
</div>
</div>
</fieldset>
</div>{% from "date-input/macro.njk" import govukDateInput %}
{% from "error-summary/macro.njk" import govukErrorSummary %}
{{ govukErrorSummary({
"titleText": "There is a problem",
"errorList": [
{
"text": "Date of birth must include a year",
"href": "#dob-year"
}
]
}) }}
{{ govukDateInput({
fieldset: {
legend: {
isPageHeading: true,
text: 'What is your date of birth?',
classes: 'govuk-fieldset__legend--xl'
}
},
id: 'dob',
name: 'dob',
errorMessage: {
text: "Date of birth must include a year"
},
items: [
{
name: "day",
classes: "govuk-input--width-2",
value: 5
},
{
name: "month",
classes: "govuk-input--width-2",
value: 12
},
{
name: "year",
classes: "govuk-input--width-4 govuk-input--error"
}
]
})
}}For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="#nationality">Select if you are British, Irish or a citizen of a different country</a>
</li>
</ul>
</div>
</div>
<div class="govuk-form-group govuk-form-group--error">
<fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
<h1 class="govuk-fieldset__heading">
What is your nationality?
</h1>
</legend>
<span id="nationality-hint" class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</span>
<span id="nationality-error" class="govuk-error-message">
Select if you are British, Irish or a citizen of a different country
</span>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality" name="nationality" type="checkbox" value="british" aria-describedby="nationality-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="nationality">
British
</label>
<span id="nationality-item-hint" class="govuk-hint govuk-checkboxes__hint">
including English, Scottish, Welsh and Northern Irish
</span>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-2" name="nationality" type="checkbox" value="irish">
<label class="govuk-label govuk-checkboxes__label" for="nationality-2">
Irish
</label>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="nationality-3" name="nationality" type="checkbox" value="other">
<label class="govuk-label govuk-checkboxes__label" for="nationality-3">
Citizen of another country
</label>
</div>
</div>
</fieldset>
</div>{% from "error-summary/macro.njk" import govukErrorSummary %}
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{{ govukErrorSummary({
"titleText": "There is a problem",
"errorList": [
{
"text": "Select if you are British, Irish or a citizen of a different country",
"href": "#nationality"
}
]
}) }}
{{ govukCheckboxes({
idPrefix: "nationality",
name: "nationality",
fieldset: {
legend: {
text: "What is your nationality?",
isPageHeading: true,
classes: "govuk-fieldset__legend--xl"
}
},
hint: {
text: "If you have dual nationality, select all options that are relevant to you."
},
errorMessage: {
text: "Select if you are British, Irish or a citizen of a different country"
},
items: [
{
value: "british",
text: "British",
hint: {
text: "including English, Scottish, Welsh and Northern Irish"
},
id: "nationality"
},
{
value: "irish",
text: "Irish"
},
{
value: "other",
text: "Citizen of another country"
}
]
}) }}Research on this component
If you’ve used this component, get in touch to share your user research findings.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk