Error summary

These examples are used for automated tests and may not follow service manual best practice.

Error summary default

Open this example in a new tab: Error summary default

There is a problem

Describe the errors and how to correct them

Date of birth must be in the past

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <p>
        Describe the errors and how to correct them
      </p>
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          <a href="#example-day">Date of birth must be in the past</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "error-summary/macro.njk" import errorSummary -%}

{{ errorSummary({
  titleText: "There is a problem",
  descriptionText: "Describe the errors and how to correct them",
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with multiple errors

Open this example in a new tab: Error summary with multiple errors

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          <a href="#example-first-name">Enter your first name</a>
        </li>
        <li>
          <a href="#example-last-name">Enter your last name</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "error-summary/macro.njk" import errorSummary -%}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Enter your first name",
      href: "#example-first-name"
    },
    {
      text: "Enter your last name",
      href: "#example-last-name"
    }
  ]
}) }}

Error summary with multiple errors (empty items)

Open this example in a new tab: Error summary with multiple errors (empty items)

There is a problem

Enter your first name

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          <a href="#example-first-name">Enter your first name</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "error-summary/macro.njk" import errorSummary -%}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Enter your first name",
      href: "#example-first-name"
    },
    false
  ]
}) }}

Error summary without description

Open this example in a new tab: Error summary without description

There is a problem

Date of birth must be in the past

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          <a href="#example-day">Date of birth must be in the past</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

{% from "error-summary/macro.njk" import errorSummary -%}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary without error list

Open this example in a new tab: Error summary without error list

There is a problem

Describe the errors and how to correct them

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__title">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <p>
        Describe the errors and how to correct them
      </p>
    </div>
  </div>
</div>

Macro

{% from "error-summary/macro.njk" import errorSummary -%}

{{ errorSummary({
  titleText: "There is a problem",
  descriptionText: "Describe the errors and how to correct them"
}) }}