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

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

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"
    }
  ]
}) }}

Error summary with description only

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."
}) }}

Error summary with everything

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"
    }
  ]
}) }}