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

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 of 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 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

How to use this component

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.

Related components

Error message

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.

Live example

Apply to Rent Service Scotland about your rent increase (mygov.scot)