Error summary
Sample HTML
<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
Error summary is used along with Error message to let users know when they’ve made any errors in a form and how to fix them.
Error messages appear next to single fields throughout the page. But error summary summarises all the errors at the top, so that a user can get a simple list view.
Error summary also allows users to click through to each single error from the top of the page.
Why we use this component
Our design of error summary is based on the 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
Components related to this
Website analytics
To understand the incidence of validation error messages, they can be tracked through the original page path, the error text, and a data attribute showing the type of error.
The data attribute is added automatically by the Design System’s ‘tracking’ script.
Live example
Apply to Rent Service Scotland about your rent increase (mygov.scot)
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback