Skip to main content Skip to list of components
Service phase: Beta

This is a new service – give us your feedback to help improve it.

Components

Error summary

Summarise form errors on the page and provide links to help users complete them.

Contents

  1. Component status
  2. How it works
Open this example in new tab

HTML 

<div class="tna-error-summary" data-module="tna-error-summary" data-disable-autofocus="true">
  <div role="alert">
    <h2 class="tna-error-summary__heading tna-heading-m">
      There is a problem
    </h2>
    <ul class="tna-error-summary__list">
      <li class="tna-error-summary__item">
        <a href="#" class="tna-error-summary__link">Enter your full name</a>
      </li>
      <li class="tna-error-summary__item">
        <a href="#" class="tna-error-summary__link">The date of the record cannot be in the future</a>
      </li>
    </ul>
  </div>
</div>

Nunjucks

Nunjucks options
Primary options
Name Type Description
title string

The title text for the error summary.

Default value: There is a problem
headingLevel number

The heading level which represents an element from <h1> through to <h6>.

Default value: 2
items array

Required.

The list of items to display in the error summary.

See macro options for items.
disableAutoFocus boolean

If true, disables the automatic focusing of the error summary when the page loads.
classes string

Classes to add to the error summary.
attributes object

HTML attributes (for example data attributes) to add to the error summary.
Options for items
Name Type Description
text string

Required.

The error message text.
href string

The ID of the form field related to this error message. (Requires a # prefix.)

 
{% from "nationalarchives/components/error-summary/macro.njk" import tnaErrorSummary %}

{{ tnaErrorSummary({
  title: "There is a problem",
  headingLevel: 2,
  items: [
    {
      text: "Enter your full name",
      href: "#"
    },
    {
      text: "The date of the record cannot be in the future",
      href: "#"
    }
  ],
  disableAutoFocus: true
}) }}

Jinja

Important information

This is an experimental feature that outputs a Jinja template based on the Nunjucks example. Check the converted code for accuracy. 
{% from "components/error-summary/macro.html" import tnaErrorSummary %}

{{ tnaErrorSummary({
  "title": "There is a problem",
  "headingLevel": 2,
  "items": [
    {
      "text": "Enter your full name",
      "href": "#"
    },
    {
      "text": "The date of the record cannot be in the future",
      "href": "#"
    }
  ],
  "disableAutoFocus": true
}) }}

Component status

Phase
To be reviewed
Tested without JavaScript
Yes
Tested without CSS
Yes
Passed DAC audit
Not yet audied
Documentation complete
No

How it works

Add links to all the form issues in the order in which they appear on the page.

When linking to checkboxes, radios and date input fields, add the ID of the first field in the list such as the first checkbox, the first radio item or the day field of the date input.

Take a look at the example form with errors.

Back to top