Skip to main content

Form elements – Error summary

Include an error summary at the top of a page to summarise any mistakes a user has made.

Open this example in a new tab: error summary 
<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-error-1">Date of birth must be in the past</a>
        </li>
      </ul>
    </div>
  </div>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the error summary.
titleText string Required. If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
titleHtml string Required. If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
descriptionText string Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
descriptionHtml string HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
errorList array A list of errors to include in the error summary. See macro options for errorList.
disableAutoFocus boolean Prevent moving focus to the error summary when the page loads.
classes string Classes to add to the error-summary container.
attributes object HTML attributes (for example data attributes) to add to the error-summary container.
Options for errorList array objects
Name Type Description
href string The href attribute for the error link item. If provided item will be an anchor.
text string Required. If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the error link anchor. 
{% 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-error-1"
    }
  ]
}) }}

When to use an error summary

When a user makes a mistake, you must show an error summary at the top of the page as well as an error message next to each answer that contains an error.

Always show an error summary when there is a validation error, even if there’s only 1 mistake.

How to use an error summary

You must:

  • add "Error: " to the beginning of the <title> so screen readers read it out as soon as possible
  • show an error summary at the top of a page
  • move the keyboard focus to the error summary (the NHS.UK frontend JavaScript will do this for you)
  • include the heading "There is a problem"
  • link to each of the answers that have validation errors
  • show the same error messages next to the inputs with errors

Follow GOV.UK Design System guidance on writing good error messages.

Linking from the error summary to each answer

You must link the errors in the error summary to the answer they relate to.

For questions that require a user to answer using a single field, like a select, textarea or text input, link to the field.

Open this example in a new tab: error summary link input 
<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="#name">Enter your full name</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<h1 class="nhsuk-heading-l">Your details</h1>

<div class="nhsuk-form-group nhsuk-form-group--error">
  <label class="nhsuk-label" for="name">
    Full name
  </label>
  <span class="nhsuk-error-message" id="name-error">
    <span class="nhsuk-u-visually-hidden">Error:</span> Enter your full name
  </span>
  <input class="nhsuk-input nhsuk-input--error" id="name" name="name" type="text" aria-describedby="name-error">
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the error summary.
titleText string Required. If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
titleHtml string Required. If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
descriptionText string Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
descriptionHtml string HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
errorList array A list of errors to include in the error summary. See macro options for errorList.
disableAutoFocus boolean Prevent moving focus to the error summary when the page loads.
classes string Classes to add to the error-summary container.
attributes object HTML attributes (for example data attributes) to add to the error-summary container.
Options for errorList array objects
Name Type Description
href string The href attribute for the error link item. If provided item will be an anchor.
text string Required. If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the error link anchor. 
{% from "error-summary/macro.njk" import errorSummary %}
{% from "input/macro.njk" import input %}

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

<h1 class="nhsuk-heading-l">Your details</h1>

{{ input({
  label: {
    text: "Full name"
  },
  id: "name",
  name: "name",
  errorMessage: {
    text: "Enter your full name"
  }
}) }}

When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the 1st field that contains an error.

If you do not know which field contains an error, link to the 1st field.

Open this example in a new tab: error summary link multiple input 
<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="#dob-errors-year">Date of birth must include a year</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" role="group" aria-describedby="dob-errors-hint dob-errors-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        What is your date of birth?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="dob-errors-hint">
      For example, 15 3 1984
    </div>
    <span class="nhsuk-error-message" id="dob-errors-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a year
    </span>
    <div class="nhsuk-date-input" id="dob-errors">
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-day">
            Day
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-errors-day" name="day" type="text" value="15" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-month">
            Month
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-errors-month" name="month" type="text" value="3" inputmode="numeric">
        </div>
      </div>
      <div class="nhsuk-date-input__item">
        <div class="nhsuk-form-group">
          <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-year">
            Year
          </label>
          <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4 nhsuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
        </div>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the error summary.
