This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Error summary

Error summary

Code

Markup

<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="#example-error-1">The date your passport was issued must be in the past</a>
          </li>
          <li>
            <a href="#example-error-2">Enter a postcode, like AA1 1AA</a>
          </li>
        </ul>
    </div>
  </div>
</div>

Macro

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

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "The date your passport was issued must be in the past",
      href: "#example-error-1"
    },
    {
      text: "Enter a postcode, like AA1 1AA",
      href: "#example-error-2"
    }
  ]
}) }}
Code

Markup

<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>
            Invalid username or password
          </li>
        </ul>
    </div>
  </div>
</div>

Macro

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

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Invalid username or password"
    }
  ]
}) }}
Code

Markup

<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>
            Invalid username or password
          </li>
          <li>
            <a href="#example-error-1">Agree to the terms of service to log in</a>
          </li>
        </ul>
    </div>
  </div>
</div>

Macro

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

{{ govukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Invalid username or password"
    },
    {
      text: "Agree to the terms of service to log in",
      href: "#example-error-1"
    }
  ]
}) }}
Code

Markup

<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">
      <p>
        The file couldn&#39;t be loaded. Try again later.
      </p>
    </div>
  </div>
</div>

Macro

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

{{ govukErrorSummary({
  titleText: "There is a problem",
  descriptionText: "The file couldn't be loaded. Try again later."
}) }}
Code

Markup

<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">
      <p>
        Please fix the errors below.
      </p>
        <ul class="govuk-list govuk-error-summary__list">
          <li>
            Invalid username or password
          </li>
          <li>
            <a href="#example-error-1">Agree to the terms of service to log in</a>
          </li>
        </ul>
    </div>
  </div>
</div>

Macro

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

{{ govukErrorSummary({
  titleText: "There is a problem",
  descriptionText: "Please fix the errors below.",
  errorList: [
    {
      text: "Invalid username or password"
    },
    {
      text: "Agree to the terms of service to log in",
      href: "#example-error-1"
    }
  ]
}) }}