Skip to main content Skip to list of components
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. Status
Open this example in new tab

HTML 

<div class="tna-error-summary" data-module="tna-error-summary" data-disableautofocus="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

Required.

headingLevel number

Required.

items array

Required.

See items.
disableAutoFocus boolean
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.

href string

Required. 

{% 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
}) }}

Status

Status
In development
Tested without JavaScript
In development
Tested without CSS
In development
WCAG 2.2 AA compliant
In development
Analytics integrated
In development
Documentation complete
No

Back to top