titleText string Required. If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
titleHtml string Required. If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
descriptionText string Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
descriptionHtml string HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
errorList array A list of errors to include in the error summary. See macro options for errorList.
disableAutoFocus boolean Prevent moving focus to the error summary when the page loads.
classes string Classes to add to the error-summary container.
attributes object HTML attributes (for example data attributes) to add to the error-summary container.
Options for errorList array objects
Name Type Description
href string The href attribute for the error link item. If provided item will be an anchor.
text string Required. If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the error link anchor. 
{% from "error-summary/macro.njk" import errorSummary %}
{% from "date-input/macro.njk" import dateInput %}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Date of birth must include a year",
      href: "#dob-errors-year"
    }
  ]
}) }}

{{ dateInput({
  id: "dob-errors",
  fieldset: {
    legend: {
      text: "What is your date of birth?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "For example, 15 3 1984"
  },
  errorMessage: {
    text: "Date of birth must include a year"
  },
  items: [
    {
      name: "day",
      classes: "nhsuk-input--width-2",
      value: "15"
    },
    {
      name: "month",
      classes: "nhsuk-input--width-2",
      value: "3"
    },
    {
      name: "year",
      classes: "nhsuk-input--width-4 nhsuk-input--error"
    }
  ]
}) }}

For questions that require a user to select one or more options from a list using radios or checkboxes, link to the 1st radio or checkbox.

Open this example in a new tab: error summary link options 
<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="#contact">Select how you want to be contacted</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="nhsuk-form-group nhsuk-form-group--error">
  <fieldset class="nhsuk-fieldset" aria-describedby="contact-hint contact-error">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        How do you want to be contacted about this?
      </h1>
    </legend>
    <div class="nhsuk-hint" id="contact-hint">
      Select all options that are relevant to you
    </div>
    <span class="nhsuk-error-message" id="contact-error">
      <span class="nhsuk-u-visually-hidden">Error:</span> Select how you want to be contacted
    </span>
    <div class="nhsuk-checkboxes nhsuk-checkboxes--error" data-module="nhsuk-checkboxes">
      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact" name="contact" type="checkbox" value="email">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact">
          Email
        </label>
      </div>
      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-2">
          Phone
        </label>
      </div>
      <div class="nhsuk-checkboxes__item">
        <input class="nhsuk-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message">
        <label class="nhsuk-label nhsuk-checkboxes__label" for="contact-3">
          Text message
        </label>
      </div>
    </div>
  </fieldset>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the error summary.
titleText string Required. If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
titleHtml string Required. If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
descriptionText string Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
descriptionHtml string HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
errorList array A list of errors to include in the error summary. See macro options for errorList.
disableAutoFocus boolean Prevent moving focus to the error summary when the page loads.
classes string Classes to add to the error-summary container.
attributes object HTML attributes (for example data attributes) to add to the error-summary container.
Options for errorList array objects
Name Type Description
href string The href attribute for the error link item. If provided item will be an anchor.
text string Required. If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the error link anchor. 
{% from "error-summary/macro.njk" import errorSummary %}
{% from "checkboxes/macro.njk" import checkboxes %}

{{ errorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "Select how you want to be contacted",
      href: "#contact"
    }
  ]
}) }}

{{ checkboxes({
  idPrefix: "contact",
  name: "contact",
  fieldset: {
    legend: {
      text: "How do you want to be contacted about this?",
      size: "l",
      isPageHeading: true
    }
  },
  hint: {
    text: "Select all options that are relevant to you"
  },
  errorMessage: {
    text: "Select how you want to be contacted"
  },
  items: [
    {
      value: "email",
      text: "Email",
      id: "contact"
    },
    {
      value: "phone",
      text: "Phone"
    },
    {
      value: "text message",
      text: "Text message"
    }
  ]
}) }}

Where to put the error summary

Put the error summary at the top of the main container. If your page includes breadcrumbs or a back link, place it below these, but above the <h1>.

