Error summary

<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

Error message

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)