GOVUK Error summary

An example of the govuk error summary component.

Open example in new window

HTML

<div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
  <h2 class="govuk-error-summary__title" id="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="#passport-issued-error">The date your passport was issued must be in the past</a>

      </li>

      <li>

        <a href="#postcode-error">Enter a postcode, like AA1 1AA</a>

      </li>

    </ul>
  </div>
</div>

Jinja

{% from "govuk_frontend_jinja/components/error-summary/macro.html" import govukErrorSummary -%}
{{ govukErrorSummary({
    "titleText": "There is a problem",
    "errorList": [
      {
        "text": "The date your passport was issued must be in the past",
        "href": "#passport-issued-error"
      },
      {
        "text": "Enter a postcode, like AA1 1AA",
        "href": "#postcode-error"
      }
    ]
}) }}

---

Help improve this page

If you’ve got a question, idea or suggestion share it with the digital land team on github or email us on digitalland@communities.gov.uk