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.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "6915ea608bd6b" }) }} {{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "multiple-errors", id: "6915ea608bddd" }) }}

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:

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:

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.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="asp-status asp-status–yellow">In progress</span>'}
]
}
]
}) }}