Error summary

The Error summary component highlights validation issues at the top of a page, helping users quickly understand what went wrong and how to fix it.

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

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

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

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

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

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

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

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

{{ aspErrorSummary({
  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: "#"
    }
  ]
}) }}

When to use this component

Use the Error summary whenever a user submits a page with validation errors.

You must display an error summary even if there is only a single error on the page.

When not to use this component

Do not use the Error summary 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.
• Whether real-time validation patterns may lower the likelihood of errors being made in the first place.
• Whether 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

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.

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 13 November 2025