Error summary

Include an error summary at the top of a page to summarise any mistakes a user has made.

Code and design

Open in new window
Copy
<div class="nhsuk-error-summary" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
  <h2 class="nhsuk-error-summary__title" id="error-summary-title">
    There is a problem
  </h2>
  <div class="nhsuk-error-summary__body">
    <p>
      Describe the errors and how to correct them
    </p>
    <ul class="nhsuk-list nhsuk-error-summary__list">
      <li>
        <a href="#example-error-1">Date of birth must be in the past</a>
      </li>
      <li>
        <a href="#example-error-1">Enter a postcode, like AA1 1AA</a>
      </li>
    </ul>
  </div>
</div>
Copy
{% from 'error-summary/macro.njk' import errorSummary %}

{{ errorSummary({
  "titleText": "There is a problem",
  "descriptionText": "Describe the errors and how to correct them",
  "errorList": [
    {
      "text": "Date of birth must be in the past",
      "href": "#example-error-1"
    },
    {
      "text": "Enter a postcode, like AA1 1AA",
      "href": "#example-error-1"
    }
  ]
}) }}

When to use an error summary

When a user makes a mistake, you must show an error summary at the top of the page as well as an error message next to each answer that contains an error.

Always show an error summary when there is a validation error, even if there’s only 1 mistake.

How to use an error summary

You must:

  • add "Error: " to the beginning of the <title> so screen readers read it out as soon as possible
  • show an error summary at the top of a page
  • move the keyboard focus to the error summary
  • include the heading "There is a problem"
  • link to each of the answers that have validation errors
  • show the same error messages next to the inputs with errors

Follow GOV.UK design system guidance on:

Research

GOV.UK research on error summaries showed users:

  • understood what went wrong
  • knew how to fix the problem
  • were able to recover from the error

Discuss

Discuss error summaries on GitHub

Get in touch

If you have a question:

Updated: February 2019