Error summary

Error summary

Open this example in a new tab

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

Error summary without links

Open this example in a new tab

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

Error summary mixed with and without links

Open this example in a new tab

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 everything

Open this example in a new tab

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