<divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#passport-issued-day">The date your passport was issued must be in the past</a></li><li><ahref="#postcode-input">Enter a postcode, like AA1 1AA</a></li></ul></div></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-error-summary-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-error-summary-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-error-summary-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "The date your passport was issued must be in the past",
href: "#passport-issued-day"
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#postcode-input"
}
]
}) }}
When to use this component
Always show an error summary when there is a validation error, even if there’s only one.
How it works
You must:
move keyboard focus to the error summary
include the heading ‘There is a problem’
link to each of the answers that have validation errors
make sure the error messages in the error summary are worded the same as those which appear next to the inputs with errors
As well as showing an error summary, follow the validation pattern - for example, by adding ‘Error: ’ to the beginning of the page <title> so screen readers read it out as soon as possible.
There are 2 ways to use the error summary component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.
<divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#passport-issued-day">The date your passport was issued must be in the past</a></li><li><ahref="#postcode-input">Enter a postcode, like AA1 1AA</a></li></ul></div></div></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-error-summary-second-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-error-summary-second-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-error-summary-second-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "The date your passport was issued must be in the past",
href: "#passport-issued-day"
},
{
text: "Enter a postcode, like AA1 1AA",
href: "#postcode-input"
}
]
}) }}
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 file upload, select, textarea, text input or character count, link to the field.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/error-summary/linking/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">linking from the error summary to an answer that uses a single field</span>
example in a new tab
</a>
</div>
<iframe title="Linking from the error summary to an answer that uses a single field example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/linking/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-html" role="tab" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-nunjucks" role="tab" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-html" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-error-summary"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-error-summary"</span>></span>
<divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#full-name-input">Enter your full name</a></li></ul></div></div></div><h1class="govuk-heading-l">Your details</h1><divclass="govuk-form-group govuk-form-group--error"><labelclass="govuk-label"for="full-name-input">
Full name
</label><pid="full-name-input-error"class="govuk-error-message"><spanclass="govuk-visually-hidden">Error:</span> Enter your full name
</p><inputclass="govuk-input govuk-input--error"id="full-name-input"name="name"type="text"aria-describedby="full-name-input-error"autocomplete="name"></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>
{% from"govuk/components/input/macro.njk"import govukInput %}
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Enter your full name",
href: "#full-name-input"
}
]
}) }}
<h1 class="govuk-heading-l">Your details</h1>
{{ govukInput({
label: {
text: 'Full name'
},
id: "full-name-input",
name: "name",
autocomplete: "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 first field that contains an error.
If you do not know which field contains an error, link to the first field.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/error-summary/linking-multiple-fields/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">linking from the error summary to an answer that uses multiple fields</span>
example in a new tab
</a>
</div>
<iframe title="Linking from the error summary to an answer that uses multiple fields example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/linking-multiple-fields/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-html" role="tab" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-nunjucks" role="tab" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-html" aria-controls="linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-error-summary"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-error-summary"</span>></span>
<divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#passport-issued-year">Passport issue date must include a year</a></li></ul></div></div></div><divclass="govuk-form-group govuk-form-group--error"><fieldsetclass="govuk-fieldset"role="group"aria-describedby="passport-issued-error"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
When was your passport issued?
</h1></legend><pid="passport-issued-error"class="govuk-error-message"><spanclass="govuk-visually-hidden">Error:</span> Passport issue date must include a year
</p><divclass="govuk-date-input"id="passport-issued"><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-day">
Day
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="passport-issued-day"name="passport-issued-day"type="text"value="5"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-month">
Month
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="passport-issued-month"name="passport-issued-month"type="text"value="12"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-year">
Year
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"id="passport-issued-year"name="passport-issued-year"type="text"inputmode="numeric"></div></div></div></fieldset></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>
{% from"govuk/components/error-summary/macro.njk"import govukErrorSummary %}
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Passport issue date must include a year",
href: "#passport-issued-year"
}
]
}) }}
{{ govukDateInput({
fieldset: {
legend: {
isPageHeading: true,
text: 'When was your passport issued?',
classes: 'govuk-fieldset__legend--l'
}
},
id: 'passport-issued',
namePrefix: 'passport-issued',
errorMessage: {
text: "Passport issue date must include a year"
},
items: [
{
name: "day",
classes: "govuk-input--width-2",
value: 5
},
{
name: "month",
classes: "govuk-input--width-2",
value: 12
},
{
name: "year",
classes: "govuk-input--width-4 govuk-input--error"
}
]
})
}}
For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/components/error-summary/linking-checkboxes-radios/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">linking from the error summary to checkboxes</span>
example in a new tab
</a>
</div>
<iframe title="Linking from the error summary to checkboxes example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/linking-checkboxes-radios/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-linking-from-the-error-summary-to-checkboxes-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-checkboxes-example-html" role="tab" aria-controls="linking-from-the-error-summary-to-checkboxes-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#linking-from-the-error-summary-to-checkboxes-example-nunjucks" role="tab" aria-controls="linking-from-the-error-summary-to-checkboxes-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#linking-from-the-error-summary-to-checkboxes-example-html" aria-controls="linking-from-the-error-summary-to-checkboxes-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="linking-from-the-error-summary-to-checkboxes-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-error-summary"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-error-summary"</span>></span>
<divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#nationality">Select if you are British, Irish or a citizen of a different country</a></li></ul></div></div></div><divclass="govuk-form-group govuk-form-group--error"><fieldsetclass="govuk-fieldset"aria-describedby="nationality-hint nationality-error"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
What is your nationality?
</h1></legend><divid="nationality-hint"class="govuk-hint">
If you have dual nationality, select all options that are relevant to you.
</div><pid="nationality-error"class="govuk-error-message"><spanclass="govuk-visually-hidden">Error:</span> Select if you are British, Irish or a citizen of a different country
</p><divclass="govuk-checkboxes"data-module="govuk-checkboxes"><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="nationality"name="nationality"type="checkbox"value="british"aria-describedby="nationality-item-hint"><labelclass="govuk-label govuk-checkboxes__label"for="nationality">
British
</label><divid="nationality-item-hint"class="govuk-hint govuk-checkboxes__hint">
including English, Scottish, Welsh and Northern Irish
</div></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="nationality-2"name="nationality"type="checkbox"value="irish"><labelclass="govuk-label govuk-checkboxes__label"for="nationality-2">
Irish
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="nationality-3"name="nationality"type="checkbox"value="other"><labelclass="govuk-label govuk-checkboxes__label"for="nationality-3">
Citizen of another country
</label></div></div></fieldset></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-checkboxes-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-linking-from-the-error-summary-to-checkboxes-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-linking-from-the-error-summary-to-checkboxes-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>
{% from"govuk/components/checkboxes/macro.njk"import govukCheckboxes %}
{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Select if you are British, Irish or a citizen of a different country",
href: "#nationality"
}
]
}) }}
{{ govukCheckboxes({
name: "nationality",
fieldset: {
legend: {
text: "What is your nationality?",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "If you have dual nationality, select all options that are relevant to you."
},
errorMessage: {
text: "Select if you are British, Irish or a citizen of a different country"
},
items: [
{
value: "british",
text: "British",
hint: {
text: "including English, Scottish, Welsh and Northern Irish"
}
},
{
value: "irish",
text: "Irish"
},
{
value: "other",
text: "Citizen of another country"
}
]
}) }}
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>.
<ahref="#"class="govuk-back-link">Back</a><mainclass="govuk-main-wrapper "id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><formaction="/form-handler"method="post"novalidate><divclass="govuk-error-summary"data-module="govuk-error-summary"><divrole="alert"><h2class="govuk-error-summary__title">
There is a problem
</h2><divclass="govuk-error-summary__body"><ulclass="govuk-list govuk-error-summary__list"><li><ahref="#passport-issued-year">Passport issue date must include a year</a></li></ul></div></div></div><divclass="govuk-form-group govuk-form-group--error"><fieldsetclass="govuk-fieldset"role="group"aria-describedby="passport-issued-error"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
When was your passport issued?
</h1></legend><pid="passport-issued-error"class="govuk-error-message"><spanclass="govuk-visually-hidden">Error:</span> Passport issue date must include a year
</p><divclass="govuk-date-input"id="passport-issued"><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-day">
Day
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="passport-issued-day"name="passport-issued-day"type="text"value="5"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-month">
Month
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-2"id="passport-issued-month"name="passport-issued-month"type="text"value="12"inputmode="numeric"></div></div><divclass="govuk-date-input__item"><divclass="govuk-form-group"><labelclass="govuk-label govuk-date-input__label"for="passport-issued-year">
Year
</label><inputclass="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"id="passport-issued-year"name="passport-issued-year"type="text"inputmode="numeric"></div></div></div></fieldset></div><buttonclass="govuk-button"data-module="govuk-button">
Continue
</button></form></div></div></main></div>
<p>
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
</p>
<p>
Some options are required for the macro to work; these are marked as "Required" in the option description.
</p>
<p>
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.
</p>
<table class="govuk-table app-options__table" id="options-full-page-example-example--primary">
<caption class="govuk-table__caption govuk-heading-m govuk-visually-hidden">Primary options</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleHtml</code> is set, this is not required. Text to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">titleHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>titleText</code> is set, this is not required. HTML to use for the heading of the error summary block. If <code>titleHtml</code> is provided, <code>titleText</code> will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionText</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Text to use for the description of the errors. If you set <code>descriptionHtml</code>, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">descriptionHtml</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
HTML to use for the description of the errors. If you set this option, the component will ignore <code>descriptionText</code>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">caller</th>
<td class="govuk-table__cell ">nunjucks-block</td>
<td class="govuk-table__cell ">
Not strictly a parameter but <a href="https://mozilla.github.io/nunjucks/templating.html#call">Nunjucks code convention</a>. Using a <code>call</code> 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 <code>call</code> block.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">errorList</th>
<td class="govuk-table__cell ">array</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
The list of errors to include in the summary
See <a href="#options-full-page-example-example--errorList">errorList</a>.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">disableAutoFocus</th>
<td class="govuk-table__cell ">boolean</td>
<td class="govuk-table__cell ">
Prevent moving focus to the error summary when the page loads.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">classes</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Classes to add to the error-summary container.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error-summary container.
</td>
</tr>
</tbody>
</table>
<table class="govuk-table app-options__table" id="options-full-page-example-example--errorList">
<caption class="govuk-table__caption govuk-heading-m ">Options for errorList</caption>
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
<th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
<th class="govuk-table__header" scope="col">Description</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">href</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
Href attribute for the error link item. If provided item will be an anchor.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">text</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>html</code> is set, this is not required. Text for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">html</th>
<td class="govuk-table__cell ">string</td>
<td class="govuk-table__cell ">
<strong>Required.</strong>
If <code>text</code> is set, this is not required. HTML for the error link item. If <code>html</code> is provided, the <code>text</code> option will be ignored.
</td>
</tr>
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="row">attributes</th>
<td class="govuk-table__cell ">object</td>
<td class="govuk-table__cell ">
HTML attributes (for example data attributes) to add to the error link anchor.
</td>
</tr>
</tbody>
</table>