Open this example in a new tab: error summary placement 
<div class="nhsuk-width-container">
  <a class="nhsuk-back-link" href="#">
    Back
  </a>

  <main class="nhsuk-main-wrapper" id="maincontent">
    <div class="nhsuk-grid-row">
      <div class="nhsuk-grid-column-two-thirds">
        <form action="/form-handler" method="post" novalidate>

          <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="#dob-errors-year">Date of birth must include a year</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="nhsuk-form-group nhsuk-form-group--error">
            <fieldset class="nhsuk-fieldset" role="group" aria-describedby="dob-errors-hint dob-errors-error">
              <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
                <h1 class="nhsuk-fieldset__heading">
                  What is your date of birth?
                </h1>
              </legend>
              <div class="nhsuk-hint" id="dob-errors-hint">
                For example, 15 3 1984
              </div>
              <span class="nhsuk-error-message" id="dob-errors-error">
                <span class="nhsuk-u-visually-hidden">Error:</span> Date of birth must include a year
              </span>
              <div class="nhsuk-date-input" id="dob-errors">
                <div class="nhsuk-date-input__item">
                  <div class="nhsuk-form-group">
                    <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-day">
                      Day
                    </label>
                    <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-errors-day" name="day" type="text" value="15" inputmode="numeric">
                  </div>
                </div>
                <div class="nhsuk-date-input__item">
                  <div class="nhsuk-form-group">
                    <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-month">
                      Month
                    </label>
                    <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="dob-errors-month" name="month" type="text" value="3" inputmode="numeric">
                  </div>
                </div>
                <div class="nhsuk-date-input__item">
                  <div class="nhsuk-form-group">
                    <label class="nhsuk-label nhsuk-date-input__label" for="dob-errors-year">
                      Year
                    </label>
                    <input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4 nhsuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
                  </div>
                </div>
              </div>
            </fieldset>
          </div>

          <button class="nhsuk-button" data-module="nhsuk-button" type="submit">
            Continue
          </button>

        </form>
      </div>
    </div>
  </main>
</div>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work. These are marked as "Required" in the option description. Deprecated options are marked as "Deprecated".

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
id string The ID of the error summary.
titleText string Required. If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
titleHtml string Required. If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
descriptionText string Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
descriptionHtml string HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
caller nunjucks-block Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
errorList array A list of errors to include in the error summary. See macro options for errorList.
disableAutoFocus boolean Prevent moving focus to the error summary when the page loads.
classes string Classes to add to the error-summary container.
attributes object HTML attributes (for example data attributes) to add to the error-summary container.
Options for errorList array objects
Name Type Description
href string The href attribute for the error link item. If provided item will be an anchor.
text string Required. If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
html string Required. If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
attributes object HTML attributes (for example data attributes) to add to the error link anchor. 

{% from "back-link/macro.njk" import backLink %}
{% from "button/macro.njk" import button %}
{% from "date-input/macro.njk" import dateInput %}
{% from "error-summary/macro.njk" import errorSummary %}

{% block beforeContent %}
  {{ backLink({
    href: "#",
    text: "Back"
  }) }}
{% endblock %}

{% block content %}
  <div class="nhsuk-grid-row">
    <div class="nhsuk-grid-column-two-thirds">
      <form action="/form-handler" method="post" novalidate>

        {{ errorSummary({
          titleText: "There is a problem",
          errorList: [
            {
              text: "Date of birth must include a year",
              href: "#dob-errors-year"
            }
          ]
        }) }}

        {{ dateInput({
          id: "dob-errors",
          fieldset: {
            legend: {
              text: "What is your date of birth?",
              size: "l",
              isPageHeading: true
            }
          },
          hint: {
            text: "For example, 15 3 1984"
          },
          errorMessage: {
            text: "Date of birth must include a year"
          },
          items: [
            {
              name: "day",
              classes: "nhsuk-input--width-2",
              value: "15"
            },
            {
              name: "month",
              classes: "nhsuk-input--width-2",
              value: "3"
            },
            {
              name: "year",
              classes: "nhsuk-input--width-4 nhsuk-input--error"
            }
          ]
        }) }}

        {{ button({
          text: "Continue"
        }) }}

      </form>
    </div>
  </div>
{% endblock %}

Research

GOV.UK research on error summaries showed users:

  • understood what went wrong
  • knew how to fix the problem
  • were able to recover from the error

Help us improve this guidance

Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.

Feed back or share insights on GitHub

Read more about how to feed back or share insights.

If you have any questions, get in touch with the service manual team.

Updated: November 2025