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

Open this example in a new window

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, however we have been 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

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. For example, data-form="error-postcode".

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top