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

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__heading">
      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({
  heading: {
    text: "There is a problem"
  },
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with description

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

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__heading">
      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({
  heading: {
    text: "There is a problem"
  },
  description: {
    text: "Describe the errors and how to correct them"
  },
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with description as string

Open this example in a new tab: Error summary with description as string

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__heading">
      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({
  heading: {
    text: "There is a problem"
  },
  description: "Describe the errors and how to correct them",
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with description HTML

Open this example in a new tab: Error summary with description HTML

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__heading">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <p>
        Describe the errors and <span>how to correct them</span>
      </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({
  heading: {
    text: "There is a problem"
  },
  description: {
    html: "Describe the errors and <span>how to correct them</span>"
  },
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with description only

Open this example in a new tab: Error summary with description only

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__heading">
      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({
  heading: {
    text: "There is a problem"
  },
  description: {
    text: "Describe the errors and how to correct them"
  }
}) }}

Error summary with description via call block

Open this example in a new tab: Error summary with description via call block

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__heading">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <p>
Describe the errors and <span>how to correct them</span>
      </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 -%}

{% call errorSummary({
  heading: {
    text: "There is a problem"
  },
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) %}
Describe the errors and <span>how to correct them</span>
{%- endcall %}

Error summary with heading as string

Open this example in a new tab: Error summary with heading as string

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__heading">
      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({
  heading: "There is a problem",
  errorList: [
    {
      text: "Date of birth must be in the past",
      href: "#example-day"
    }
  ]
}) }}

Error summary with heading HTML

Open this example in a new tab: Error summary with heading HTML

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__heading">
      There is a <span>problem</span>
    </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({
  heading: {
    html: "There is a <span>problem</span>"
  },
  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__heading">
      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({
  heading: {
    text: "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__heading">
      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({
  heading: {
    text: "There is a problem"
  },
  errorList: [
    {
      text: "Enter your first name",
      href: "#example-first-name"
    },
    false
  ]
}) }}

Error summary without error link

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

There is a problem

Invalid username or password

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__heading">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          Invalid username or password
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

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

{{ errorSummary({
  heading: {
    text: "There is a problem"
  },
  errorList: [
    {
      text: "Invalid username or password"
    }
  ]
}) }}

Error summary without error link (mixed)

Open this example in a new tab: Error summary without error link (mixed)

There is a problem

Invalid username or password
Agree to the terms of service to log in

Code

Markup

<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
  <div role="alert">
    <h2 class="nhsuk-error-summary__heading">
      There is a problem
    </h2>
    <div class="nhsuk-error-summary__body">
      <ul class="nhsuk-list nhsuk-error-summary__list">
        <li>
          Invalid username or password
        </li>
        <li>
          <a href="#example-terms-of-service">
            Agree to the terms of service to log in
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

Macro

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

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

Internal review app NHS.UK frontend

Error summary

Error summary default

There is a problem

Markup

Macro

Error summary with description

There is a problem

Markup

Macro

Error summary with description as string

There is a problem

Markup

Macro

Error summary with description HTML

There is a problem

Markup

Macro

Error summary with description only

There is a problem

Markup

Macro

Error summary with description via call block

There is a problem

Markup

Macro

Error summary with heading as string

There is a problem

Markup

Macro

Error summary with heading HTML

There is a problem

Markup

Macro

Error summary with multiple errors

There is a problem

Markup

Macro

Error summary with multiple errors (empty items)

There is a problem

Markup

Macro

Error summary without error link

There is a problem

Markup

Macro

Error summary without error link (mixed)

There is a problem

Markup

Macro