Unofficial
Internal
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"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#"
>
The date your passport was issued must be
in the past
</a>
</li>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#"
>
Enter a postcode, like AA1 1AA
</a>
</li>
</ul>
</div>
</div>
</div>
<ErrorSummary
title="There is a problem"
items={[
{
text: "The date your passport was issued must be in the past",
href: "#",
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#",
},
]}
/>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | 'id' attribute to place on the base HTML element | |
| classBlock | string | Block name override in BEM style classes applied to all elements | |
| classModifiers | other | BEM style modifiers to apply to the base HTML element | |
| className | string | Extra classes to apply to the base HTML element | |
| items | other | List of links to choose from | |
| title | other | The heading of the error summary block. |
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:
- move keyboard focus to the error summary
- include the heading ‘There is a problem’
- link to each of the answers that have validation errors
- make sure the error messages in the error summary are worded the same as those which appear next to the inputs with errors
As well as showing an error summary, follow the validation pattern - for example, by adding ‘Error: ’ to the beginning of the page <title> so screen readers read it out as soon as possible.
And make your error messages clear and concise.
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#"
>
The date your passport was issued must be
in the past
</a>
</li>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#"
>
Enter a postcode, like AA1 1AA
</a>
</li>
</ul>
</div>
</div>
</div>
<ErrorSummary
title="There is a problem"
items={[
{
text: "The date your passport was issued must be in the past",
href: "#",
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#",
},
]}
/>
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>
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#full-name-input"
>
Enter your full name
</a>
</li>
</ul>
</div>
</div>
</div>
<h1>Your details</h1>
<div
id="full-name"
class="govuk-form-group govuk-form-group--error"
>
<label for="full-name-input" class="govuk-label">
Full name
</label>
<p
id="full-name-error"
class="govuk-error-message"
>
<span class="govuk-visually-hidden">
Error:
</span>
Enter your full name
</p>
<input
type="text"
name="name"
autocomplete="name"
aria-describedby="full-name-error"
id="full-name-input"
class="govuk-input govuk-input--error"
/>
</div>
</div>
<Fragment>
<ErrorSummary
title="There is a problem"
items={[
{
text: "Enter your full name",
href: "#full-name-input",
},
]}
/>
<h1>Your details</h1>
<TextInput
id="full-name"
label="Full name"
name="name"
autoComplete="name"
error="Enter your full name"
/>
</Fragment>
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.
There is a problem
<div>
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#passport-issued-year"
>
The date your passport was issued must
include a year
</a>
</li>
</ul>
</div>
</div>
</div>
<div
id="passport-issued"
class="govuk-form-group govuk-form-group--error"
>
<fieldset
aria-describedby="passport-issued-hint passport-issued-error"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
<h1 class="govuk-heading-l">
When was your passport issued?
</h1>
</legend>
<div
id="passport-issued-hint"
class="govuk-hint"
>
For example, 12 11 2007
</div>
<p
id="passport-issued-error"
class="govuk-error-message"
>
<span class="govuk-visually-hidden">
Error:
</span>
The date your passport was issued must include
a year
</p>
<div class="govuk-date-input">
<div class="govuk-date-input__item">
<label
for="passport-issued-day"
class="govuk-label"
>
Day
</label>
<input
type="text"
id="passport-issued-day"
name="passport-issued[day]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
/>
</div>
<div class="govuk-date-input__item">
<label
for="passport-issued-month"
class="govuk-label"
>
Month
</label>
<input
type="text"
id="passport-issued-month"
name="passport-issued[month]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
/>
</div>
<div class="govuk-date-input__item">
<label
for="passport-issued-year"
class="govuk-label"
>
Year
</label>
<input
type="text"
id="passport-issued-year"
name="passport-issued[year]"
inputmode="numeric"
class="govuk-input govuk-input--width-4 govuk-input--error govuk-date-input__input"
/>
</div>
</div>
</fieldset>
</div>
</div>
<Fragment>
<ErrorSummary
title="There is a problem"
items={[
{
text: "The date your passport was issued must include a year",
href: "#passport-issued-year",
},
]}
/>
<DateInput
id="passport-issued"
label={
<h1 className="govuk-heading-l">
When was your passport issued?
</h1>
}
name="passport-issued"
hint="For example, 12 11 2007"
error={{
year: "The date your passport was issued must include a year",
}}
/>
</Fragment>
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.
There is a problem
<div>
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2 class="govuk-error-summary__title">
There is a problem
</h2>
<div class="govuk-error-summary__body">
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#nationality-checkbox-0"
>
Select if you are British, Irish or a
citizen of a different country
</a>
</li>
</ul>
</div>
</div>
</div>
<div
id="nationality"
class="govuk-form-group govuk-form-group--error"
>
<fieldset
aria-describedby="nationality-hint nationality-error"
class="govuk-fieldset"
>
<legend class="govuk-fieldset__legend">
<h1 class="govuk-heading-l">
What is your nationality?
</h1>
</legend>
<div id="nationality-hint" class="govuk-hint">
Select all that apply.
</div>
<p
id="nationality-error"
class="govuk-error-message"
>
<span class="govuk-visually-hidden">
Error:
</span>
Select if you are British, Irish or a citizen
of a different country
</p>
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input
type="checkbox"
value="british"
name="nationality"
id="nationality-checkbox-0"
class="govuk-checkboxes__input"
/>
<label
for="nationality-checkbox-0"
class="govuk-label govuk-checkboxes__label"
>
British
</label>
<div
id="nationality-checkbox-0-hint"
class="govuk-hint govuk-checkboxes__hint"
>
including English, Scottish, Welsh and
Northern Irish
</div>
</div>
<div class="govuk-checkboxes__item">
<input
type="checkbox"
value="irish"
name="nationality"
id="nationality-checkbox-1"
class="govuk-checkboxes__input"
/>
<label
for="nationality-checkbox-1"
class="govuk-label govuk-checkboxes__label"
>
Irish
</label>
</div>
<div class="govuk-checkboxes__item">
<input
type="checkbox"
value="other"
name="nationality"
id="nationality-checkbox-2"
class="govuk-checkboxes__input"
/>
<label
for="nationality-checkbox-2"
class="govuk-label govuk-checkboxes__label"
>
Citizen of another country
</label>
</div>
</div>
</fieldset>
</div>
</div>
<Fragment>
<ErrorSummary
title="There is a problem"
items={[
{
text: "Select if you are British, Irish or a citizen of a different country",
href: "#nationality-checkbox-0",
},
]}
/>
<Checkboxes
label={
<h1 className="govuk-heading-l">
What is your nationality?
</h1>
}
name="nationality"
options={[
{
value: "british",
label: "British",
hint: "including English, Scottish, Welsh and Northern Irish",
},
{
value: "irish",
label: "Irish",
},
{
value: "other",
label: "Citizen of another country",
},
]}
hint="Select all that apply."
error="Select if you are British, Irish or a citizen of a different country"
/>
</Fragment>
Where to put the error summary
Put the error summary at the top of the main container. If your page includes breadcrumbs or a back link, place it below these, but above the <h1>.
<div class="not-govuk-page not-govuk-page--govuk">
<a
id="skip-link"
class="govuk-skip-link"
href="#main-content"
data-module="govuk-skip-link"
>
Skip to main content
</a>
<header
class="govuk-header not-govuk-page__header"
role="banner"
data-module="govuk-header"
>
<div
class="govuk-width-container govuk-header__container"
style="max-width:690px"
>
<div class="govuk-header__logo">
<a
class="govuk-header__link govuk-header__link--homepage"
href="https://www.gov.uk/"
>
<span class="govuk-header__logotype">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 132 97"
height="30"
width="36"
aria-hidden="true"
focusable="false"
class="govuk-header__logotype-crown"
>
<path
fill="currentColor"
fill-rule="evenodd"
d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"
></path>
<image
src="/public/images/govuk-logotype-crown.5c77cb65.png"
width="36"
height="32"
class="govuk-header__logotype-crown-fallback-image"
></image>
</svg>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
<div class="govuk-header__content">
<a
class="govuk-header__link govuk-header__link--service-name"
href="#"
>
Service name
</a>
</div>
</div>
</header>
<div class="not-govuk-page__body">
<div
class="govuk-width-container not-govuk-page__container"
style="max-width:690px"
>
<a
id="back-link"
class="govuk-back-link"
href="#"
>
Back
</a>
<main
id="main-content"
role="main"
class="not-govuk-page__main"
>
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div
class="govuk-error-summary"
data-module="govuk-error-summary"
>
<div role="alert">
<h2
class="govuk-error-summary__title"
>
There is a problem
</h2>
<div
class="govuk-error-summary__body"
>
<ul
class="govuk-error-summary__list govuk-list"
>
<li
class="govuk-error-summary__list__item govuk-error-summary__list__item--active"
>
<a
class="govuk-error-summary__list__link"
href="#passport-issued-year"
>
The date your passport was
issued must include a year
</a>
</li>
</ul>
</div>
</div>
</div>
<div
id="passport-issued"
class="govuk-form-group govuk-form-group--error"
>
<fieldset
aria-describedby="passport-issued-hint passport-issued-error"
class="govuk-fieldset"
>
<legend
class="govuk-fieldset__legend"
>
<h1 class="govuk-heading-l">
When was your passport issued?
</h1>
</legend>
<div
id="passport-issued-hint"
class="govuk-hint"
>
For example, 12 11 2007
</div>
<p
id="passport-issued-error"
class="govuk-error-message"
>
<span class="govuk-visually-hidden">
Error:
</span>
The date your passport was issued
must include a year
</p>
<div class="govuk-date-input">
<div class="govuk-date-input__item">
<label
for="passport-issued-day"
class="govuk-label"
>
Day
</label>
<input
type="text"
id="passport-issued-day"
name="passport-issued[day]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
/>
</div>
<div class="govuk-date-input__item">
<label
for="passport-issued-month"
class="govuk-label"
>
Month
</label>
<input
type="text"
id="passport-issued-month"
name="passport-issued[month]"
inputmode="numeric"
class="govuk-input govuk-input--width-2 govuk-date-input__input"
/>
</div>
<div class="govuk-date-input__item">
<label
for="passport-issued-year"
class="govuk-label"
>
Year
</label>
<input
type="text"
id="passport-issued-year"
name="passport-issued[year]"
inputmode="numeric"
class="govuk-input govuk-input--width-4 govuk-input--error govuk-date-input__input"
/>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</main>
</div>
</div>
<footer
class="govuk-footer not-govuk-page__footer"
role="contentinfo"
>
<div
class="govuk-width-container"
style="max-width:690px"
>
<div class="govuk-footer__meta">
<div
class="govuk-footer__meta-item govuk-footer__meta-item--grow"
>
<svg
aria-hidden="true"
focusable="false"
class="govuk-footer__licence-logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 483.2 195.7"
height="17"
width="41"
>
<path
fill="currentColor"
d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
></path>
</svg>
<span
class="govuk-footer__license-description"
>
All content is available under the
<a
rel="license"
class="govuk-footer__link"
href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
>
Open Government Licence v3.0
</a>
, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a
class="govuk-footer__link govuk-footer__copyright-logo"
href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
>
© Crown copyright
</a>
</div>
</div>
</div>
</footer>
</div>
<GovUKPage
maxContentsWidth="690"
serviceName="Service name"
serviceHref="#"
backHref="#"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-two-thirds">
<ErrorSummary
title="There is a problem"
items={[
{
text: "The date your passport was issued must include a year",
href: "#passport-issued-year",
},
]}
/>
<DateInput
id="passport-issued"
label={
<h1 className="govuk-heading-l">
When was your passport issued?
</h1>
}
name="passport-issued"
hint="For example, 12 11 2007"
error={{
year: "The date your passport was issued must include a year",
}}
/>
</div>
</div>
</GovUKPage>