Error summary
An error summary appears at the top of a page if a user makes an error in a form. It summarises any errors they've made.
Sample HTML for Error summary example
<div class="ds_error-summary" id="error-summary" aria-labelledby="error-summary-title" role="alert">
<h2 class="ds_error-summary__title" id="error-summary-title">There is a problem</h2>
<ul class="ds_error-summary__list">
<li>
<a href="#resolve">Did this resolve your issue?</a>
</li>
<li>
<a href="#topics">What topics are you interested in?</a>
</li>
<li>
<a href="#more-detail">Please provide more detail</a>
</li>
</ul>
</div>About this component
Use an error summary to tell users when they’ve made any errors in a form and how to fix them.
An error summary:
- summarises all the errors at the top of a question page — users can see everything they need to fix at once
- allows users to click through to each error from the top of the page
How to use this component
Always show an error summary when there's a validation error, even if there is only one.
Linking from the error summary to each answer
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 textarea or text input — you must link to the field
- answer using multiple fields, such as the day, month and year fields for a date question — link to the first field that contains an error (if you do not know which field contains an error, link to the first field)
- select one or more options from a list using radios or checkboxes — link to the first radio or checkbox
Where to put the error summary
Place the error summary at the top of the main page content. It should sit above the page header but below breadcrumbs or back links.
The placement of the error summary is the same whether the question page has a single question or multiple questions.
Sample HTML for Error summary position on a single question page
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Who can apply for Adult Disability Payment'</a>
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__header">
<div class="ds_error-summary" id="error-summary" aria-labelledby="error-summary-title" role="alert">
<h2 class="ds_error-summary__title" id="error-summary-title">There is a problem</h2>
<ul class="ds_error-summary__list">
<li>
<a href="#answer-1">Are you a British citizen? Select one of the options</a>
</li>
</ul>
</div>
</div>
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question ds_question--error">
<fieldset aria-describedby="unique-id-error">
<legend class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Check if you qualify for Adult Disability Payment</span>
<h1 class="ds_page-header__title">
Are you a British citizen?
</h1>
</legend>
<p class="ds_question__error-message" id="unique-id-error"><span class="visually-hidden">Error:</span> Select one of the options</p>
<div class="ds_field-group">
<div class="ds_radio">
<input class="ds_radio__input" id="answer-1" type="radio" name="answer" value="yes">
<label class="ds_radio__label" for="answer-1">Yes</label>
</div>
<div class="ds_radio">
<input class="ds_radio__input" id="answer-2" type="radio" name="answer" value="no">
<label class="ds_radio__label" for="answer-2">No</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="ds_form__actions">
<button class="ds_button" type="button">Continue</button>
</div>
</form>
</div>
<div class="ds_layout__footer">
<div class="ds_!_margin-top--4">
<h2>Your answers</h2>
<p><button class="ds_link" type="button">Clear answers and start again</button></p>
<ol class="ds_summary-list">
<li class="ds_summary-list__item"><span class="ds_summary-list__key" id="q1">Do you live in Scotland?</span> <span class="ds_summary-list__value"><q class="ds_summary-list__answer">Yes</q></span>
<div class="ds_summary-list__actions">
<button class="ds_link" aria-describedby="q1" type="button">Change</button>
</div>
</li>
</ol>
</div>
</div>
</main>
</div>Sample HTML for Error summary position on a multiple question page
<div class="ds_wrapper">
<a class="ds_back-link" href="#">Back to 'Create a tenancy agreement'</a>
<main id="main-content" class="ds_layout ds_layout--question-page">
<div class="ds_layout__header">
<div class="ds_error-summary" id="error-summary" aria-labelledby="error-summary-title" role="alert">
<h2 class="ds_error-summary__title" id="error-summary-title">There is a problem</h2>
<ul class="ds_error-summary__list">
<li>
<a href="#unique-id">How much is the first rent payment? Enter an amount</a>
</li>
<li>
<a href="#start-date">When will your tenant make the first payment? Enter a date</a>
</li>
<li>
<a href="#end-date">The first payment covers rent from the start date of the tenancy until: Enter a date</a>
</li>
</ul>
</div>
<header class="ds_page-header">
<span class="ds_page-header__label ds_content-label">Section 2: About the tenancy</span>
<h1 class="ds_page-header__title">
First rent payment
</h1>
</header>
</div>
<div class="ds_layout__content">
<form class="ds_form">
<div class="ds_form__content">
<div class="ds_question ds_question--error">
<label class="ds_label" for="unique-id">How much is the first rent payment?</label>
<p class="ds_hint-text" id="unique-id-hint">This does not include the deposit</p>
<p class="ds_question__error-message" id="unique-id-error"><span class="visually-hidden">Error:</span> Enter an amount</p>
<div class="ds_currency-wrapper">
<input aria-invalid="true" class="ds_input ds_input--fixed-10 ds_input--error" type="text" id="unique-id" name="unique-id" aria-describedby="unique-id-hint unique-id-error">
</div>
</div>
<div data-module="ds-datepicker" class="ds_question ds_datepicker ds_question--error">
<label class="ds_label" for="start-date">When will your tenant make the first payment?</label>
<p class="ds_hint-text" id="unique-id2-hint">Use DD/MM/YYYY format</p>
<p class="ds_question__error-message" id="unique-id2-error"><span class="visually-hidden">Error:</span> Enter a date</p>
<div class="ds_input__wrapper">
<input aria-invalid="true" id="start-date" name="start-date" type="text" class="ds_input ds_input--fixed-10 ds_input--error" aria-describedby="unique-id2-hint unique-id2-error">
</div>
</div>
<div data-module="ds-datepicker" class="ds_question ds_datepicker ds_question--error">
<label class="ds_label" for="end-date">The first payment covers rent from the start date of the tenancy until</label>
<p class="ds_hint-text" id="unique-id3-hint">Use DD/MM/YYYY format</p>
<p class="ds_question__error-message" id="unique-id3-error"><span class="visually-hidden">Error:</span> Enter a date</p>
<div class="ds_input__wrapper">
<input aria-invalid="true" id="end-date" name="end-date" type="text" class="ds_input ds_input--fixed-10 ds_input--error" aria-describedby="unique-id3-hint unique-id3-error">
</div>
</div>
</div>
<div class="ds_form__actions">
<div class="ds_button-group">
<button class="ds_button ds_button--secondary" type="button">Back</button>
<button class="ds_button" type="button">Continue</button>
</div>
</div>
</form>
</div>
</main>
</div>Evidence
We based our design of the error summary on the GOV.UK approach. We've tested this component and have found it works well with users.
Research showed users:
- understood what went wrong
- knew how to fix the problem and carry on
- were able to recover from the error
Related components
Website analytics
You can track the incidence of error summaries through the original page path, the error text and a data attribute showing the type of error.
The Design System’s ‘tracking’ script adds this data attribute.