Components

Error summary

Use this component at the top of a page to summarise any errors a user has made.

Open this error summary example in a new tab
HTML 
<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="#incorect-date-format"
            >The start date of the contract must include a year</a
          >
        </li>
        <li>
          <a href="#full-name-input">Enter your full name</a>
        </li>
      </ul>
    </div>
  </div>
</div>
Nunjucks
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.

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
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 Required.

The list of errors to include in the error summary.

See 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
Name Type Description
href string

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 "moduk/components/error-summary/macro.njk" import modukErrorSummary -%}

{{ modukErrorSummary({
  titleText: "There is a problem",
  errorList: [
    {
      text: "The start date of the contract must include a year",
      href: "#incorect-date-format"
    },
    {
      text: "Enter your full name",
      href: "#full-name-input"
    }
  ]
}) -}}

See GOV.UK error summary component guidance for:

  • when to use this component
  • how it works

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.