Error summary

Standard

Default

The default error summary lists validation errors and links to each field.

There is a problem

The date your passport was issued must be in the past
Enter a postcode, like AA1 1AA

Show code

HTML
Astro
React
Svelte
Solid

<div class="govuk-error-summary" data-module="govuk-error-summary">
  <div role="alert">
    <h2 class="govuk-error-summary__title">There is a problem</h2>
    <div class="govuk-error-summary__body">
      <ul class="govuk-list govuk-error-summary__list">
        <li>
          <a href="#ex-1">
            The date your passport was issued must be in the past
          </a>
        </li>
        <li>
          <a href="#ex-2">
            Enter a postcode, like AA1 1AA
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

---
import { ErrorSummary, ErrorSummaryTitle, ErrorSummaryBody, ErrorSummaryList, ErrorSummaryItem } from "@i-dot-ai-npm/component-library-astro";
---

<ErrorSummary>
  <ErrorSummaryTitle>There is a problem</ErrorSummaryTitle>
  <ErrorSummaryBody>
    <ErrorSummaryList>
      <ErrorSummaryItem href="#ex-1">
        The date your passport was issued must be in the past
      </ErrorSummaryItem>
      <ErrorSummaryItem href="#ex-2">
        Enter a postcode, like AA1 1AA
      </ErrorSummaryItem>
    </ErrorSummaryList>
  </ErrorSummaryBody>
</ErrorSummary>

import { ErrorSummary, ErrorSummaryTitle, ErrorSummaryBody, ErrorSummaryList, ErrorSummaryItem } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ErrorSummary>
      <ErrorSummaryTitle>There is a problem</ErrorSummaryTitle>
      <ErrorSummaryBody>
        <ErrorSummaryList>
          <ErrorSummaryItem href="#ex-1">
            The date your passport was issued must be in the past
          </ErrorSummaryItem>
          <ErrorSummaryItem href="#ex-2">
            Enter a postcode, like AA1 1AA
          </ErrorSummaryItem>
        </ErrorSummaryList>
      </ErrorSummaryBody>
    </ErrorSummary>
  );
}

<script>
  import { ErrorSummary, ErrorSummaryTitle, ErrorSummaryBody, ErrorSummaryList, ErrorSummaryItem } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ErrorSummary>
  <ErrorSummaryTitle>There is a problem</ErrorSummaryTitle>
  <ErrorSummaryBody>
    <ErrorSummaryList>
      <ErrorSummaryItem href="#ex-1">
        The date your passport was issued must be in the past
      </ErrorSummaryItem>
      <ErrorSummaryItem href="#ex-2">
        Enter a postcode, like AA1 1AA
      </ErrorSummaryItem>
    </ErrorSummaryList>
  </ErrorSummaryBody>
</ErrorSummary>

import { ErrorSummary, ErrorSummaryTitle, ErrorSummaryBody, ErrorSummaryList, ErrorSummaryItem } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ErrorSummary>
      <ErrorSummaryTitle>There is a problem</ErrorSummaryTitle>
      <ErrorSummaryBody>
        <ErrorSummaryList>
          <ErrorSummaryItem href="#ex-1">
            The date your passport was issued must be in the past
          </ErrorSummaryItem>
          <ErrorSummaryItem href="#ex-2">
            Enter a postcode, like AA1 1AA
          </ErrorSummaryItem>
        </ErrorSummaryList>
      </ErrorSummaryBody>
    </ErrorSummary>
  );
}

When to use this component

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