Error summary

The error summary component explains validation issues clearly at the top of a page, helping users quickly understand what caused the errors in a form submission and how to fix them. 

The component appears when a user submits a form, or a page from a form, containing one or more errors. 

The error summary component provides essential accessibility support for users who rely on assistive technologies. It ensures that errors are announced, visible and easy to navigate back to.

<div class="asp-error-summary" role="group">
  <h2 class="asp-error-summary__title" id="form-errors">Please fix the following issue before continuing</h2>
  <ul aria-labelledby="form-errors">
    <li><a href="#">First name is required</a></li>
  </ul>
</div>

{
  "type": "error-summary",
  "params": {
    "rows": [
      {
        "text": "First name is required",
        "href": "#"
      }
    ]
  }
}

{% from "components/error-summary/macro.njk" import aspErrorSummary %}

{{ aspErrorSummary({
  rows: [
    {
      text: "First name is required",
      href: "#"
    }
  ]
}) }}

{% from "@asp-frontend/components/error-summary/macro.twig" import aspErrorSummary %}

{{ aspErrorSummary({
  rows: [
    {
      text: "First name is required",
      href: "#"
    }
  ]
}) }}

<div class="asp-error-summary" role="group">
  <h2 class="asp-error-summary__title" id="form-errors">Please fix the following issues before continuing</h2>
  <ul aria-labelledby="form-errors">
    <li><a href="#">First name is required</a></li>
    <li><a href="#">Last name is required</a></li>
  </ul>
</div>

{
  "type": "error-summary",
  "params": {
    "rows": [
      {
        "text": "First name is required",
        "href": "#"
      },
      {
        "text": "Last name is required",
        "href": "#"
      }
    ]
  }
}

{% from "components/error-summary/macro.njk" import aspErrorSummary %}

{{ aspErrorSummary({
  rows: [
    {
      text: "First name is required",
      href: "#"
    },
    {
      text: "Last name is required",
      href: "#"
    }
  ]
}) }}

{% from "@asp-frontend/components/error-summary/macro.twig" import aspErrorSummary %}

{{ aspErrorSummary({
  rows: [
    {
      text: "First name is required",
      href: "#"
    },
    {
      text: "Last name is required",
      href: "#"
    }
  ]
}) }}

When to use this component

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

When not to use this component

Do not use the error summary component if the user has not yet interacted with the page or if no validation errors are present. 

Before using this component, consider whether: 

• the issue can be prevented by improving instructions or hint text 
• real-time validation patterns may lower the likelihood of errors being made in the first place 
• technical constraints make it difficult to link errors to their corresponding inputs, as all error summary items must be linked

The error summary provides essential accessibility support for users who rely on assistive technologies. It ensures that errors are announced, visible and easy to navigate back to.

The preferred approach is to prevent errors before they occur, but where validation is required, always use the Error summary to clearly surface problems.

Linking from the error summary to each answer

WIP -- Because the error message is used as link text in the error summary, it must make sense when read or encountered on its own. Screen readers may announce the message as the link text, for example: “First name is required, link”. Therefore the error message should make sense when read as link text, contain no links, not rely on line breaks or additional visual formatting to convey meaning.

Every error listed in the summary must link directly to its relevant field.

For questions with a single input -- such as file upload, select, textarea, text input or character count -- link directly to the field itself.

This ensures users can navigate quickly to each error and understand what needs to be corrected.

Example of where we have used this component

This component is used on:

• Formation

This list is not exhaustive.

Technical notes

The error summary provides essential accessibility support for users who rely on assistive technologies. It ensures that errors are announced, visible and easy to navigate back to. 

The preferred approach is to prevent errors before they occur, but where validation is required, always use the error summary component to clearly surface problems. 

If a form is submitted with validation errors, input preservation ensures that all user‑entered data remains in the form fields after the page reloads. This means that if a required field was previously filled but the user removes its value, the field will remain blank on subsequent submissions until the user enters new data.  

This allows users to freely add, edit, or delete their input without losing their progress each time the form reloads. 

This component can be used in dark mode.   

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.

Published 13 November 2025
Last updated 18 August 2026