Components menu
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.
About this component
Use an error summary to let users know when they’ve made any errors in a form and how to fix them.
An error summary summarises all the errors at the top or a page. Users can see everything they need to fix at once.
Error summary also allows users to click through to each single error from the top of the page.
Why we use this component
We based our design of the error summary on the Scottish Government and GOV.UK approach. We have 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
HTML
<div class="error--summary" aria-labelledby="error--summary-title" role="alert">
<h2 class="error--summary-title">There is a problem</h2>
<ul class="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>
CSS
/* Error summary
------------------------------------ */
.error--summary {
border: 4px solid var(--error-red);
padding: 20px 28px;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.error--summary-title {
margin-top: 0;
color: #000000;
}
.error--summary-list {
color: var(--error-red);
font-weight: 700;
list-style-type: none;
margin-left: 0;
}
.error--summary > :last-child {
margin-bottom: 0;
}
.error--summary-list li {
margin-left: 0;
}
.error--summary-list a {
color: var(--error-red);
}
.error--summary-list a:hover {
color: #000000;
}
.error--summary-list a:focus {
color: #000000;
}