From 501fd1ae1babea2e1f0838f86659233dc594bc25 Mon Sep 17 00:00:00 2001 From: Brett Kyle Date: Thu, 1 Sep 2022 11:14:10 +0100 Subject: [PATCH] [DO NOT MERGE] npm run build on main without mangling or hashing --- deploy/public/accessibility/index.html | 4 +- .../contribution-criteria/index.html | 29 +- .../community/resources-and-tools/index.html | 4 +- deploy/public/components/accordion/index.html | 935 +- deploy/public/components/back-link/index.html | 360 +- .../public/components/breadcrumbs/index.html | 747 +- deploy/public/components/button/index.html | 2495 ++-- .../components/character-count/index.html | 3881 ++--- .../public/components/checkboxes/index.html | 7061 ++++----- .../components/cookie-banner/index.html | 5426 +++---- .../public/components/date-input/index.html | 3268 ++--- deploy/public/components/details/index.html | 474 +- .../components/error-message/index.html | 761 +- .../components/error-summary/index.html | 2107 +-- deploy/public/components/fieldset/index.html | 616 +- .../public/components/file-upload/index.html | 1553 +- deploy/public/components/footer/index.html | 3313 ++--- deploy/public/components/header/index.html | 1594 ++- .../public/components/inset-text/index.html | 382 +- .../components/notification-banner/index.html | 1113 +- .../public/components/pagination/index.html | 2870 ++-- deploy/public/components/panel/index.html | 446 +- .../public/components/phase-banner/index.html | 540 +- deploy/public/components/radios/index.html | 7498 +++++----- deploy/public/components/select/index.html | 1894 +-- deploy/public/components/skip-link/index.html | 358 +- .../public/components/summary-list/index.html | 2157 +-- deploy/public/components/table/index.html | 2782 ++-- deploy/public/components/tabs/index.html | 770 +- deploy/public/components/tag/index.html | 1191 +- .../public/components/text-input/index.html | 11931 ++++++++-------- deploy/public/components/textarea/index.html | 2807 ++-- .../public/components/warning-text/index.html | 358 +- deploy/public/design-system-team/index.html | 2 +- .../index.html | 14 +- .../get-started/focus-states/index.html | 3 +- .../labels-legends-headings/index.html | 211 +- .../public/get-started/production/index.html | 279 +- .../public/get-started/prototyping/index.html | 275 +- .../get-started/updating-your-code/index.html | 358 +- deploy/public/patterns/addresses/index.html | 156 +- .../public/patterns/bank-details/index.html | 207 +- .../public/patterns/check-answers/index.html | 329 +- .../confirm-a-phone-number/index.html | 352 +- .../patterns/confirmation-pages/index.html | 166 +- .../index.html | 253 +- .../public/patterns/cookies-page/index.html | 186 +- .../patterns/create-accounts/index.html | 2 +- deploy/public/patterns/dates/index.html | 51 +- .../patterns/email-addresses/index.html | 120 +- .../patterns/equality-information/index.html | 1074 +- deploy/public/patterns/names/index.html | 121 +- .../national-insurance-numbers/index.html | 120 +- .../patterns/page-not-found-pages/index.html | 76 +- .../problem-with-the-service-pages/index.html | 152 +- .../public/patterns/question-pages/index.html | 729 +- .../service-unavailable-pages/index.html | 310 +- .../patterns/start-using-a-service/index.html | 4 +- .../step-by-step-navigation/index.html | 6 +- .../patterns/task-list-pages/index.html | 120 +- .../patterns/telephone-numbers/index.html | 124 +- deploy/public/styles/colour/index.html | 413 +- deploy/public/styles/images/index.html | 67 +- deploy/public/styles/layout/index.html | 775 +- deploy/public/styles/page-template/index.html | 826 +- deploy/public/styles/spacing/index.html | 82 +- deploy/public/styles/typography/index.html | 715 +- 67 files changed, 40475 insertions(+), 39928 deletions(-) diff --git a/deploy/public/accessibility/index.html b/deploy/public/accessibility/index.html index 637446680c..93a4993a40 100644 --- a/deploy/public/accessibility/index.html +++ b/deploy/public/accessibility/index.html @@ -942,7 +942,7 @@

Accessibility

The GOV.UK Design System website and the codebase it uses, GOV.UK Frontend, is maintained by a team at the Government Digital Service (GDS).

This page explains how the team works to ensure the Design System and Frontend are accessible.

Read about how to test components using accessibility acceptance criteria.

-

Accessibility statement for the GOV.UK Design System website

+

Accessibility statement for the GOV.UK Design System website

This accessibility statement applies to the GOV.UK Design System at https://design-system.service.gov.uk/, and the components and patterns from the GOV.UK Frontend codebase which appear in the examples throughout the Design System.

The GOV.UK Design System team wants as many people as possible to be able to use this website. For example, that means you should be able to:

They also tested the global search functionality that appears in the header of every page in the Design System.

The GOV.UK Frontend documentation website was last tested for accessibility issues in March 2021.

-

How the GOV.UK Design System team makes this website accessible

+

How the GOV.UK Design System team makes this website accessible

The GOV.UK Design System team works hard to ensure that this Design System and Frontend, the codebase it uses, are accessible.

Where possible, the team aims to research components and patterns with a representative range of users, including those with disabilities.

We also test components to ensure they work with a broad range of browsers, devices and assistive technologies - including screen magnifiers, screen readers and speech recognition tools.

diff --git a/deploy/public/community/contribution-criteria/index.html b/deploy/public/community/contribution-criteria/index.html index b7abb758a9..6f3878bd1e 100644 --- a/deploy/public/community/contribution-criteria/index.html +++ b/deploy/public/community/contribution-criteria/index.html @@ -1063,25 +1063,24 @@

Developing a component or pattern

Usable

It has been tested in user research and shown to work with a representative sample of users, including those with disabilities.

-
<p class='govuk-!-margin-bottom-0'>Components and patterns which are not proven usable can be published as experimental. But they must be clearly based on relevant user research from other organisations and best practice, and meet the other criteria.</p></td>
-    </tr>
-    <tr class="govuk-table__row">
-      <th scope="row" class="govuk-table__header">Consistent</th>
-      <td class="govuk-table__cell"><p>It reuses existing styles and components in the Design System where relevant.</p>
+        
Components and patterns which are not proven usable can be published as experimental. But they must be clearly based on relevant user research from other organisations and best practice, and meet the other criteria.

+        
+        
+          Consistent
+          
It reuses existing styles and components in the Design System where relevant.

 
-    <p>Both the guidance and any content included in examples must follow the <a href='https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style'>GOV.UK content style guide</a>.</p>
+        
Both the guidance and any content included in examples must follow the GOV.UK content style guide.

 
-    <p class='govuk-!-margin-bottom-0'>If there is code, it follows the <a href='https://github.com/alphagov/govuk-frontend/blob/main/CONTRIBUTING.md#conventions-to-follow'>GOV.UK Frontend coding standards</a> and is ready to merge in GOV.UK Frontend.</p></td>
-    </tr>
-    <tr class="govuk-table__row">
-      <th scope="row" class="govuk-table__header">Versatile</th>
-      <td class="govuk-table__cell"><p>The implementation is versatile enough that the component or pattern can be used in a range of different services that may need it.</p>
+        
If there is code, it follows the GOV.UK Frontend coding standards and is ready to merge in GOV.UK Frontend.

+        
+        
+          Versatile
+          
The implementation is versatile enough that the component or pattern can be used in a range of different services that may need it.

 
-    <p>For example, a versatile date input component could be set up to ask for a year only, a month and year only, a precise date, or any other combination you may need.</p>
+        
For example, a versatile date input component could be set up to ask for a year only, a month and year only, a precise date, or any other combination you may need.

 
-    <p class='govuk-!-margin-bottom-0'>The component or pattern must also have been tested and shown to work with a range of <a href='https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices'>browsers, assistive technologies and devices</a>.</p></td>
-    </tr>
-
+

The component or pattern must also have been tested and shown to work with a range of browsers, assistive technologies and devices.

+ diff --git a/deploy/public/community/resources-and-tools/index.html b/deploy/public/community/resources-and-tools/index.html index e55711d41f..bd26968009 100644 --- a/deploy/public/community/resources-and-tools/index.html +++ b/deploy/public/community/resources-and-tools/index.html @@ -1053,10 +1053,10 @@

Create prototypes and wireframes

Sketch Wireframing Kit - Sketch wireframes based on the GOV.UK Design System.

Build front ends

-

ASP.NET MVC

+

ASP.NET MVC

Guidance on bringing the GOV.UK Design System into a .NET MVC Project - A walkthrough for how to import the GOV.UK Design System into a MVC project and compile the sass at runtime using gulp.

-

Node.js

+

Node.js

Guidance on building a hapi service using GOV.UK Frontend.

Python

GOV.UK Frontend Jinja - diff --git a/deploy/public/components/accordion/index.html b/deploy/public/components/accordion/index.html index c38561125f..e5ab887fb1 100644 --- a/deploy/public/components/accordion/index.html +++ b/deploy/public/components/accordion/index.html @@ -1138,24 +1138,23 @@

Open this - -
<span class="govuk-visually-hidden">accordion</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Accordion example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/accordion/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-accordion-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-example-html" role="tab" aria-controls="accordion-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-example-nunjucks" role="tab" aria-controls="accordion-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#accordion-example-html" aria-controls="accordion-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="accordion-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;accordion-default&quot;</span>&gt;</span>
-
-

<div class="govuk-accordion__section "> + + accordion + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
+  <div class="govuk-accordion__section ">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
         <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
@@ -1207,151 +1206,153 @@
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-accordion-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a>). Used as an <code>id</code> in the HTML for the accordion as a whole, and also as a prefix for the <code>id</code>s of the section contents and the buttons that open them, so that those <code>id</code>s can be the target of <code>aria-labelledby</code> and <code>aria-control</code> attributes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">headingLevel</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>.
-                </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 accordion.
-                </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 accordion.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  An array of sections within the accordion.
-                    See <a href="#options-accordion-example--items">items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-accordion-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">heading.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The title of each section. If <code>heading.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">heading.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text content for summary line. If <code>summary.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The HTML content for the summary line. The summary line is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text content of each section, which is hidden when the section is closed. If <code>content.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of each section, which is hidden when the section is closed.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">expanded</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets whether the section should be expanded when the page loads for the first time. Defaults to <code>false</code>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using sessionStorage). Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-labelledby and aria-control attributes. +
headingLevelinteger + Heading level, from 1 to 6. Default is 2. +
classesstring + Classes to add to the accordion. +
attributesobject + HTML attributes (for example data attributes) to add to the accordion. +
itemsarray + Required. + An array of sections within the accordion. + See items. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
heading.textstring + Required. + The title of each section. If heading.html is supplied, this is ignored. +
heading.htmlstring + Required. + The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <button> element, so you can only add phrasing content to it. +
summary.textstring + Text content for summary line. If summary.html is supplied, this is ignored. +
summary.htmlstring + The HTML content for the summary line. The summary line is inside the HTML <button> element, so you can only add phrasing content to it. +
content.textstring + Required. + The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored. +
content.htmlstring + Required. + The HTML content of each section, which is hidden when the section is closed. +
expandedboolean + Sets whether the section should be expanded when the page loads for the first time. Defaults to false. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/accordion/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukAccordion %}
-
-

{{ govukAccordion({ +

+ 
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
+
+{{ govukAccordion({
   id: "accordion-default",
   items: [
     {
@@ -1389,7 +1390,7 @@ 

   ]
 }) }}
-

+
@@ -1444,24 +1445,23 @@

Section heading buttons

Open this - -
<span class="govuk-visually-hidden">accordion second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Accordion second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/accordion/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-accordion-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-second-example-html" role="tab" aria-controls="accordion-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-second-example-nunjucks" role="tab" aria-controls="accordion-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#accordion-second-example-html" aria-controls="accordion-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="accordion-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;accordion-default&quot;</span>&gt;</span>
-
-

<div class="govuk-accordion__section "> + + accordion second + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
+  <div class="govuk-accordion__section ">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
         <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
@@ -1513,151 +1513,153 @@ 
Section heading buttons
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-second-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-accordion-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a>). Used as an <code>id</code> in the HTML for the accordion as a whole, and also as a prefix for the <code>id</code>s of the section contents and the buttons that open them, so that those <code>id</code>s can be the target of <code>aria-labelledby</code> and <code>aria-control</code> attributes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">headingLevel</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>.
-                </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 accordion.
-                </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 accordion.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  An array of sections within the accordion.
-                    See <a href="#options-accordion-second-example--items">items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-accordion-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">heading.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The title of each section. If <code>heading.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">heading.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text content for summary line. If <code>summary.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The HTML content for the summary line. The summary line is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text content of each section, which is hidden when the section is closed. If <code>content.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of each section, which is hidden when the section is closed.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">expanded</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets whether the section should be expanded when the page loads for the first time. Defaults to <code>false</code>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using sessionStorage). Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-labelledby and aria-control attributes. +
headingLevelinteger + Heading level, from 1 to 6. Default is 2. +
classesstring + Classes to add to the accordion. +
attributesobject + HTML attributes (for example data attributes) to add to the accordion. +
itemsarray + Required. + An array of sections within the accordion. + See items. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
heading.textstring + Required. + The title of each section. If heading.html is supplied, this is ignored. +
heading.htmlstring + Required. + The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <button> element, so you can only add phrasing content to it. +
summary.textstring + Text content for summary line. If summary.html is supplied, this is ignored. +
summary.htmlstring + The HTML content for the summary line. The summary line is inside the HTML <button> element, so you can only add phrasing content to it. +
content.textstring + Required. + The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored. +
content.htmlstring + Required. + The HTML content of each section, which is hidden when the section is closed. +
expandedboolean + Sets whether the section should be expanded when the page loads for the first time. Defaults to false. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/accordion/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukAccordion %}
-
-

{{ govukAccordion({ +

+ 
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
+
+{{ govukAccordion({
   id: "accordion-default",
   items: [
     {
@@ -1695,7 +1697,7 @@ 
Section heading buttons

   ]
 }) }}
-

+
@@ -1712,24 +1714,23 @@

Adding a summary line

Open this - -
<span class="govuk-visually-hidden">accordion with summary sections</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Accordion with summary sections example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/accordion/with-summary-section/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-accordion-with-summary-sections-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-with-summary-sections-example-html" role="tab" aria-controls="accordion-with-summary-sections-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accordion-with-summary-sections-example-nunjucks" role="tab" aria-controls="accordion-with-summary-sections-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#accordion-with-summary-sections-example-html" aria-controls="accordion-with-summary-sections-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="accordion-with-summary-sections-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-accordion&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;accordion-with-summary-sections&quot;</span>&gt;</span>
-
-

<div class="govuk-accordion__section "> + + accordion with summary sections + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-with-summary-sections">
+  <div class="govuk-accordion__section ">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
         <span class="govuk-accordion__section-button" id="accordion-with-summary-sections-heading-1">
@@ -1860,151 +1861,153 @@ 
Adding a summary line
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-accordion-with-summary-sections-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-accordion-with-summary-sections-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage"><code>sessionStorage</code></a>). Used as an <code>id</code> in the HTML for the accordion as a whole, and also as a prefix for the <code>id</code>s of the section contents and the buttons that open them, so that those <code>id</code>s can be the target of <code>aria-labelledby</code> and <code>aria-control</code> attributes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">headingLevel</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>2</code>.
-                </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 accordion.
-                </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 accordion.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  An array of sections within the accordion.
-                    See <a href="#options-accordion-with-summary-sections-example--items">items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-accordion-with-summary-sections-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">heading.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The title of each section. If <code>heading.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">heading.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text content for summary line. If <code>summary.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summary.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The HTML content for the summary line. The summary line is inside the HTML <code>&lt;button&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text content of each section, which is hidden when the section is closed. If <code>content.html</code> is supplied, this is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">content.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The HTML content of each section, which is hidden when the section is closed.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">expanded</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets whether the section should be expanded when the page loads for the first time. Defaults to <code>false</code>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + Must be unique across the domain of your service (as the expanded state of individual instances of the component persists across page loads using sessionStorage). Used as an id in the HTML for the accordion as a whole, and also as a prefix for the ids of the section contents and the buttons that open them, so that those ids can be the target of aria-labelledby and aria-control attributes. +
headingLevelinteger + Heading level, from 1 to 6. Default is 2. +
classesstring + Classes to add to the accordion. +
attributesobject + HTML attributes (for example data attributes) to add to the accordion. +
itemsarray + Required. + An array of sections within the accordion. + See items. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
heading.textstring + Required. + The title of each section. If heading.html is supplied, this is ignored. +
heading.htmlstring + Required. + The HTML content of the header for each section. Used as the title for each section. The header is inside the HTML <button> element, so you can only add phrasing content to it. +
summary.textstring + Text content for summary line. If summary.html is supplied, this is ignored. +
summary.htmlstring + The HTML content for the summary line. The summary line is inside the HTML <button> element, so you can only add phrasing content to it. +
content.textstring + Required. + The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored. +
content.htmlstring + Required. + The HTML content of each section, which is hidden when the section is closed. +
expandedboolean + Sets whether the section should be expanded when the page loads for the first time. Defaults to false. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% from &quot;govuk/components/accordion/macro.njk&quot; import govukAccordion %}
-
-

{{ govukAccordion({ +

+ 
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
+
+{{ govukAccordion({
   id: "accordion-with-summary-sections",
   items: [
     {
@@ -2125,7 +2128,7 @@ 
Adding a summary line

   ]
 }) }}
-

+
@@ -2142,7 +2145,7 @@

Research on this component

We updated this component in December 2021 to solve an accessibility issue where the buttons and section labels might be mistaken for links.

Read about the research and development that went into improving the accordion component.

The team made sure the component is accessible, for example that users can interact with it using just the keyboard.

-

Users that navigate using ‘elements lists’

+

Users that navigate using ‘elements lists’

We need to find out more about users that navigate using ‘elements lists’ of headings, buttons, links and other elements — such as users of speech recognition software and partially-sighted users of screen readers.

For these users, it might not be clear enough that the section headings are considered buttons. This could mislead them to navigate (less efficiently) using the show or hide labels.

While this experience is inconvenient at first, it’s likely the user will better understand the button area once they interact with it and see its focus state. See ‘Testing with Dragon’ in the accessibility clinic summary.

diff --git a/deploy/public/components/back-link/index.html b/deploy/public/components/back-link/index.html index 748dfaaa18..a31b4f664f 100644 --- a/deploy/public/components/back-link/index.html +++ b/deploy/public/components/back-link/index.html @@ -1132,109 +1132,109 @@

Open this - -
<span class="govuk-visually-hidden">back link</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Back link example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/back-link/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-back-link-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#back-link-example-html" role="tab" aria-controls="back-link-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#back-link-example-nunjucks" role="tab" aria-controls="back-link-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#back-link-example-html" aria-controls="back-link-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="back-link-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-back-link&quot;</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#back-link-example-nunjucks" aria-controls="back-link-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
-<div class="app-tabs__container js-tabs__container" id="back-link-example-nunjucks" role="tabpanel">  
-
-
-    <details class="govuk-details app-options" data-module="govuk-details" id="options-back-link-example-details">
-
+ + back link + example in a new tab + +
+ + + + +
HTML
+
+
+ 
<a href="#" class="govuk-back-link">Back</a>
+
+
+
Nunjucks
+
+ + + -
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/back-link/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBackLink %}
-
-

{{ govukBackLink({ +

+ 
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{{ govukBackLink({
   text: "Back",
   href: "#"
 }) }}
-

+ @@ -1254,109 +1254,109 @@

How it works

Open this - -
<span class="govuk-visually-hidden">back link second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Back link second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/back-link/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-back-link-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#back-link-second-example-html" role="tab" aria-controls="back-link-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#back-link-second-example-nunjucks" role="tab" aria-controls="back-link-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#back-link-second-example-html" aria-controls="back-link-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="back-link-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-back-link&quot;</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-  <div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#back-link-second-example-nunjucks" aria-controls="back-link-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
-<div class="app-tabs__container js-tabs__container" id="back-link-second-example-nunjucks" role="tabpanel">  
-
-
-    <details class="govuk-details app-options" data-module="govuk-details" id="options-back-link-second-example-details">
-
+ + back link second + example in a new tab + +
+ + + + +
HTML
+
+
+ 
<a href="#" class="govuk-back-link">Back</a>
+
+
+
Nunjucks
+
+ + + -
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/back-link/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBackLink %}
-
-

{{ govukBackLink({ +

+ 
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{{ govukBackLink({
   text: "Back",
   href: "#"
 }) }}
-

+ diff --git a/deploy/public/components/breadcrumbs/index.html b/deploy/public/components/breadcrumbs/index.html index a9d721ed59..dcc2757692 100644 --- a/deploy/public/components/breadcrumbs/index.html +++ b/deploy/public/components/breadcrumbs/index.html @@ -1131,24 +1131,23 @@

Open this - -
<span class="govuk-visually-hidden">breadcrumbs</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Breadcrumbs example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/breadcrumbs/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-breadcrumbs-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-example-html" role="tab" aria-controls="breadcrumbs-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-example-nunjucks" role="tab" aria-controls="breadcrumbs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#breadcrumbs-example-html" aria-controls="breadcrumbs-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="breadcrumbs-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-breadcrumbs&quot;</span>&gt;</span>
-
-

<ol class="govuk-breadcrumbs__list"> + + breadcrumbs + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-breadcrumbs">
+  <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="#">Home</a>
     </li>
@@ -1163,120 +1162,122 @@
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-breadcrumbs-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-breadcrumbs-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of breadcrumbs item objects.
-                    See <a href="#options-breadcrumbs-example--items">items</a>.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">collapseOnMobile</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-breadcrumbs-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within the breadcrumbs 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 to use within the breadcrumbs 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
-                </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 individual crumb.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
itemsarray + Required. + Array of breadcrumbs item objects. + See items. +
classesstring + Classes to add to the breadcrumbs container. +
collapseOnMobileboolean + When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below. +
attributesobject + HTML attributes (for example data attributes) to add to the breadcrumbs container. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
hrefstring + Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item. +
attributesobject + HTML attributes (for example data attributes) to add to the individual crumb. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/breadcrumbs/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBreadcrumbs %}
-
-

{{ govukBreadcrumbs({ +

+ 
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+
+{{ govukBreadcrumbs({
   items: [
     {
       text: "Home",
@@ -1293,7 +1294,7 @@ 

   ]
 }) }}
-

+
@@ -1312,24 +1313,23 @@

How it works

Open this - -
<span class="govuk-visually-hidden">breadcrumbs second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Breadcrumbs second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/breadcrumbs/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-breadcrumbs-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-second-example-html" role="tab" aria-controls="breadcrumbs-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-second-example-nunjucks" role="tab" aria-controls="breadcrumbs-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#breadcrumbs-second-example-html" aria-controls="breadcrumbs-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="breadcrumbs-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-breadcrumbs&quot;</span>&gt;</span>
-
-

<ol class="govuk-breadcrumbs__list"> + + breadcrumbs second + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-breadcrumbs">
+  <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="#">Home</a>
     </li>
@@ -1344,120 +1344,122 @@ 
How it works
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-breadcrumbs-second-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-breadcrumbs-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of breadcrumbs item objects.
-                    See <a href="#options-breadcrumbs-second-example--items">items</a>.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">collapseOnMobile</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-breadcrumbs-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within the breadcrumbs 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 to use within the breadcrumbs 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
-                </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 individual crumb.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
itemsarray + Required. + Array of breadcrumbs item objects. + See items. +
classesstring + Classes to add to the breadcrumbs container. +
collapseOnMobileboolean + When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below. +
attributesobject + HTML attributes (for example data attributes) to add to the breadcrumbs container. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
hrefstring + Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item. +
attributesobject + HTML attributes (for example data attributes) to add to the individual crumb. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/breadcrumbs/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBreadcrumbs %}
-
-

{{ govukBreadcrumbs({ +

+ 
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+
+{{ govukBreadcrumbs({
   items: [
     {
       text: "Home",
@@ -1474,7 +1476,7 @@ 
How it works

   ]
 }) }}
-

+
@@ -1487,24 +1489,23 @@

Collapsing breadcrumbs on mobi
Open this - -
<span class="govuk-visually-hidden">breadcrumbs that collapse on mobile</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Breadcrumbs that collapse on mobile example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/breadcrumbs/collapse-mobile/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-breadcrumbs-that-collapse-on-mobile-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-that-collapse-on-mobile-example-html" role="tab" aria-controls="breadcrumbs-that-collapse-on-mobile-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#breadcrumbs-that-collapse-on-mobile-example-nunjucks" role="tab" aria-controls="breadcrumbs-that-collapse-on-mobile-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#breadcrumbs-that-collapse-on-mobile-example-html" aria-controls="breadcrumbs-that-collapse-on-mobile-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="breadcrumbs-that-collapse-on-mobile-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile&quot;</span>&gt;</span>
-
-

<ol class="govuk-breadcrumbs__list"> + + breadcrumbs that collapse on mobile + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-breadcrumbs govuk-breadcrumbs--collapse-on-mobile">
+  <ol class="govuk-breadcrumbs__list">
     <li class="govuk-breadcrumbs__list-item">
       <a class="govuk-breadcrumbs__link" href="#">Home</a>
     </li>
@@ -1525,120 +1526,122 @@ 
Collapsing breadcrumbs on mobi
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-breadcrumbs-that-collapse-on-mobile-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-breadcrumbs-that-collapse-on-mobile-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of breadcrumbs item objects.
-                    See <a href="#options-breadcrumbs-that-collapse-on-mobile-example--items">items</a>.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">collapseOnMobile</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
-                </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 breadcrumbs container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-breadcrumbs-that-collapse-on-mobile-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within the breadcrumbs 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 to use within the breadcrumbs 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
-                </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 individual crumb.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
itemsarray + Required. + Array of breadcrumbs item objects. + See items. +
classesstring + Classes to add to the breadcrumbs container. +
collapseOnMobileboolean + When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below. +
attributesobject + HTML attributes (for example data attributes) to add to the breadcrumbs container. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the breadcrumbs item. If html is provided, the text option will be ignored. +
hrefstring + Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item. +
attributesobject + HTML attributes (for example data attributes) to add to the individual crumb. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/breadcrumbs/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBreadcrumbs %}
-
-

{{ govukBreadcrumbs({ +

+ 
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
+
+{{ govukBreadcrumbs({
   collapseOnMobile: true,
   items: [
     {
@@ -1664,7 +1667,7 @@ 
Collapsing breadcrumbs on mobi
   ]
 }) }}
-

+
diff --git a/deploy/public/components/button/index.html b/deploy/public/components/button/index.html index 92e0e3ac61..9759d8c6b6 100644 --- a/deploy/public/components/button/index.html +++ b/deploy/public/components/button/index.html @@ -1130,159 +1130,160 @@

Open this - -
<span class="govuk-visually-hidden">button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-html" role="tab" aria-controls="button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-nunjucks" role="tab" aria-controls="button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-example-html" aria-controls="button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Save and continue + + button + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button class="govuk-button" data-module="govuk-button">
+  Save and continue
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-button-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Save and continue"
 }) }}
-

+
@@ -1314,159 +1315,160 @@

Default buttons

Open this - -
<span class="govuk-visually-hidden">button second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-second-example-html" role="tab" aria-controls="button-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-second-example-nunjucks" role="tab" aria-controls="button-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-second-example-html" aria-controls="button-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Save and continue + + button second + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button class="govuk-button" data-module="govuk-button">
+  Save and continue
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-button-second-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Save and continue"
 }) }}
-

+
@@ -1479,163 +1481,164 @@

Start buttons

Open this - -
<span class="govuk-visually-hidden">start now button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Start now button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/start/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-start-now-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#start-now-button-example-html" role="tab" aria-controls="start-now-button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#start-now-button-example-nunjucks" role="tab" aria-controls="start-now-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#start-now-button-example-html" aria-controls="start-now-button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="start-now-button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button govuk-button--start&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Start now - <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false"> + + start now button + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
+  Start now
+  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
     <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
   </svg></a>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-start-now-button-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-start-now-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Start now",
   href: "#",
   isStartButton: true
 }) }}
-

+
@@ -1648,160 +1651,161 @@

Secondary buttons

Open this - -
<span class="govuk-visually-hidden">secondary button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Secondary button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/secondary/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-secondary-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-example-html" role="tab" aria-controls="secondary-button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-example-nunjucks" role="tab" aria-controls="secondary-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#secondary-button-example-html" aria-controls="secondary-button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="secondary-button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button govuk-button--secondary&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Find address + + secondary button + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button class="govuk-button govuk-button--secondary" data-module="govuk-button">
+  Find address
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-secondary-button-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-secondary-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Find address",
-  classes: "govuk-button–secondary"
+  classes: "govuk-button--secondary"
 }) }}
-

+
@@ -1814,160 +1818,161 @@

Warning buttons

Open this - -
<span class="govuk-visually-hidden">warning button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Warning button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/warning/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-warning-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-button-example-html" role="tab" aria-controls="warning-button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-button-example-nunjucks" role="tab" aria-controls="warning-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#warning-button-example-html" aria-controls="warning-button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="warning-button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button govuk-button--warning&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Delete account + + warning button + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button class="govuk-button govuk-button--warning" data-module="govuk-button">
+  Delete account
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-warning-button-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-warning-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Delete account",
-  classes: "govuk-button–warning"
+  classes: "govuk-button--warning"
 }) }}
-

+
@@ -1984,160 +1989,161 @@

Disabled buttons

Open this - -
<span class="govuk-visually-hidden">disabled button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Disabled button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/disabled/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-disabled-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#disabled-button-example-html" role="tab" aria-controls="disabled-button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#disabled-button-example-nunjucks" role="tab" aria-controls="disabled-button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#disabled-button-example-html" aria-controls="disabled-button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="disabled-button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">disabled</span>=<span class="hljs-string">&quot;disabled&quot;</span> <span class="hljs-attr">aria-disabled</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button govuk-button--disabled&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Disabled button + + disabled button + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled" data-module="govuk-button">
+  Disabled button
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-disabled-button-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-disabled-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Disabled button",
   disabled: true
 }) }}
-

+
@@ -2149,170 +2155,173 @@

Grouping buttons

Open this - -
<span class="govuk-visually-hidden">secondary button combo</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Secondary button combo example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/secondary-combo/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-secondary-button-combo-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-combo-example-html" role="tab" aria-controls="secondary-button-combo-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#secondary-button-combo-example-nunjucks" role="tab" aria-controls="secondary-button-combo-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#secondary-button-combo-example-html" aria-controls="secondary-button-combo-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="secondary-button-combo-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-
-

<button class="govuk-button" data-module="govuk-button"> + + secondary button combo + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-button-group">
+  <button class="govuk-button" data-module="govuk-button">
     Save and continue
-  </button>

-
  <button class="govuk-button govuk-button–secondary" data-module="govuk-button">
+  </button>
+
+  <button class="govuk-button govuk-button--secondary" data-module="govuk-button">
     Save as draft
   </button>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-secondary-button-combo-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-secondary-button-combo-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

<div class="govuk-button-group"> +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+<div class="govuk-button-group">
   {{ govukButton({
     text: "Save and continue"
   }) }}
+
   {{ govukButton({
     text: "Save as draft",
-    classes: "govuk-button–secondary"
+    classes: "govuk-button--secondary"
   }) }}
 </div>
-

+
@@ -2323,165 +2332,168 @@

Grouping buttons

Open this - -
<span class="govuk-visually-hidden">button group</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button group example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/button-group/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-group-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-example-html" role="tab" aria-controls="button-group-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-group-example-nunjucks" role="tab" aria-controls="button-group-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-group-example-html" aria-controls="button-group-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-group-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-
-

<button class="govuk-button" data-module="govuk-button"> + + button group + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-button-group">
+  <button class="govuk-button" data-module="govuk-button">
     Continue
-  </button>

-
  <a class="govuk-link" href="#">Cancel</a>
+  </button>
+
+  <a class="govuk-link" href="#">Cancel</a>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-button-group-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-button-group-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

<div class="govuk-button-group"> +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+<div class="govuk-button-group">
   {{ govukButton({
     text: "Continue"
   }) }}
+
   <a class="govuk-link" href="#">Cancel</a>
 </div>
-

+
@@ -2502,160 +2514,161 @@

Stop us
Open this - -
<span class="govuk-visually-hidden">button with prevent double click</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button with prevent double click example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/prevent-double-click/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-with-prevent-double-click-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-with-prevent-double-click-example-html" role="tab" aria-controls="button-with-prevent-double-click-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-with-prevent-double-click-example-nunjucks" role="tab" aria-controls="button-with-prevent-double-click-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-with-prevent-double-click-example-html" aria-controls="button-with-prevent-double-click-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-with-prevent-double-click-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">data-prevent-double-click</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
-

Confirm and send + + button with prevent double click + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<button data-prevent-double-click="true" class="govuk-button" data-module="govuk-button">
+  Confirm and send
 </button>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-button-with-prevent-double-click-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-button-with-prevent-double-click-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
elementstring + Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html. +
textstring + Required. + If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
htmlstring + Required. + If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input. +
namestring + Name for the input or button. This has no effect on a elements. +
typestring + Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements. +
valuestring + Value for the button tag. This has no effect on a or input elements. +
disabledboolean + Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically. +
hrefstring + The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined. +
classesstring + Classes to add to the button component. +
attributesobject + HTML attributes (for example data attributes) to add to the button component. +
preventDoubleClickboolean + Prevent accidental double clicks on submit buttons from submitting forms multiple times +
isStartButtonboolean + Use for the main call to action on your service's start page. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
-

{{ govukButton({ +

+ 
{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Confirm and send",
   preventDoubleClick: true
 }) }}
-

+
diff --git a/deploy/public/components/character-count/index.html b/deploy/public/components/character-count/index.html index fefd4746e6..96d2be2eae 100644 --- a/deploy/public/components/character-count/index.html +++ b/deploy/public/components/character-count/index.html @@ -1131,25 +1131,24 @@

Open this - -
<span class="govuk-visually-hidden">character count</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Character count example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-character-count-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-example-html" role="tab" aria-controls="character-count-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-example-nunjucks" role="tab" aria-controls="character-count-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#character-count-example-html" aria-controls="character-count-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="character-count-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxlength</span>=<span class="hljs-string">&quot;200&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group"> - <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="with-hint"> + + character count + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="200">
+  <div class="govuk-form-group">
+    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="with-hint">
         Can you provide more detail?
       </label>
     </h1>
@@ -1157,326 +1156,330 @@ 

       Do not include personal or financial information like your National Insurance number or credit card details.
     </div>
     <textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
-  </div>

-
  <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+  </div>
+
+  <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 200 characters
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-character-count-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-character-count-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-character-count-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-character-count-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-character-count-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-character-count-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{{ govukCharacterCount({
   name: "with-hint",
   id: "with-hint",
   maxlength: 200,
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -1484,7 +1487,7 @@ 

   }
 }) }}
-

+
@@ -1518,25 +1521,24 @@

How it works

Open this - -
<span class="govuk-visually-hidden">character count second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Character count second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-character-count-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-second-example-html" role="tab" aria-controls="character-count-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-second-example-nunjucks" role="tab" aria-controls="character-count-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#character-count-second-example-html" aria-controls="character-count-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="character-count-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxlength</span>=<span class="hljs-string">&quot;200&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group"> - <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="with-hint"> + + character count second + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="200">
+  <div class="govuk-form-group">
+    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="with-hint">
         Can you provide more detail?
       </label>
     </h1>
@@ -1544,326 +1546,330 @@ 
How it works

       Do not include personal or financial information like your National Insurance number or credit card details.
     </div>
     <textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
-  </div>

-
  <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+  </div>
+
+  <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 200 characters
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-character-count-second-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-character-count-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-character-count-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-character-count-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-character-count-second-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-character-count-second-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-second-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{{ govukCharacterCount({
   name: "with-hint",
   id: "with-hint",
   maxlength: 200,
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -1871,354 +1877,356 @@ 
How it works

   }
 }) }}
-

+
-

If you’re asking more than one question on the page

+

If you’re asking more than one question on the page

If you’re asking more than one question on the page, do not set the contents of the <label> as the page heading. Read more about asking multiple questions on question pages.

Open this - -
<span class="govuk-visually-hidden">character count without a heading</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Character count without a heading example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-character-count-without-a-heading-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-without-a-heading-example-html" role="tab" aria-controls="character-count-without-a-heading-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#character-count-without-a-heading-example-nunjucks" role="tab" aria-controls="character-count-without-a-heading-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#character-count-without-a-heading-example-html" aria-controls="character-count-without-a-heading-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="character-count-without-a-heading-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxlength</span>=<span class="hljs-string">&quot;200&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group"> + + character count without a heading + example in a new tab + +

+ +
+ + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="200">
+  <div class="govuk-form-group">
     <label class="govuk-label" for="label-as-page-heading">
       Describe the nature of your event
     </label>
     <textarea class="govuk-textarea govuk-js-character-count" id="label-as-page-heading" name="label-as-page-heading" rows="5" aria-describedby="label-as-page-heading-info"></textarea>
-  </div>

-
  <div id="label-as-page-heading-info" class="govuk-hint govuk-character-count__message">
+  </div>
+
+  <div id="label-as-page-heading-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 200 characters
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-character-count-without-a-heading-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-character-count-without-a-heading-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-character-count-without-a-heading-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-character-count-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-character-count-without-a-heading-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-character-count-without-a-heading-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-without-a-heading-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-without-a-heading-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-without-a-heading-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-character-count-without-a-heading-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+ {{ govukCharacterCount({
   id: "label-as-page-heading",
   name: "label-as-page-heading",
   maxlength: 200,
@@ -2227,7 +2235,7 @@ 
If you’re asking m
   }
 }) }}
-

+
@@ -2240,354 +2248,357 @@

Consider if a word count is mo
Open this - -
<span class="govuk-visually-hidden">word count – character count</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Word count – Character count example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/word-count/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-word-count-character-count-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#word-count-character-count-example-html" role="tab" aria-controls="word-count-character-count-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#word-count-character-count-example-nunjucks" role="tab" aria-controls="word-count-character-count-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#word-count-character-count-example-html" aria-controls="word-count-character-count-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="word-count-character-count-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxwords</span>=<span class="hljs-string">&quot;150&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group"> - <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="word-count"> + + word count – character count + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="150">
+  <div class="govuk-form-group">
+    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="word-count">
         Enter a job description
       </label>
     </h1>
     <textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
-  </div>

-
  <div id="word-count-info" class="govuk-hint govuk-character-count__message">
+  </div>
+
+  <div id="word-count-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 150 words
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-word-count-character-count-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-word-count-character-count-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-word-count-character-count-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-word-count-character-count-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-word-count-character-count-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-word-count-character-count-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-word-count-character-count-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-word-count-character-count-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-word-count-character-count-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-word-count-character-count-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{{ govukCharacterCount({
   name: "word-count",
   id: "word-count",
   maxwords: 150,
   label: {
     text: "Enter a job description",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   }
 }) }}
-

+
@@ -2602,343 +2613,346 @@

Avoid narrow limits

Open this - -
<span class="govuk-visually-hidden">threshold – character count</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Threshold – Character count example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/threshold/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-threshold-character-count-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#threshold-character-count-example-html" role="tab" aria-controls="threshold-character-count-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#threshold-character-count-example-nunjucks" role="tab" aria-controls="threshold-character-count-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#threshold-character-count-example-html" aria-controls="threshold-character-count-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="threshold-character-count-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxlength</span>=<span class="hljs-string">&quot;112&quot;</span> <span class="hljs-attr">data-threshold</span>=<span class="hljs-string">&quot;75&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group"> - <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="threshold"> + + threshold – character count + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="112" data-threshold="75">
+  <div class="govuk-form-group">
+    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="threshold">
         Can you provide more detail?
       </label>
     </h1>
     <textarea class="govuk-textarea govuk-js-character-count" id="threshold" name="threshold" rows="5" aria-describedby="threshold-info">Type another letter into this field after this message to see the threshold feature</textarea>
-  </div>

-
  <div id="threshold-info" class="govuk-hint govuk-character-count__message">
+  </div>
+
+  <div id="threshold-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 112 characters
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-threshold-character-count-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-threshold-character-count-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-threshold-character-count-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-threshold-character-count-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-threshold-character-count-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-threshold-character-count-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-threshold-character-count-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-threshold-character-count-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-threshold-character-count-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-threshold-character-count-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{{ govukCharacterCount({
   name: "threshold",
   id: "threshold",
   maxlength: 112,
@@ -2946,12 +2960,12 @@ 
Avoid narrow limits

   value: "Type another letter into this field after this message to see the threshold feature",
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   }
 }) }}
-

+
@@ -2963,353 +2977,356 @@

Error messages

Open this - -
<span class="govuk-visually-hidden">error – character count</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error – Character count example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/character-count/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-character-count-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-character-count-example-html" role="tab" aria-controls="error-character-count-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-character-count-example-nunjucks" role="tab" aria-controls="error-character-count-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-character-count-example-html" aria-controls="error-character-count-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-character-count-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-character-count&quot;</span> <span class="hljs-attr">data-maxlength</span>=<span class="hljs-string">&quot;350&quot;</span>&gt;</span>
-
-

<div class="govuk-form-group govuk-form-group–error"> - <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="exceeding-characters"> + + error – character count + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="350">
+  <div class="govuk-form-group govuk-form-group--error">
+    <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="exceeding-characters">
         Enter a job description
       </label>
     </h1>
     <p id="exceeding-characters-error" class="govuk-error-message">
       <span class="govuk-visually-hidden">Error:</span> Job description must be 350 characters or less
     </p>
-    <textarea class="govuk-textarea govuk-textarea–error govuk-js-character-count govuk-textarea–error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format.</textarea>
-  </div>

-
  <div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
+    <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format.</textarea>
+  </div>
+
+  <div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
     You can enter up to 350 characters
-  </div>

-
</div>
+ </div> + +</div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-error-character-count-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-character-count-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxlength</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxwords</code> is set, this is not required. The maximum number of characters. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">maxwords</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>maxlength</code> is set, this is not required. The maximum number of words. If <code>maxwords</code> is provided, the <code>maxlength</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">threshold</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-error-character-count-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-error-character-count-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-error-character-count-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">countMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the count message.
-                    See <a href="#options-error-character-count-example--countMessage">countMessage</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-character-count-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-character-count-example--countMessage">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the count message.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-character-count-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-character-count-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
idstring + Required. + The ID of the textarea. +
namestring + Required. + The name of the textarea, which is submitted with the form data. +
rowsstring + Optional number of textarea rows (default is 5 rows). +
valuestring + Optional initial value of the textarea. +
maxlengthstring + Required. + If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored. +
maxwordsstring + Required. + If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored. +
thresholdstring + The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default. +
labelobject + Required. + Options for the label component. + + See label. +
hintobject + Options for the hint component. + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
classesstring + Classes to add to the textarea. +
attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the character count. +
countMessageobject + Options for the count message. + See countMessage. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + +
Options for countMessage
NameTypeDescription
classesstring + Classes to add to the count message. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/character-count/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCharacterCount %}
-
-

{{ govukCharacterCount({ +

+ 
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{{ govukCharacterCount({
   id: "exceeding-characters",
   name: "exceeding",
   maxlength: 350,
   value: "A content designer works on the end-to-end journey of a service to help users complete their goal and government deliver a policy intent. Their work may involve the creation of, or change to, a transaction, product or single piece of content that stretches across digital and offline channels. They make sure appropriate content is shown to a user in the right place and in the best format.",
   label: {
     text: "Enter a job description",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   errorMessage: {
@@ -3317,7 +3334,7 @@ 
Error messages

   }
 }) }}
-

+
diff --git a/deploy/public/components/checkboxes/index.html b/deploy/public/components/checkboxes/index.html index edbd6f46b5..8e1fa291ba 100644 --- a/deploy/public/components/checkboxes/index.html +++ b/deploy/public/components/checkboxes/index.html @@ -1131,25 +1131,24 @@

Open this - -
<span class="govuk-visually-hidden">checkboxes</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkboxes example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/checkboxes/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkboxes-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-example-html" role="tab" aria-controls="checkboxes-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-example-nunjucks" role="tab" aria-controls="checkboxes-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkboxes-example-html" aria-controls="checkboxes-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="waste-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkboxes + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Which types of waste do you transport?
       </h1>
@@ -1176,392 +1175,395 @@ 

           Farm or agricultural waste
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkboxes-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkboxes-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkboxes-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkboxes-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkboxes-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkboxes-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "waste",
   name: "waste",
   fieldset: {
     legend: {
       text: "Which types of waste do you transport?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -1583,7 +1585,7 @@ 

   ]
 }) }}
-

+
@@ -1608,7 +1610,7 @@

How it works

Order checkbox options alphabetically by default.

In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘What is your nationality?’ based on population size.

Group checkboxes together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘How would you like to be contacted?’.

-

If you’re asking one question on the page

+

If you’re asking one question on the page

If you’re asking just one question per page as recommended, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

Read more about why and how to set legends as headings.

There are 2 ways to use the checkboxes component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

@@ -1617,25 +1619,24 @@

If you’re asking one questio
Open this - -
<span class="govuk-visually-hidden">checkboxes second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkboxes second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/checkboxes/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkboxes-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-second-example-html" role="tab" aria-controls="checkboxes-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-second-example-nunjucks" role="tab" aria-controls="checkboxes-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkboxes-second-example-html" aria-controls="checkboxes-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkboxes-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="waste-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkboxes second + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Which types of waste do you transport?
       </h1>
@@ -1662,392 +1663,395 @@ 
If you’re asking one questio
           Farm or agricultural waste
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkboxes-second-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkboxes-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkboxes-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkboxes-second-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkboxes-second-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkboxes-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkboxes-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "waste",
   name: "waste",
   fieldset: {
     legend: {
       text: "Which types of waste do you transport?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2069,36 +2073,35 @@ 
If you’re asking one questio
   ]
 }) }}
-

+
-

If you’re asking more than one question on the page

+

If you’re asking more than one question on the page

If you’re asking more than one question on the page, do not set the contents of the <legend> as the page heading. Read more about asking multiple questions on question pages.

Open this - -
<span class="govuk-visually-hidden">checkboxes without a heading</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkboxes without a heading example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/checkboxes/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkboxes-without-a-heading-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-without-a-heading-example-html" role="tab" aria-controls="checkboxes-without-a-heading-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-without-a-heading-example-nunjucks" role="tab" aria-controls="checkboxes-without-a-heading-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkboxes-without-a-heading-example-html" aria-controls="checkboxes-without-a-heading-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkboxes-without-a-heading-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="waste-hint"> + + checkboxes without a heading + example in a new tab + +

+ +
+ + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="waste-hint">
     <legend class="govuk-fieldset__legend">
       Which types of waste do you transport?
     </legend>
@@ -2124,385 +2127,388 @@ 
If you’re asking m
           Farm or agricultural waste
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkboxes-without-a-heading-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkboxes-without-a-heading-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkboxes-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkboxes-without-a-heading-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkboxes-without-a-heading-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-without-a-heading-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-without-a-heading-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkboxes-without-a-heading-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkboxes-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-without-a-heading-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-without-a-heading-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "waste",
   name: "waste",
   fieldset: {
@@ -2529,7 +2535,7 @@ 
If you’re asking m
   ]
 }) }}
-

+
@@ -2541,25 +2547,24 @@

Checkbox items with hints

Open this - -
<span class="govuk-visually-hidden">checkbox items with hint</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkbox items with hint example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/checkboxes/hint/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkbox-items-with-hint-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkbox-items-with-hint-example-html" role="tab" aria-controls="checkbox-items-with-hint-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkbox-items-with-hint-example-nunjucks" role="tab" aria-controls="checkbox-items-with-hint-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkbox-items-with-hint-example-html" aria-controls="checkbox-items-with-hint-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkbox-items-with-hint-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="nationality-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkbox items with hint + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="nationality-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         What is your nationality?
       </h1>
@@ -2589,392 +2594,395 @@ 
Checkbox items with hints

           Citizen of another country
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkbox-items-with-hint-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkbox-items-with-hint-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkbox-items-with-hint-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkbox-items-with-hint-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkbox-items-with-hint-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-hint-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-hint-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkbox-items-with-hint-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkbox-items-with-hint-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-hint-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-hint-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "nationality",
   name: "nationality",
   fieldset: {
     legend: {
       text: "What is your nationality?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2999,12 +3007,12 @@ 
Checkbox items with hints

   ]
 }) }}
-

+
-

Add an option for ‘none’

+

Add an option for ‘none’

When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.

Remember to start by asking one question per page. You might be able to remove the need for a ‘none’ option by asking the user a better question or filtering them out with a ‘filter question’ beforehand. The GOV.UK Service Manual has guidance on designing good questions.

Show the ‘none’ option last. Separate it from the other options using a divider. The text is usually the word ‘or’.

@@ -3016,25 +3024,24 @@

Add an option for ‘none’

Open this - -
<span class="govuk-visually-hidden">checkboxes with &#39;none&#39; option</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkboxes with &#39;none&#39; option example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/checkboxes/with-none-option/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkboxes-with-none-option-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-with-none-option-example-html" role="tab" aria-controls="checkboxes-with-none-option-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-with-none-option-example-nunjucks" role="tab" aria-controls="checkboxes-with-none-option-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkboxes-with-none-option-example-html" aria-controls="checkboxes-with-none-option-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkboxes-with-none-option-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="countries-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkboxes with 'none' option + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="countries-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Will you be travelling to any of these countries?
       </h1>
@@ -3068,392 +3075,395 @@ 
Add an option for ‘none’

           No, I will not be travelling to any of these countries
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkboxes-with-none-option-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkboxes-with-none-option-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkboxes-with-none-option-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkboxes-with-none-option-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkboxes-with-none-option-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkboxes-with-none-option-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkboxes-with-none-option-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "countries",
   name: "countries",
   fieldset: {
     legend: {
       text: "Will you be travelling to any of these countries?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -3483,7 +3493,7 @@ 
Add an option for ‘none’

   ]
 }) }}
-

+
@@ -3494,25 +3504,24 @@

Add an option for ‘none’

Open this - -
<span class="govuk-visually-hidden">checkboxes with &#39;none&#39; option showing an error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkboxes with &#39;none&#39; option showing an error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/checkboxes/with-none-option-in-error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkboxes-with-none-option-showing-an-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-with-none-option-showing-an-error-example-html" role="tab" aria-controls="checkboxes-with-none-option-showing-an-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkboxes-with-none-option-showing-an-error-example-nunjucks" role="tab" aria-controls="checkboxes-with-none-option-showing-an-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkboxes-with-none-option-showing-an-error-example-html" aria-controls="checkboxes-with-none-option-showing-an-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkboxes-with-none-option-showing-an-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="countries-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkboxes with 'none' option showing an error + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" aria-describedby="countries-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Will you be travelling to any of these countries?
       </h1>
@@ -3546,392 +3555,395 @@ 
Add an option for ‘none’

           No, I will not be travelling to any of these countries
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkboxes-with-none-option-showing-an-error-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkboxes-with-none-option-showing-an-error-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkboxes-with-none-option-showing-an-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkboxes-with-none-option-showing-an-error-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkboxes-with-none-option-showing-an-error-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-showing-an-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-showing-an-error-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkboxes-with-none-option-showing-an-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkboxes-with-none-option-showing-an-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-showing-an-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkboxes-with-none-option-showing-an-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "countries",
   name: "countries",
   fieldset: {
     legend: {
       text: "Will you be travelling to any of these countries?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   errorMessage: {
@@ -3963,7 +3975,7 @@ 
Add an option for ‘none’

   ]
 }) }}
-

+
@@ -3976,25 +3988,24 @@

Smaller checkboxes

Open this - -
<span class="govuk-visually-hidden">small checkboxes</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Small checkboxes example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/checkboxes/small/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-small-checkboxes-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#small-checkboxes-example-html" role="tab" aria-controls="small-checkboxes-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#small-checkboxes-example-nunjucks" role="tab" aria-controls="small-checkboxes-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#small-checkboxes-example-html" aria-controls="small-checkboxes-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="small-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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–m"> + + small checkboxes + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
       <h1 class="govuk-fieldset__heading">
         Organisation
       </h1>
     </legend>
-    <div class="govuk-checkboxes govuk-checkboxes–small" data-module="govuk-checkboxes">
+    <div class="govuk-checkboxes govuk-checkboxes--small" data-module="govuk-checkboxes">
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="organisation" name="organisation" type="checkbox" value="hmrc">
         <label class="govuk-label govuk-checkboxes__label" for="organisation">
@@ -4569,393 +4585,396 @@ 
Smaller checkboxes

           Department for Transport
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-small-checkboxes-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-small-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-small-checkboxes-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-small-checkboxes-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-small-checkboxes-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-checkboxes-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-checkboxes-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-small-checkboxes-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-small-checkboxes-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-checkboxes-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-checkboxes-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "organisation",
   name: "organisation",
-  classes: "govuk-checkboxes–small",
+  classes: "govuk-checkboxes--small",
   fieldset: {
     legend: {
       text: "Organisation",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–m"
+      classes: "govuk-fieldset__legend--m"
     }
   },
   items: [
@@ -4978,7 +4997,7 @@ 
Smaller checkboxes

   ]
 }) }}
-

+
@@ -4992,25 +5011,24 @@

Error messages

Open this - -
<span class="govuk-visually-hidden">checkbox items with error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Checkbox items with error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/checkboxes/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-checkbox-items-with-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkbox-items-with-error-example-html" role="tab" aria-controls="checkbox-items-with-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#checkbox-items-with-error-example-nunjucks" role="tab" aria-controls="checkbox-items-with-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#checkbox-items-with-error-example-html" aria-controls="checkbox-items-with-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="checkbox-items-with-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
-

<fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + checkbox items with error + example in a new tab + +

+ + + + +
HTML
+
+
+ 
<div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         What is your nationality?
       </h1>
@@ -5043,392 +5061,395 @@ 
Error messages

           Citizen of another country
         </label>
       </div>
-    </div>

-
  </fieldset>
+    </div>
+
+  </fieldset>
 </div>
Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-checkbox-items-with-error-example-details">
-
+
+ + +
Nunjucks macro options
- -
<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-checkbox-items-with-error-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the input <code>aria-describedby</code> attribute without a fieldset, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-checkbox-items-with-error-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for all checkbox items.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of checkbox items objects.
-                    See <a href="#options-checkbox-items-with-error-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">values</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 checkboxes 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 anchor tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each checkbox item label. 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 to use within each checkbox item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the checkbox input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each checkbox item label.
-                    
-                      See <a href="#options-checkbox-items-with-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each checkbox item.
-                    
-                      See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate checkbox items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the checkbox should be checked when the page loads. Takes precedence over the top-level <code>values</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">behaviour</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If set to <code>exclusive</code>, implements a &#39;None of these&#39; type behaviour via JavaScript when checkboxes are clicked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, checkbox will be disabled.
-                </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 checkbox input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
+ +

+ 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
NameTypeDescription
describedBystring + One or more element IDs to add to the input aria-describedby attribute without a fieldset, used to provide additional descriptive information for screenreader users. +
fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
hintobject + Options for the hint component (for example text). + + See hint. +
errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
formGroupobject + Options for the form-group wrapper. + See formGroup. +
idPrefixstring + String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead. +
namestring + Required. + Name attribute for all checkbox items. +
itemsarray + Required. + Array of checkbox items objects. + See items. +
valuesarray + Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
classesstring + Classes to add to the checkboxes container. +
attributesobject + HTML attributes (for example data attributes) to add to the anchor tag. +
+ + + + + + + + + + + + + + + + + +
Options for formGroup
NameTypeDescription
classesstring + Classes to add to the form group (for example to show error state for the whole group). +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for items
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within each checkbox item label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within each checkbox item label. If html is provided, the text option will be ignored. +
idstring + Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied. +
namestring + Specific name for the checkbox item. If omitted, then component global name string will be applied. +
valuestring + Required. + Value for the checkbox input. +
labelobject + Provide attributes and classes to each checkbox item label. + + See label. +
hintobject + Provide hint to each checkbox item. + + See hint. +
dividerstring + Divider text to separate checkbox items, for example the text 'or'. +
checkedboolean + Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option. +
conditionalboolean + If true, content provided will be revealed when the item is checked. +
conditional.htmlstring + Provide content for the conditional reveal. +
behaviourstring + If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked. +
disabledboolean + If true, checkbox will be disabled. +
attributesobject + HTML attributes (for example data attributes) to add to the checkbox input tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for hint
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
idstring + Optional ID attribute to add to the hint span tag. +
classesstring + Classes to add to the hint span tag. +
attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Options for label
NameTypeDescription
textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
forstring + The value of the for attribute, the ID of the input the label is associated with. +
isPageHeadingboolean + Whether the label also acts as the heading for the page. +
classesstring + Classes to add to the label tag. +
attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
+ +
-
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
-

{{ govukCheckboxes({ +

+ 
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "nationality",
   name: "nationality",
   fieldset: {
     legend: {
       text: "What is your nationality?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -5456,7 +5477,7 @@ 
Error messages

   ]
 }) }}
-

+
diff --git a/deploy/public/components/cookie-banner/index.html b/deploy/public/components/cookie-banner/index.html index 3dee1adf05..2d8dc544e2 100644 --- a/deploy/public/components/cookie-banner/index.html +++ b/deploy/public/components/cookie-banner/index.html @@ -1138,273 +1138,275 @@

Open this - -
<span class="govuk-visually-hidden">default – cookie banner</span>
-      example in a new tab
-    </a>
+
+          default – cookie banner
+          example in a new tab
+        
+
+ + + + +
HTML
+
+
+ 
<div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+  <div class="govuk-cookie-banner__message govuk-width-container">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">We use some essential cookies to make this service work.</p>
+          <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button value="accept" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+        Accept analytics cookies
+      </button>
+      <button value="reject" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+        Reject analytics cookies
+      </button>
+      <a class="govuk-link" href="#">View cookies</a>
+    </div>
   </div>
-  <iframe title="Default – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-cookie-banner-example-html" role="tab" aria-controls="default-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-cookie-banner-example-nunjucks" role="tab" aria-controls="default-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-cookie-banner-example-html" aria-controls="default-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner &quot;</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Cookies on [name of service]&quot;</span>&gt;</span>
-
-

<div class="govuk-cookie-banner__message govuk-width-container">

-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d also like to use analytics cookies so we can understand how you use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;accept&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Accept analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;reject&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Reject analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-

</div> </div>

Nunjucks
-

-
<details class="govuk-details app-options" data-module="govuk-details" id="options-default-cookie-banner-example-details">
-
+
+ + + -
<div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
-

{% set html %} +

+ 
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
 {% endset %}
+
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
   messages: [
@@ -1433,7 +1435,7 @@ 

   ]
 }) }}
-

+
@@ -1479,7 +1481,7 @@

How it works

  • set any non-essential cookies unless the user accepted them on a previous visit

    • Position the cookie banner after the opening <body> tag and before the ’skip to main content‘ link. If you’re using the Nunjucks page template, use the bodyStart block.

    -

    Option 1: If you’re only using essential cookies

    +

    Option 1: If you’re only using essential cookies

    You can choose not to have a cookie banner if the service only sets essential or ‘strictly necessary’ cookies, as these do not need user consent.

    However, you must tell users that you set essential cookies. You can do this with a cookies page — link to this page in the footer.

    Option 2: If you set non-essential cookies on the server

    @@ -1492,275 +1494,278 @@

    Option 2: If yo
    Open this - -
    <span class="govuk-visually-hidden">server-side implementation – cookie banner</span>
-      example in a new tab
-    </a>
+
+          server-side implementation – cookie banner
+          example in a new tab
+        
+
    + + + + +
    HTML
    +
    +
    + 
    <form method="POST">
+  <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+    <div class="govuk-cookie-banner__message govuk-width-container">
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">We use some essential cookies to make this service work.</p>
+            <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Accept additional cookies
+        </button>
+        <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Reject additional cookies
+        </button>
+        <a class="govuk-link" href="#">View cookies</a>
+      </div>
+    </div>
   </div>
-  <iframe title="Server-side implementation – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/server-side/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-server-side-implementation-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-cookie-banner-example-html" role="tab" aria-controls="server-side-implementation-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-cookie-banner-example-nunjucks" role="tab" aria-controls="server-side-implementation-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#server-side-implementation-cookie-banner-example-html" aria-controls="server-side-implementation-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="server-side-implementation-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;POST&quot;</span>&gt;</span>
-
    -

    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]"> - <div class="govuk-cookie-banner__message govuk-width-container">

    -
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;accept&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Accept additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;reject&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Reject additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    -

    </div>

    -

    </form> + +</form>

    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set html %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
 {% endset %}
+
 <form method="POST">
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
@@ -1791,7 +1796,7 @@ 
    Option 2: If yo
 }) }}
 </form>
    -

    +
    @@ -1803,268 +1808,271 @@

    Option 2: If yo
    Open this - -
    <span class="govuk-visually-hidden">server-side implementation with confirmation – cookie banner</span>
-      example in a new tab
-    </a>
+
+          server-side implementation with confirmation – cookie banner
+          example in a new tab
+        
+
    + + + + +
    HTML
    +
    +
    + 
    <form method="POST">
+  <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+    <div class="govuk-cookie-banner__message govuk-width-container">
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <a href="#" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
+          Hide cookie message
+        </a>
+      </div>
+    </div>
   </div>
-  <iframe title="Server-side implementation with confirmation – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/server-side-confirmation/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-server-side-implementation-with-confirmation-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-confirmation-cookie-banner-example-html" role="tab" aria-controls="server-side-implementation-with-confirmation-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-confirmation-cookie-banner-example-nunjucks" role="tab" aria-controls="server-side-implementation-with-confirmation-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#server-side-implementation-with-confirmation-cookie-banner-example-html" aria-controls="server-side-implementation-with-confirmation-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="server-side-implementation-with-confirmation-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;POST&quot;</span>&gt;</span>
-
    -

    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]"> - <div class="govuk-cookie-banner__message govuk-width-container">

    -
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve accepted additional cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Hide cookie message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    -

    </div>

    -

    </form> + +</form>

    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-with-confirmation-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set acceptHtml %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set acceptHtml %}
   <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 <form method="POST">
   {{ govukCookieBanner({
     ariaLabel: "Cookies on [name of service]",
@@ -2083,7 +2091,7 @@ 
    Option 2: If yo
   }) }}
 </form>
    -

    +
    @@ -2100,317 +2108,322 @@

    Help users ke
    Open this - -
    <span class="govuk-visually-hidden">server-side implementation with multiple messages and question visible – cookie banner</span>
-      example in a new tab
-    </a>
+
+          server-side implementation with multiple messages and question visible – cookie banner
+          example in a new tab
+        
+
    + + + + +
    HTML
    +
    +
    + 
    <form method="POST">
+  <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+    <div class="govuk-cookie-banner__message govuk-width-container">
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">We use some essential cookies to make this service work.</p>
+            <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Accept additional cookies
+        </button>
+        <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Reject additional cookies
+        </button>
+        <a class="govuk-link" href="#">View cookies</a>
+      </div>
+    </div>
+
+    <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <a href="#" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
+          Hide cookie message
+        </a>
+      </div>
+    </div>
+
+    <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">You’ve rejected additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <a href="#" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
+          Hide cookie message
+        </a>
+      </div>
+    </div>
   </div>
-  <iframe title="Server-side implementation with multiple messages and question visible – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/server-side-multiple-messages-question-visible/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-html" role="tab" aria-controls="server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-nunjucks" role="tab" aria-controls="server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-html" aria-controls="server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;POST&quot;</span>&gt;</span>
-
    -

    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]"> - <div class="govuk-cookie-banner__message govuk-width-container">

    -
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;accept&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Accept additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;reject&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Reject additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__message govuk-width-container&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve accepted additional cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Hide cookie message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__message govuk-width-container&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve rejected additional cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Hide cookie message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    -

    </div>

    -

    </form> + +</form>

    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set html %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
 {% endset %}
+
 {% set acceptHtml %}
   <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {% set rejectedHtml %}
   <p class="govuk-body">You’ve rejected additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 <form method="POST">
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
@@ -2463,7 +2476,7 @@ 
    Help users ke
 }) }}
 </form>
    -

    +
    @@ -2474,317 +2487,322 @@

    Help users ke
    Open this - -
    <span class="govuk-visually-hidden">server-side implementation with multiple messages and confirmation visible – cookie banner</span>
-      example in a new tab
-    </a>
+
+          server-side implementation with multiple messages and confirmation visible – cookie banner
+          example in a new tab
+        
+
    + + + + +
    HTML
    +
    +
    + 
    <form method="POST">
+  <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+    <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">We use some essential cookies to make this service work.</p>
+            <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <button value="accept" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Accept additional cookies
+        </button>
+        <button value="reject" type="submit" name="cookies" class="govuk-button" data-module="govuk-button">
+          Reject additional cookies
+        </button>
+        <a class="govuk-link" href="#">View cookies</a>
+      </div>
+    </div>
+
+    <div class="govuk-cookie-banner__message govuk-width-container">
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <a href="#" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
+          Hide cookie message
+        </a>
+      </div>
+    </div>
+
+    <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">You’ve rejected additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <a href="#" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
+          Hide cookie message
+        </a>
+      </div>
+    </div>
   </div>
-  <iframe title="Server-side implementation with multiple messages and confirmation visible – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/server-side-multiple-messages-confirmation-visible/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-html" role="tab" aria-controls="server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-nunjucks" role="tab" aria-controls="server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-html" aria-controls="server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;POST&quot;</span>&gt;</span>
-
    -

    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]"> - <div class="govuk-cookie-banner__message govuk-width-container" hidden>

    -
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;accept&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Accept additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;reject&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Reject additional cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__message govuk-width-container&quot;</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve accepted additional cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Hide cookie message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__message govuk-width-container&quot;</span> <span class="hljs-attr">hidden</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve rejected additional cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Hide cookie message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    -

    </div>

    -

    </form> + +</form>

    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set html %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d like to set additional cookies so we can remember your settings, understand how people use the service and make improvements.</p>
 {% endset %}
+
 {% set acceptHtml %}
   <p class="govuk-body">You’ve accepted additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {% set rejectedHtml %}
   <p class="govuk-body">You’ve rejected additional cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 <form method="POST">
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
@@ -2837,7 +2855,7 @@ 
    Help users ke
 }) }}
 </form>
    -

    +
    @@ -2860,313 +2878,319 @@

    When the user has accepted cookies Open this - -
    <span class="govuk-visually-hidden">accepted replacement message – cookie banner</span>
-      example in a new tab
-    </a>
+
+          accepted replacement message – cookie banner
+          example in a new tab
+        
+      
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+  <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">We use some essential cookies to make this service work.</p>
+          <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button type="button" class="govuk-button" data-module="govuk-button">
+        Accept analytics cookies
+      </button>
+      <button type="button" class="govuk-button" data-module="govuk-button">
+        Reject analytics cookies
+      </button>
+      <a class="govuk-link" href="#">View cookies</a>
+    </div>
+  </div>
+
+  <div class="govuk-cookie-banner__message govuk-width-container" role="alert">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button class="govuk-button" data-module="govuk-button">
+        Hide cookie message
+      </button>
+    </div>
+  </div>
+
+  <div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button class="govuk-button" data-module="govuk-button">
+        Hide cookie message
+      </button>
+    </div>
   </div>
-  <iframe title="Accepted replacement message – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/client-side-accepted/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-accepted-replacement-message-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accepted-replacement-message-cookie-banner-example-html" role="tab" aria-controls="accepted-replacement-message-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#accepted-replacement-message-cookie-banner-example-nunjucks" role="tab" aria-controls="accepted-replacement-message-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#accepted-replacement-message-cookie-banner-example-html" aria-controls="accepted-replacement-message-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="accepted-replacement-message-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner &quot;</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Cookies on [name of service]&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" hidden>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d also like to use analytics cookies so we can understand how you use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Accept analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Reject analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" role="alert">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve accepted analytics cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Hide cookie message
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve rejected analytics cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Hide cookie message
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
 </div>
    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-accepted-replacement-message-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set html %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
 {% endset %}
+
 {% set acceptHtml %}
   <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {% set rejectHtml %}
   <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
   messages: [
@@ -3574,7 +3604,7 @@ 
    When the user has accepted cookies
    -

    +
    @@ -3585,313 +3615,319 @@

    When the user has rejected cookies Open this - -
    <span class="govuk-visually-hidden">rejected replacement message – cookie banner</span>
-      example in a new tab
-    </a>
+
+          rejected replacement message – cookie banner
+          example in a new tab
+        
+      
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
+  <div class="govuk-cookie-banner__message govuk-width-container" hidden>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">We use some essential cookies to make this service work.</p>
+          <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button type="button" class="govuk-button" data-module="govuk-button">
+        Accept analytics cookies
+      </button>
+      <button type="button" class="govuk-button" data-module="govuk-button">
+        Reject analytics cookies
+      </button>
+      <a class="govuk-link" href="#">View cookies</a>
+    </div>
+  </div>
+
+  <div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button class="govuk-button" data-module="govuk-button">
+        Hide cookie message
+      </button>
+    </div>
+  </div>
+
+  <div class="govuk-cookie-banner__message govuk-width-container" role="alert">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+
+        <div class="govuk-cookie-banner__content">
+          <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="govuk-button-group">
+      <button class="govuk-button" data-module="govuk-button">
+        Hide cookie message
+      </button>
+    </div>
   </div>
-  <iframe title="Rejected replacement message – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/client-side-rejected/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-rejected-replacement-message-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#rejected-replacement-message-cookie-banner-example-html" role="tab" aria-controls="rejected-replacement-message-cookie-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#rejected-replacement-message-cookie-banner-example-nunjucks" role="tab" aria-controls="rejected-replacement-message-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#rejected-replacement-message-cookie-banner-example-html" aria-controls="rejected-replacement-message-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="rejected-replacement-message-cookie-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner &quot;</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;Cookies on [name of service]&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" hidden>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We’d also like to use analytics cookies so we can understand how you use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Accept analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Reject analytics cookies
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve accepted analytics cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Hide cookie message
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
    
-
      <div class="govuk-cookie-banner__message govuk-width-container" role="alert">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You’ve rejected analytics cookies. You can <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>change your cookie settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> at any time.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-    Hide cookie message
-  <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
 </div>
    Nunjucks
    -

    -
    <details class="govuk-details app-options" data-module="govuk-details" id="options-rejected-replacement-message-cookie-banner-example-details">
-
    +
    + + + -
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/cookie-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCookieBanner %}
-
    -

    {% set html %} +

    + 
    {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
+
+{% set html %}
   <p class="govuk-body">We use some essential cookies to make this service work.</p>
   <p class="govuk-body">We’d also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
 {% endset %}
+
 {% set acceptHtml %}
   <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {% set rejectHtml %}
   <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="#">change your cookie settings</a> at any time.</p>
 {% endset %}
+
 {{ govukCookieBanner({
   ariaLabel: "Cookies on [name of service]",
   messages: [
@@ -3936,7 +3972,7 @@ 
    When the user has rejected cookies
    -

    +
    @@ -3950,280 +3986,282 @@

    If you’re using essential cookies and analytics cookies

    +

    If you’re using essential cookies and analytics cookies

    You can use this example text for a service which sets essential and analytics cookies. Analytics cookies are those set by your organisation to collect information about how people are using your digital service.

    - +

    You can use this example text for a service that set:

    • essential cookies
      • @@ -4269,273 +4307,275 @@

      Open this - -
      <span class="govuk-visually-hidden">date input</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/date-input/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-date-input-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-example-html" role="tab" aria-controls="date-input-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-example-nunjucks" role="tab" aria-controls="date-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#date-input-example-html" aria-controls="date-input-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="date-input-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + date input + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -1163,7 +1162,7 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1171,7 +1170,7 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1179,275 +1178,278 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-date-input-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-date-input-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-date-input-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-date-input-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-date-input-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "passport-issued",
   namePrefix: "passport-issued",
   fieldset: {
     legend: {
       text: "When was your passport issued?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -1455,7 +1457,7 @@ 
      
   }
 }) }}
      -

      +
      @@ -1477,25 +1479,24 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">date input second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date input second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/date-input/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-date-input-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-second-example-html" role="tab" aria-controls="date-input-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-second-example-nunjucks" role="tab" aria-controls="date-input-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#date-input-second-example-html" aria-controls="date-input-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="date-input-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + date input second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -1509,7 +1510,7 @@ 
      How it works
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1517,7 +1518,7 @@ 
      How it works
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1525,275 +1526,278 @@ 
      How it works
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-date-input-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-date-input-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-date-input-second-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-date-input-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-date-input-second-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "passport-issued",
   namePrefix: "passport-issued",
   fieldset: {
     legend: {
       text: "When was your passport issued?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -1801,37 +1805,36 @@ 
      How it works
      
   }
 }) }}
      -

      +

      Never automatically tab users between the fields of the date input because this can be confusing and may clash with normal keyboard controls.

      -

      If you’re asking more than one question on the page

      +

      If you’re asking more than one question on the page

      If you’re asking more than one question on the page, do not set the contents of the <legend> as the page heading. Read more about asking multiple questions on question pages.

      Open this - -
      <span class="govuk-visually-hidden">date input without a heading second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date input without a heading second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/date-input/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-date-input-without-a-heading-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-without-a-heading-second-example-html" role="tab" aria-controls="date-input-without-a-heading-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-without-a-heading-second-example-nunjucks" role="tab" aria-controls="date-input-without-a-heading-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#date-input-without-a-heading-second-example-html" aria-controls="date-input-without-a-heading-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="date-input-without-a-heading-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint"> + + date input without a heading second + example in a new tab + +

      + +
      + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint">
     <legend class="govuk-fieldset__legend">
       When was your passport issued?
     </legend>
@@ -1844,7 +1847,7 @@ 
      If you’re asking m
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1852,7 +1855,7 @@ 
      If you’re asking m
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1860,268 +1863,271 @@ 
      If you’re asking m
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-date-input-without-a-heading-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-date-input-without-a-heading-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-date-input-without-a-heading-second-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-date-input-without-a-heading-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-date-input-without-a-heading-second-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "passport-issued",
   namePrefix: "passport-issued",
   fieldset: {
@@ -2134,7 +2140,7 @@ 
      If you’re asking m
   }
 }) }}
      -

      +
      @@ -2147,25 +2153,24 @@

      Use the autocomplete
      Open this - -
      <span class="govuk-visually-hidden">date input to ask for date of birth</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date input to ask for date of birth example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/date-input/date-of-birth/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-2-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-2-open-html" role="tab" aria-controls="default-2-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-2-open-nunjucks" role="tab" aria-controls="default-2-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-2-open-html" aria-controls="default-2-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-2-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + date input to ask for date of birth + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         What is your date of birth?
       </h1>
@@ -2179,7 +2184,7 @@ 
      Use the autocomplete
           <label class="govuk-label govuk-date-input__label" for="dob-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2187,7 +2192,7 @@ 
      Use the autocomplete
           <label class="govuk-label govuk-date-input__label" for="dob-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2195,275 +2200,278 @@ 
      Use the autocomplete
           <label class="govuk-label govuk-date-input__label" for="dob-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-default-2-open-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-default-2-open--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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-default-2-open--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-default-2-open--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-default-2-open--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-2-open--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-2-open--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-2-open--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "dob",
   namePrefix: "dob",
   fieldset: {
     legend: {
       text: "What is your date of birth?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2472,23 +2480,23 @@ 
      Use the autocomplete
   items: [
     {
       name: "day",
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       autocomplete: "bday-day"
     },
     {
       name: "month",
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       autocomplete: "bday-month"
     },
     {
       name: "year",
-      classes: "govuk-input–width-4",
+      classes: "govuk-input--width-4",
       autocomplete: "bday-year"
     }
   ]
 }) }}
      -

      +
      @@ -2502,25 +2510,24 @@

      Error messages

      Open this - -
      <span class="govuk-visually-hidden">date input with errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date input with errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/date-input/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-date-input-with-errors-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-with-errors-example-html" role="tab" aria-controls="date-input-with-errors-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-input-with-errors-example-nunjucks" role="tab" aria-controls="date-input-with-errors-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#date-input-with-errors-example-html" aria-controls="date-input-with-errors-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="date-input-with-errors-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + date input with errors + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -2537,7 +2544,7 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2 govuk-input–error" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2545,7 +2552,7 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2 govuk-input–error" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2553,275 +2560,278 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4 govuk-input–error" id="passport-issued-year" name="passport-issued-year" type="text" value="2076" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="passport-issued-year" name="passport-issued-year" type="text" value="2076" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-date-input-with-errors-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-date-input-with-errors-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-date-input-with-errors-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-date-input-with-errors-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-date-input-with-errors-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "passport-issued",
   namePrefix: "passport-issued",
   fieldset: {
     legend: {
       text: "When was your passport issued?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2832,24 +2842,24 @@ 
      Error messages
      
   },
   items: [
     {
-      classes: "govuk-input–width-2 govuk-input–error",
+      classes: "govuk-input--width-2 govuk-input--error",
       name: "day",
       value: "6"
     },
     {
-      classes: "govuk-input–width-2 govuk-input–error",
+      classes: "govuk-input--width-2 govuk-input--error",
       name: "month",
       value: "3"
     },
     {
-      classes: "govuk-input–width-4 govuk-input–error",
+      classes: "govuk-input--width-4 govuk-input--error",
       name: "year",
       value: "2076"
     }
   ]
 }) }}
      -

      +
      @@ -2860,25 +2870,24 @@

      Error messages

      Open this - -
      <span class="govuk-visually-hidden">dates with errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Dates with errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/date-input/error-single/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-dates-with-errors-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#dates-with-errors-example-html" role="tab" aria-controls="dates-with-errors-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#dates-with-errors-example-nunjucks" role="tab" aria-controls="dates-with-errors-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#dates-with-errors-example-html" aria-controls="dates-with-errors-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="dates-with-errors-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + dates with errors + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -2895,7 +2904,7 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2903,7 +2912,7 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -2911,275 +2920,278 @@ 
      Error messages
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="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">
+          <input class="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>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-dates-with-errors-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-dates-with-errors-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">namePrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional prefix. This is used to prefix each <code>item.name</code> using <code>-</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of input objects with name, value and classes.
-                    See <a href="#options-dates-with-errors-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-dates-with-errors-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-dates-with-errors-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </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 date-input 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 date-input container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-dates-with-errors-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific ID. If provided, it will be used instead of the generated ID.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Item-specific name attribute.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If provided, it will be used as the initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </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 date input item.
-                </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 date input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-dates-with-errors-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-dates-with-errors-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + This is used for the main component and to compose the ID attribute for each item. +
      namePrefixstring + Optional prefix. This is used to prefix each item.name using -. +
      itemsarray + An array of input objects with name, value and classes. + See items. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
      classesstring + Classes to add to the date-input container. +
      attributesobject + HTML attributes (for example data attributes) to add to the date-input container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      idstring + Item-specific ID. If provided, it will be used instead of the generated ID. +
      namestring + Required. + Item-specific name attribute. +
      labelstring + Item-specific label text. If provided, this will be used instead of name for item label text. +
      valuestring + If provided, it will be used as the initial value of the input. +
      autocompletestring + Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      classesstring + Classes to add to date input item. +
      attributesobject + HTML attributes (for example data attributes) to add to the date input tag. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   id: "passport-issued",
   namePrefix: "passport-issued",
   fieldset: {
     legend: {
       text: "When was your passport issued?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -3190,23 +3202,23 @@ 
      Error messages
      
   },
   items: [
     {
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       name: "day",
       value: "6"
     },
     {
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       name: "month",
       value: "3"
     },
     {
-      classes: "govuk-input–width-4 govuk-input–error",
+      classes: "govuk-input--width-4 govuk-input--error",
       name: "year"
     }
   ]
 }) }}
      -

      +
      diff --git a/deploy/public/components/details/index.html b/deploy/public/components/details/index.html index e693d18579..3b0d744a41 100644 --- a/deploy/public/components/details/index.html +++ b/deploy/public/components/details/index.html @@ -1131,24 +1131,23 @@

      Open this - -
      <span class="govuk-visually-hidden">details</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Details example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/details/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-details-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-example-html" role="tab" aria-controls="details-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-example-nunjucks" role="tab" aria-controls="details-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#details-example-html" aria-controls="details-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="details-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-details&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-details&quot;</span>&gt;</span>
-
      -

      <summary class="govuk-details__summary"> + + details + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <details class="govuk-details" data-module="govuk-details">
+  <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       Help with nationality
     </span>
@@ -1160,119 +1159,121 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-details-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-details-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">summaryText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>summmaryHtml</code> is set, this is not required. Text to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summaryHtml</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>summmaryText</code> is set, this is not required. HTML to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
-                </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 to use within the disclosed part of the details element. 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 to use within the disclosed part of the details element. 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">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 details component in a <code>call</code> block.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID to add to the details element.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">open</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, details element will be expanded.
-                </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 <code>&lt;details&gt;</code> element.
-                </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 <code>&lt;details&gt;</code> element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      summaryTextstring + Required. + If summmaryHtml is set, this is not required. Text to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText option will be ignored. +
      summaryHtmlstring + Required. + If summmaryText is set, this is not required. HTML to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText option will be ignored. +
      textstring + Required. + If html is set, this is not required. Text to use within the disclosed part of the details element. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the disclosed part of the details element. If html is provided, the text option will be ignored. +
      callernunjucks-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 details component in a call block. +
      idstring + ID to add to the details element. +
      openboolean + If true, details element will be expanded. +
      classesstring + Classes to add to the <details> element. +
      attributesobject + HTML attributes (for example data attributes) to add to the <details> element. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/details/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDetails %}
-
      -

      {{ govukDetails({ +

      + 
      {% from "govuk/components/details/macro.njk" import govukDetails %}
+
+{{ govukDetails({
   summaryText: "Help with nationality",
   text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
 }) }}
      -

      +
      @@ -1293,24 +1294,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">details second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Details second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/details/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-details-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-second-example-html" role="tab" aria-controls="details-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#details-second-example-nunjucks" role="tab" aria-controls="details-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#details-second-example-html" aria-controls="details-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="details-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-details&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-details&quot;</span>&gt;</span>
-
      -

      <summary class="govuk-details__summary"> + + details second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <details class="govuk-details" data-module="govuk-details">
+  <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       Help with nationality
     </span>
@@ -1322,119 +1322,121 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-details-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-details-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">summaryText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>summmaryHtml</code> is set, this is not required. Text to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">summaryHtml</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  If <code>summmaryText</code> is set, this is not required. HTML to use within the summary element (the visible part of the details element). If <code>summaryHtml</code> is provided, the <code>summaryText</code> option will be ignored.
-                </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 to use within the disclosed part of the details element. 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 to use within the disclosed part of the details element. 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">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 details component in a <code>call</code> block.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID to add to the details element.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">open</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, details element will be expanded.
-                </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 <code>&lt;details&gt;</code> element.
-                </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 <code>&lt;details&gt;</code> element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      summaryTextstring + Required. + If summmaryHtml is set, this is not required. Text to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText option will be ignored. +
      summaryHtmlstring + Required. + If summmaryText is set, this is not required. HTML to use within the summary element (the visible part of the details element). If summaryHtml is provided, the summaryText option will be ignored. +
      textstring + Required. + If html is set, this is not required. Text to use within the disclosed part of the details element. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the disclosed part of the details element. If html is provided, the text option will be ignored. +
      callernunjucks-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 details component in a call block. +
      idstring + ID to add to the details element. +
      openboolean + If true, details element will be expanded. +
      classesstring + Classes to add to the <details> element. +
      attributesobject + HTML attributes (for example data attributes) to add to the <details> element. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/details/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDetails %}
-
      -

      {{ govukDetails({ +

      + 
      {% from "govuk/components/details/macro.njk" import govukDetails %}
+
+{{ govukDetails({
   summaryText: "Help with nationality",
   text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
 }) }}
      -

      +
      diff --git a/deploy/public/components/error-message/index.html b/deploy/public/components/error-message/index.html index 3799648010..d8800fa4f9 100644 --- a/deploy/public/components/error-message/index.html +++ b/deploy/public/components/error-message/index.html @@ -1132,25 +1132,24 @@

      Open this - -
      <span class="govuk-visually-hidden">error message</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error message example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/error-message/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-message-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-example-html" role="tab" aria-controls="error-message-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-example-nunjucks" role="tab" aria-controls="error-message-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-message-example-html" aria-controls="error-message-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-message-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + error message + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-hint passport-issued-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -1167,7 +1166,7 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2 govuk-input–error" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-day" name="passport-issued-day" type="text" value="6" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1175,7 +1174,7 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2 govuk-input–error" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="passport-issued-month" name="passport-issued-month" type="text" value="3" inputmode="numeric">
         </div>
       </div>
       <div class="govuk-date-input__item">
@@ -1183,105 +1182,108 @@ 
      
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-4 govuk-input–error" id="passport-issued-year" name="passport-issued-year" type="text" value="2076" inputmode="numeric">
+          <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="passport-issued-year" name="passport-issued-year" type="text" value="2076" inputmode="numeric">
         </div>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-message-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-message-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">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 to use within the error message. 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 to use within the error message. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the error message span tag.
-                </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 message span tag.
-                </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 message span tag.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  A visually hidden prefix used before the error message. Defaults to &#39;Error&#39;.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the error message. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the error message. If html is provided, the text option will be ignored. +
      idstring + ID attribute to add to the error message span tag. +
      classesstring + Classes to add to the error message span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the error message span tag. +
      visuallyHiddenTextstring + A visually hidden prefix used before the error message. Defaults to 'Error'. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {{ govukDateInput({ +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
+{{ govukDateInput({
   fieldset: {
     legend: {
       text: "When was your passport issued?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -1294,24 +1296,24 @@ 
      
   namePrefix: "passport-issued",
   items: [
     {
-      classes: "govuk-input–width-2 govuk-input–error",
+      classes: "govuk-input--width-2 govuk-input--error",
       name: "day",
       value: "6"
     },
     {
-      classes: "govuk-input–width-2 govuk-input–error",
+      classes: "govuk-input--width-2 govuk-input--error",
       name: "month",
       value: "3"
     },
     {
-      classes: "govuk-input–width-4 govuk-input–error",
+      classes: "govuk-input--width-4 govuk-input--error",
       name: "year",
       value: "2076"
     }
   ]
 }) }}
      -

      +
      @@ -1353,97 +1355,97 @@

      How it works

      Nunjucks
      - - -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-message-with-a-custom-visually-hidden-prefix-example-open-details">
-
      + + +
      Nunjucks macro options
      - -
      <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-message-with-a-custom-visually-hidden-prefix-example-open--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">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 to use within the error message. 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 to use within the error message. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the error message span tag.
-                </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 message span tag.
-                </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 message span tag.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  A visually hidden prefix used before the error message. Defaults to &#39;Error&#39;.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the error message. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the error message. If html is provided, the text option will be ignored. +
      idstring + ID attribute to add to the error message span tag. +
      classesstring + Classes to add to the error message span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the error message span tag. +
      visuallyHiddenTextstring + A visually hidden prefix used before the error message. Defaults to 'Error'. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/error-message/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukErrorMessage %}
-
      -

      {{ govukErrorMessage({ +

      + 
      {% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
+
+{{ govukErrorMessage({
   text: "Rhowch eich enw llawn",
   visuallyHiddenText: "Gwall"
 }) }}
      -

      + @@ -1456,25 +1458,24 @@

      Legend

      Open this - -
      <span class="govuk-visually-hidden">error message with legend</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error message with Legend example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/error-message/legend/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-message-with-legend-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-with-legend-example-html" role="tab" aria-controls="error-message-with-legend-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-with-legend-example-nunjucks" role="tab" aria-controls="error-message-with-legend-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-message-with-legend-example-html" aria-controls="error-message-with-legend-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-message-with-legend-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + error message with legend + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         What is your nationality?
       </h1>
@@ -1504,104 +1505,107 @@ 
      Legend
      
           Citizen of another country
         </label>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-message-with-legend-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-message-with-legend-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">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 to use within the error message. 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 to use within the error message. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the error message span tag.
-                </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 message span tag.
-                </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 message span tag.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  A visually hidden prefix used before the error message. Defaults to &#39;Error&#39;.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the error message. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the error message. If html is provided, the text option will be ignored. +
      idstring + ID attribute to add to the error message span tag. +
      classesstring + Classes to add to the error message span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the error message span tag. +
      visuallyHiddenTextstring + A visually hidden prefix used before the error message. Defaults to 'Error'. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/checkboxes/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukCheckboxes %}
-
      -

      {{ govukCheckboxes({ +

      + 
      {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
+{{ govukCheckboxes({
   idPrefix: "nationality",
   name: "nationality",
   fieldset: {
     legend: {
       text: "What is your nationality?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -1626,7 +1630,7 @@ 
      Legend
      
   ]
 }) }}
      -

      +
      @@ -1637,24 +1641,23 @@

      Label

      Open this - -
      <span class="govuk-visually-hidden">error message with label</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error message with Label example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-message/label/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-message-with-label-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-with-label-example-html" role="tab" aria-controls="error-message-with-label-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-message-with-label-example-nunjucks" role="tab" aria-controls="error-message-with-label-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-message-with-label-example-html" aria-controls="error-message-with-label-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-message-with-label-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="national-insurance-number"> + + error message with label + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="national-insurance-number">
     National Insurance number
   </label>
   <div id="national-insurance-number-hint" class="govuk-hint">
@@ -1663,96 +1666,98 @@ 
      Label
      
   <p id="national-insurance-number-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
   </p>
-  <input class="govuk-input govuk-input–error" id="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint national-insurance-number-error">
+  <input class="govuk-input govuk-input--error" id="national-insurance-number" name="national-insurance-number" type="text" aria-describedby="national-insurance-number-hint national-insurance-number-error">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-message-with-label-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-message-with-label-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">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 to use within the error message. 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 to use within the error message. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the error message span tag.
-                </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 message span tag.
-                </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 message span tag.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  A visually hidden prefix used before the error message. Defaults to &#39;Error&#39;.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the error message. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the error message. If html is provided, the text option will be ignored. +
      idstring + ID attribute to add to the error message span tag. +
      classesstring + Classes to add to the error message span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the error message span tag. +
      visuallyHiddenTextstring + A visually hidden prefix used before the error message. Defaults to 'Error'. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "National Insurance number"
   },
@@ -1766,7 +1771,7 @@ 
      Label
      
   }
 }) }}
      -

      +
      diff --git a/deploy/public/components/error-summary/index.html b/deploy/public/components/error-summary/index.html index 0db58240ea..c69d734618 100644 --- a/deploy/public/components/error-summary/index.html +++ b/deploy/public/components/error-summary/index.html @@ -1132,24 +1132,23 @@

      Open this - -
      <span class="govuk-visually-hidden">error summary</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error summary example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-summary-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-summary-example-html" role="tab" aria-controls="error-summary-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-summary-example-nunjucks" role="tab" aria-controls="error-summary-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-summary-example-html" aria-controls="error-summary-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-summary-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;error-summary-title&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span>&gt;</span>
-
      -

      <h2 class="govuk-error-summary__title" id="error-summary-title"> + + error summary + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
     There is a problem
   </h2>
   <div class="govuk-error-summary__body">
@@ -1166,157 +1165,159 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-summary-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/error-summary/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukErrorSummary %}
-
      -

      {{ govukErrorSummary({ +

      + 
      {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
+{{ govukErrorSummary({
   titleText: "There is a problem",
   errorList: [
     {
@@ -1330,7 +1331,7 @@ 
      
   ]
 }) }}
      -

      +
      @@ -1353,24 +1354,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">error summary second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error summary second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-summary-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-summary-second-example-html" role="tab" aria-controls="error-summary-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-summary-second-example-nunjucks" role="tab" aria-controls="error-summary-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-summary-second-example-html" aria-controls="error-summary-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-summary-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;error-summary-title&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">data-disable-auto-focus</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span>&gt;</span>
-
      -

      <h2 class="govuk-error-summary__title" id="error-summary-title"> + + error summary second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-disable-auto-focus="true" data-module="govuk-error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
     There is a problem
   </h2>
   <div class="govuk-error-summary__body">
@@ -1387,157 +1387,159 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-summary-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/error-summary/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukErrorSummary %}
-
      -

      {{ govukErrorSummary({ +

      + 
      {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
+{{ govukErrorSummary({
   titleText: "There is a problem",
   disableAutoFocus: true,
   errorList: [
@@ -1552,7 +1554,7 @@ 
      How it works
      
   ]
 }) }}
      -

      +
      @@ -1565,24 +1567,23 @@

      Linking from the error su
      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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;error-summary-title&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span>&gt;</span>
-
      -

      <h2 class="govuk-error-summary__title" id="error-summary-title"> + + linking from the error summary to an answer that uses a single field + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
     There is a problem
   </h2>
   <div class="govuk-error-summary__body">
@@ -1592,171 +1593,175 @@ 
      Linking from the error su
       </li>
     </ul>
   </div>
-</div>
      
-
      <h1 class="govuk-heading-l">Your details</h1>
      
-
      <div class="govuk-form-group govuk-form-group–error">
+</div>
+
+<h1 class="govuk-heading-l">Your details</h1>
+
+<div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="full-name-input">
     Full name
   </label>
   <p id="full-name-input-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter your full name
   </p>
-  <input class="govuk-input govuk-input–error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
+  <input class="govuk-input govuk-input--error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-linking-from-the-error-summary-to-an-answer-that-uses-a-single-field-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/error-summary/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukErrorSummary %}
-
      -

      {% from "govuk/components/input/macro.njk" import govukInput %} +

      + 
      {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukErrorSummary({
   titleText: "There is a problem",
   errorList: [
@@ -1766,7 +1771,9 @@ 
      Linking from the error su
     }
   ]
 }) }}
+
 <h1 class="govuk-heading-l">Your details</h1>
+
 {{ govukInput({
   label: {
     text: 'Full name'
@@ -1779,7 +1786,7 @@ 
      Linking from the error su
   }
 }) }}
      -

      +
      @@ -1791,24 +1798,23 @@

      Linking from the error su
      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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;error-summary-title&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span>&gt;</span>
-
      -

      <h2 class="govuk-error-summary__title" id="error-summary-title"> + + linking from the error summary to an answer that uses multiple fields + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
     There is a problem
   </h2>
   <div class="govuk-error-summary__body">
@@ -1818,10 +1824,11 @@ 
      Linking from the error su
       </li>
     </ul>
   </div>
-</div>
      
-
      <div class="govuk-form-group govuk-form-group–error">
+</div>
+
+<div class="govuk-form-group govuk-form-group--error">
   <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-error">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend–l">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         When was your passport issued?
       </h1>
@@ -1835,7 +1842,7 @@ 
      Linking from the error su
           <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
             Day
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-day" name="passport-issued-day" type="text" value="5" inputmode="numeric">
+          <input class="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>
       <div class="govuk-date-input__item">
@@ -1843,7 +1850,7 @@ 
      Linking from the error su
           <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
             Month
           </label>
-          <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="passport-issued-month" name="passport-issued-month" type="text" value="12" inputmode="numeric">
+          <input class="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>
       <div class="govuk-date-input__item">
@@ -1851,166 +1858,169 @@ 
      Linking from the error su
           <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
             Year
           </label>
-          <input class="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">
+          <input class="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>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-linking-from-the-error-summary-to-an-answer-that-uses-multiple-fields-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/date-input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukDateInput %}
-
      -

      {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %} +

      + 
      {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
 {{ govukErrorSummary({
   titleText: "There is a problem",
   errorList: [
@@ -2020,12 +2030,13 @@ 
      Linking from the error su
     }
   ]
 }) }}
+
 {{ govukDateInput({
   fieldset: {
     legend: {
       isPageHeading: true,
       text: 'When was your passport issued?',
-      classes: 'govuk-fieldset__legend–l'
+      classes: 'govuk-fieldset__legend--l'
     }
   },
   id: 'passport-issued',
@@ -2036,23 +2047,23 @@ 
      Linking from the error su
   items: [
     {
       name: "day",
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       value: 5
     },
     {
       name: "month",
-      classes: "govuk-input–width-2",
+      classes: "govuk-input--width-2",
       value: 12
     },
     {
       name: "year",
-      classes: "govuk-input–width-4 govuk-input–error"
+      classes: "govuk-input--width-4 govuk-input--error"
     }
   ]
   })
 }}
      -

      +
      @@ -2063,24 +2074,23 @@

      Linking from the error su
      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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;error-summary-title&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-error-summary&quot;</span>&gt;</span>
-
      -

      <h2 class="govuk-error-summary__title" id="error-summary-title"> + + linking from the error summary to checkboxes + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-error-summary" aria-labelledby="error-summary-title" role="alert" data-module="govuk-error-summary">
+  <h2 class="govuk-error-summary__title" id="error-summary-title">
     There is a problem
   </h2>
   <div class="govuk-error-summary__body">
@@ -2090,10 +2100,11 @@ 
      Linking from the error su
       </li>
     </ul>
   </div>
-</div>
      
-
      <div class="govuk-form-group govuk-form-group–error">
+</div>
+
+<div class="govuk-form-group govuk-form-group--error">
   <fieldset class="govuk-fieldset" aria-describedby="nationality-hint nationality-error">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend–l">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         What is your nationality?
       </h1>
@@ -2126,163 +2137,166 @@ 
      Linking from the error su
           Citizen of another country
         </label>
       </div>
-    </div>
      
-
        </fieldset>
+    </div>
+
+  </fieldset>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-linking-from-the-error-summary-to-checkboxes-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/error-summary/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukErrorSummary %}
-
      -

      {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %} +

      + 
      {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+
 {{ govukErrorSummary({
   titleText: "There is a problem",
   errorList: [
@@ -2292,6 +2306,7 @@ 
      Linking from the error su
     }
   ]
 }) }}
+
 {{ govukCheckboxes({
   idPrefix: "nationality",
   name: "nationality",
@@ -2299,7 +2314,7 @@ 
      Linking from the error su
     legend: {
       text: "What is your nationality?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2327,7 +2342,7 @@ 
      Linking from the error su
   ]
 }) }}
      -

      +
      @@ -2339,25 +2354,25 @@

      Where to put the error summary

      Open this - -
      <span class="govuk-visually-hidden">full page example</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Full page example example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/error-summary/full-page-example/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-full-page-example-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#full-page-example-example-html" role="tab" aria-controls="full-page-example-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#full-page-example-example-nunjucks" role="tab" aria-controls="full-page-example-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#full-page-example-example-html" aria-controls="full-page-example-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="full-page-example-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
      -

      <a href="#" class="govuk-back-link">Back</a>

      -

      <main class="govuk-main-wrapper " id="main-content" role="main"> + + full page example + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <form action="/form-handler" method="post" novalidate>
@@ -2372,218 +2387,221 @@ 
      Where to put the error summary
      
                 </li>
               </ul>
             </div>
-          </div>
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">&quot;passport-issued-error&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__legend govuk-fieldset__legend--l&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__heading&quot;</span>&gt;</span>
-              When was your passport issued?
-            <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-issued-error&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-error-message&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span>Error:<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> Passport issue date must include a year
-          <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-issued&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;passport-issued-day&quot;</span>&gt;</span>
-                  Day
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-issued-day&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;passport-issued-day&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;passport-issued-month&quot;</span>&gt;</span>
-                  Month
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-issued-month&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;passport-issued-month&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;12&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;passport-issued-year&quot;</span>&gt;</span>
-                  Year
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-issued-year&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;passport-issued-year&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </main>
+          </div>
+
+          <div class="govuk-form-group govuk-form-group--error">
+            <fieldset class="govuk-fieldset" role="group" aria-describedby="passport-issued-error">
+              <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+                <h1 class="govuk-fieldset__heading">
+                  When was your passport issued?
+                </h1>
+              </legend>
+              <p id="passport-issued-error" class="govuk-error-message">
+                <span class="govuk-visually-hidden">Error:</span> Passport issue date must include a year
+              </p>
+              <div class="govuk-date-input" id="passport-issued">
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="passport-issued-day">
+                      Day
+                    </label>
+                    <input class="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>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="passport-issued-month">
+                      Month
+                    </label>
+                    <input class="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>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="passport-issued-year">
+                      Year
+                    </label>
+                    <input class="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>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-full-page-example-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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>
-
      + +

      + 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
      NameTypeDescription
      titleTextstring + 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. +
      titleHtmlstring + 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. +
      descriptionTextstring + Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText. +
      descriptionHtmlstring + HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText. +
      callernunjucks-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. +
      errorListarray + Required. + The list of errors to include in the summary + See errorList. +
      disableAutoFocusboolean + Prevent moving focus to the error summary when the page loads. +
      classesstring + Classes to add to the error-summary container. +
      attributesobject + HTML attributes (for example data attributes) to add to the error-summary container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for errorList
      NameTypeDescription
      hrefstring + Href attribute for the error link item. If provided item will be an anchor. +
      textstring + 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. +
      htmlstring + 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. +
      attributesobject + HTML attributes (for example data attributes) to add to the error link anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/back-link/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukBackLink %}
-
      -

      {% from "govuk/components/button/macro.njk" import govukButton %} +

      + 
      {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
 {% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -2597,12 +2615,13 @@ 
      Where to put the error summary
      
             }
           ]
         }) }}
+
         {{ govukDateInput({
           fieldset: {
             legend: {
               isPageHeading: true,
               text: 'When was your passport issued?',
-              classes: 'govuk-fieldset__legend–l'
+              classes: 'govuk-fieldset__legend--l'
             }
           },
           id: 'passport-issued',
@@ -2613,30 +2632,32 @@ 
      Where to put the error summary
      
           items: [
             {
               name: "day",
-              classes: "govuk-input–width-2",
+              classes: "govuk-input--width-2",
               value: 5
             },
             {
               name: "month",
-              classes: "govuk-input–width-2",
+              classes: "govuk-input--width-2",
               value: 12
             },
             {
               name: "year",
-              classes: "govuk-input–width-4 govuk-input–error"
+              classes: "govuk-input--width-4 govuk-input--error"
             }
           ]
           })
         }}
+
         {{ govukButton({
           text: "Continue"
         }) }}
+
       </form>
     </div>      
   </div>
 {% endblock %}
      -

      +
      diff --git a/deploy/public/components/fieldset/index.html b/deploy/public/components/fieldset/index.html index 5e09a3910a..eff6391d11 100644 --- a/deploy/public/components/fieldset/index.html +++ b/deploy/public/components/fieldset/index.html @@ -1133,197 +1133,204 @@

      When to use this component

      Open this - -
      <span class="govuk-visually-hidden">fieldset address group</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Fieldset address group example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/fieldset/address-group/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-fieldset-address-group-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-address-group-example-html" role="tab" aria-controls="fieldset-address-group-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-address-group-example-nunjucks" role="tab" aria-controls="fieldset-address-group-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#fieldset-address-group-example-html" aria-controls="fieldset-address-group-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="fieldset-address-group-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span>&gt;</span>
-
      -

      <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + fieldset address group + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
     <h1 class="govuk-fieldset__heading">
       What is your address?
     </h1>
-  </legend>
      
-
        <div class="govuk-form-group">
+  </legend>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-line-1">
       Address line 1
     </label>
     <input class="govuk-input" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
-  </div>
      
-
        <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-line-2">
       Address line 2 (optional)
     </label>
     <input class="govuk-input" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
-  </div>
      
-
        <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-town">
       Town or city
     </label>
     <input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
-  </div>
      
-
        <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-postcode">
       Postcode
     </label>
-    <input class="govuk-input govuk-input–width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
-  </div>
      
-
      </fieldset>
      + <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code"> + </div> + +</fieldset>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-fieldset-address-group-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-fieldset-address-group-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">legend</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the legend
-                    See <a href="#options-fieldset-address-group-example--legend">legend</a>.
-                </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 fieldset container.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ARIA role attribute.
-                </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 fieldset container.
-                </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 ">
-                  HTML to use/render within the fieldset element.
-                </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 fieldset component in a <code>call</code> block.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fieldset-address-group-example--legend">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for legend</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">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 to use within the legend. 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 to use within the legend. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the legend.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the legend also acts as the heading for the page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      legendobject + Options for the legend + See legend. +
      classesstring + Classes to add to the fieldset container. +
      rolestring + Optional ARIA role attribute. +
      attributesobject + HTML attributes (for example data attributes) to add to the fieldset container. +
      htmlstring + HTML to use/render within the fieldset element. +
      callernunjucks-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 fieldset component in a call block. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for legend
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the legend. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the legend. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the legend. +
      isPageHeadingboolean + Whether the legend also acts as the heading for the page. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {% from "govuk/components/fieldset/macro.njk" import govukFieldset %} +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+
 {% call govukFieldset({
   legend: {
     text: "What is your address?",
-    classes: "govuk-fieldset__legend–l",
+    classes: "govuk-fieldset__legend--l",
     isPageHeading: true
   }
 }) %}
+
   {{ govukInput({
     label: {
       text: 'Address line 1'
@@ -1332,6 +1339,7 @@ 
      When to use this component
      
     name: "address-line-1",
     autocomplete: "address-line1"
   }) }}
+
   {{ govukInput({
     label: {
       text: 'Address line 2 (optional)'
@@ -1340,6 +1348,7 @@ 
      When to use this component
      
     name: "address-line-2",
     autocomplete: "address-line2"
   }) }}
+
   {{ govukInput({
     label: {
       text: "Town or city"
@@ -1349,18 +1358,20 @@ 
      When to use this component
      
     name: "address-town",
     autocomplete: "address-level2"
   }) }}
+
   {{ govukInput({
     label: {
       text: "Postcode"
     },
-    classes: "govuk-input–width-10",
+    classes: "govuk-input--width-10",
     id: "address-postcode",
     name: "address-postcode",
     autocomplete: "postal-code"
   }) }}
+
 {% endcall %}
      -

      +
      @@ -1375,24 +1386,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">fieldset</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Fieldset example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/fieldset/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-fieldset-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-example-html" role="tab" aria-controls="fieldset-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fieldset-example-nunjucks" role="tab" aria-controls="fieldset-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#fieldset-example-html" aria-controls="fieldset-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="fieldset-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span>&gt;</span>
-
      -

      <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + fieldset + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
     <h1 class="govuk-fieldset__heading">
       Legend as page heading
     </h1>
@@ -1401,148 +1411,150 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-fieldset-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-fieldset-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">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">legend</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the legend
-                    See <a href="#options-fieldset-example--legend">legend</a>.
-                </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 fieldset container.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ARIA role attribute.
-                </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 fieldset container.
-                </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 ">
-                  HTML to use/render within the fieldset element.
-                </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 fieldset component in a <code>call</code> block.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fieldset-example--legend">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for legend</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">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 to use within the legend. 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 to use within the legend. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the legend.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the legend also acts as the heading for the page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      legendobject + Options for the legend + See legend. +
      classesstring + Classes to add to the fieldset container. +
      rolestring + Optional ARIA role attribute. +
      attributesobject + HTML attributes (for example data attributes) to add to the fieldset container. +
      htmlstring + HTML to use/render within the fieldset element. +
      callernunjucks-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 fieldset component in a call block. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for legend
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the legend. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the legend. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the legend. +
      isPageHeadingboolean + Whether the legend also acts as the heading for the page. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/fieldset/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFieldset %}
-
      -

      {{ govukFieldset({ +

      + 
      {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+
+{{ govukFieldset({
   legend: {
     text: "Legend as page heading",
-    classes: "govuk-fieldset__legend–l",
+    classes: "govuk-fieldset__legend--l",
     isPageHeading: true
   }
 }) }}
      -

      +
      diff --git a/deploy/public/components/file-upload/index.html b/deploy/public/components/file-upload/index.html index 24ab178e7b..146a17ceb6 100644 --- a/deploy/public/components/file-upload/index.html +++ b/deploy/public/components/file-upload/index.html @@ -1132,24 +1132,23 @@

      Open this - -
      <span class="govuk-visually-hidden">file upload</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="File upload example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/file-upload/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-file-upload-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#file-upload-example-html" role="tab" aria-controls="file-upload-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#file-upload-example-nunjucks" role="tab" aria-controls="file-upload-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#file-upload-example-html" aria-controls="file-upload-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="file-upload-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="file-upload-1"> + + file upload + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
     Upload a file
   </label>
   <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
@@ -1157,254 +1156,256 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-file-upload-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-file-upload-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">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-file-upload-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-file-upload-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-file-upload-example--formGroup">formGroup</a>.
-                </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 file upload component.
-                </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 file upload component.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      namestring + Required. + The name of the input, which is submitted with the form data. +
      idstring + Required. + The ID of the input. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the file upload component. +
      attributesobject + HTML attributes (for example data attributes) to add to the file upload component. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/file-upload/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFileUpload %}
-
      -

      {{ govukFileUpload({ +

      + 
      {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+
+{{ govukFileUpload({
   id: "file-upload-1",
   name: "file-upload-1",
   label: {
@@ -1412,7 +1413,7 @@ 
      
   }
 }) }}
      -

      +
      @@ -1426,24 +1427,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">file upload second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="File upload second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/file-upload/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-file-upload-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#file-upload-second-example-html" role="tab" aria-controls="file-upload-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#file-upload-second-example-nunjucks" role="tab" aria-controls="file-upload-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#file-upload-second-example-html" aria-controls="file-upload-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="file-upload-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="file-upload-1"> + + file upload second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload-1">
     Upload a file
   </label>
   <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
@@ -1451,254 +1451,256 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-file-upload-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-file-upload-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">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-file-upload-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-file-upload-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-file-upload-second-example--formGroup">formGroup</a>.
-                </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 file upload component.
-                </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 file upload component.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-file-upload-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      namestring + Required. + The name of the input, which is submitted with the form data. +
      idstring + Required. + The ID of the input. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the file upload component. +
      attributesobject + HTML attributes (for example data attributes) to add to the file upload component. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/file-upload/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFileUpload %}
-
      -

      {{ govukFileUpload({ +

      + 
      {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+
+{{ govukFileUpload({
   id: "file-upload-1",
   name: "file-upload-1",
   label: {
@@ -1706,7 +1708,7 @@ 
      How it works
      
   }
 }) }}
      -

      +
      @@ -1718,282 +1720,283 @@

      Error messages

      Open this - -
      <span class="govuk-visually-hidden">error – file upload</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error – File upload example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/file-upload/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-file-upload-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-file-upload-example-html" role="tab" aria-controls="error-file-upload-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-file-upload-example-nunjucks" role="tab" aria-controls="error-file-upload-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-file-upload-example-html" aria-controls="error-file-upload-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-file-upload-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="file-upload-1"> + + error – file upload + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="file-upload-1">
     Upload a file
   </label>
   <p id="file-upload-1-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> The CSV must be smaller than 2MB
   </p>
-  <input class="govuk-file-upload govuk-file-upload–error" id="file-upload-1" name="file-upload-1" type="file" aria-describedby="file-upload-1-error">
+  <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-1" name="file-upload-1" type="file" aria-describedby="file-upload-1-error">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-error-file-upload-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-file-upload-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">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-error-file-upload-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-error-file-upload-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-error-file-upload-example--formGroup">formGroup</a>.
-                </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 file upload component.
-                </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 file upload component.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-file-upload-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-file-upload-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-error-file-upload-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      namestring + Required. + The name of the input, which is submitted with the form data. +
      idstring + Required. + The ID of the input. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the file upload component. +
      attributesobject + HTML attributes (for example data attributes) to add to the file upload component. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/file-upload/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFileUpload %}
-
      -

      {{ govukFileUpload({ +

      + 
      {% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+
+{{ govukFileUpload({
   id: "file-upload-1",
   name: "file-upload-1",
   label: {
@@ -2004,7 +2007,7 @@ 
      Error messages
      
   }
 }) }}
      -

      +
      diff --git a/deploy/public/components/footer/index.html b/deploy/public/components/footer/index.html index 58f635dd8c..b6e3aca65a 100644 --- a/deploy/public/components/footer/index.html +++ b/deploy/public/components/footer/index.html @@ -1131,351 +1131,352 @@

      Open this - -
      <span class="govuk-visually-hidden">footer</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Footer example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/footer/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-1"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-1-html" role="tab" aria-controls="default-1-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-1-nunjucks" role="tab" aria-controls="default-1-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-1-html" aria-controls="default-1-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-1-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;contentinfo&quot;</span>&gt;</span>
-
      -

      <div class="govuk-width-container "> + + footer + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
     <div class="govuk-footer__meta">
-      <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-      All content is available under the
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </div>
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
+      </div>
+    </div>
+  </div>
 </footer>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-default-1-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-default-1--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">meta</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Object containing options for the meta navigation.
-                    See <a href="#options-default-1--meta">meta</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigation</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of items for use in the navigation section of the footer.
-                    See <a href="#options-default-1--navigation">navigation</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">contentLicence</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Object containing options for the content licence.
-                    See <a href="#options-default-1--contentLicence">contentLicence</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">copyright</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Object containing options for the copyright notice.
-                    See <a href="#options-default-1--copyright">copyright</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">containerClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes that can be added to the inner container, useful if you want to make the footer full width.
-                </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 footer component 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 footer component container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--meta">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for meta</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">visuallyHiddenTitle</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Title for a meta item section. Defaults to &#39;Support links&#39;.
-                </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 ">
-                  HTML to add to the meta section of the footer, which will appear below any links specified using meta.items.
-                </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 ">
-                  Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of items for use in the meta section of the footer.
-                    See <a href="#options-default-1--items">items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  List item text in the meta section of the footer.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  List item href attribute in the meta section of the footer.
-                </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 anchor in the footer meta section.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--navigation">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for navigation</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">title</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Title for a section.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">columns</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Amount of columns to display items in navigation section of the footer.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">width</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, &#39;one-third&#39;; &#39;two-thirds&#39;; &#39;one-half&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of items to display in the list in navigation section of the footer.
-                    See <a href="#options-default-1--items">items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  List item text in the navigation section of the footer.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  List item href attribute in the navigation section of the footer. Both <code>text</code> and <code>href</code> attributes need to be present to create a link.
-                </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 anchor in the footer navigation section.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--contentLicence">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for contentLicence</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used.
-                </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 ">
-                  If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <code>&lt;span&gt;</code> element, so you can only add <a href="https://html.spec.whatwg.org/#phrasing-content">phrasing content</a> to it.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--copyright">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for copyright</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used.
-                </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 ">
-                  If <code>text</code> is set, this is not required. If <code>html</code> is provided, the <code>text</code> option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <code>&lt;a&gt;</code> element, so you can only use text formatting elements within it.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      metaobject + Object containing options for the meta navigation. + See meta. +
      navigationarray + Array of items for use in the navigation section of the footer. + See navigation. +
      contentLicenceobject + Object containing options for the content licence. + See contentLicence. +
      copyrightobject + Object containing options for the copyright notice. + See copyright. +
      containerClassesstring + Classes that can be added to the inner container, useful if you want to make the footer full width. +
      classesstring + Classes to add to the footer component container. +
      attributesobject + HTML attributes (for example data attributes) to add to the footer component container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for meta
      NameTypeDescription
      visuallyHiddenTitlestring + Title for a meta item section. Defaults to 'Support links'. +
      htmlstring + HTML to add to the meta section of the footer, which will appear below any links specified using meta.items. +
      textstring + Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored. +
      itemsarray + Array of items for use in the meta section of the footer. + See items. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      textstring + Required. + List item text in the meta section of the footer. +
      hrefstring + Required. + List item href attribute in the meta section of the footer. +
      attributesobject + HTML attributes (for example data attributes) to add to the anchor in the footer meta section. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for navigation
      NameTypeDescription
      titlestring + Required. + Title for a section. +
      columnsinteger + Amount of columns to display items in navigation section of the footer. +
      widthstring + Width of each navigation section in the footer. Defaults to full width. You can pass any design system grid width here, for example, 'one-third'; 'two-thirds'; 'one-half'. +
      itemsarray + Array of items to display in the list in navigation section of the footer. + See items. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for items
      NameTypeDescription
      textstring + Required. + List item text in the navigation section of the footer. +
      hrefstring + Required. + List item href attribute in the navigation section of the footer. Both text and href attributes need to be present to create a link. +
      attributesobject + HTML attributes (for example data attributes) to add to the anchor in the footer navigation section. +
      + + + + + + + + + + + + + + + + + + + + + + +
      Options for contentLicence
      NameTypeDescription
      textstring + If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, the text for the Open Government Licence is used. +
      htmlstring + If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, the text for the Open Government Licence is used. The content licence is inside a <span> element, so you can only add phrasing content to it. +
      + + + + + + + + + + + + + + + + + + + + + + +
      Options for copyright
      NameTypeDescription
      textstring + If html is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, Crown copyright is used. +
      htmlstring + If text is set, this is not required. If html is provided, the text option will be ignored. If neither are provided, Crown copyright is used. The copyright notice is inside an <a> element, so you can only use text formatting elements within it. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/footer/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFooter %}
-
      -

      {{ govukFooter({}) }} +

      + 
      {% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({}) }}
      -

      +
      @@ -1492,351 +1493,352 @@

      Open this - -
      <span class="govuk-visually-hidden">footer second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Footer second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/footer/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-footer-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-second-example-html" role="tab" aria-controls="footer-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-second-example-nunjucks" role="tab" aria-controls="footer-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#footer-second-example-html" aria-controls="footer-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="footer-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;contentinfo&quot;</span>&gt;</span>
-
      -

      <div class="govuk-width-container "> + + footer second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
     <div class="govuk-footer__meta">
-      <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-      All content is available under the
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </div>
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
+      </div>
+    </div>
+  </div>
 </footer>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-footer-second-example-details">
-
      +
      + + + -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/footer/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFooter %}
-
      -

      {{ govukFooter({}) }} +

      + 
      {% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({}) }}
      -

      +
      @@ -1847,26 +1849,25 @@

      Open this - -
      <span class="govuk-visually-hidden">footer with links to meta information</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Footer with links to meta information example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/footer/with-meta/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-footer-with-links-to-meta-information-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-with-links-to-meta-information-example-html" role="tab" aria-controls="footer-with-links-to-meta-information-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-with-links-to-meta-information-example-nunjucks" role="tab" aria-controls="footer-with-links-to-meta-information-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#footer-with-links-to-meta-information-example-html" aria-controls="footer-with-links-to-meta-information-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="footer-with-links-to-meta-information-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;contentinfo&quot;</span>&gt;</span>
-
      -

      <div class="govuk-width-container "> + + footer with links to meta information + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
     <div class="govuk-footer__meta">
-      <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
         <h2 class="govuk-visually-hidden">Support links</h2>
         <ul class="govuk-footer__inline-list">
           <li class="govuk-footer__inline-list-item">
@@ -1884,330 +1885,332 @@ 
               Item 3
             </a>
           </li>
-        </ul>
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-      All content is available under the
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </div>
+        </ul>
+
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
+      </div>
+    </div>
+  </div>
 </footer>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-footer-with-links-to-meta-information-example-details">
-
      +
      + + + -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/footer/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFooter %}
-
      -

      {{ govukFooter({ +

      + 
      {% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({
   meta: {
     items: [
       {
@@ -2226,7 +2229,7 @@ 
   }
 }) }}
      -

      +
      @@ -2249,28 +2252,27 @@
      Open this - -
      <span class="govuk-visually-hidden">footer with secondary navigation</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Footer with secondary navigation example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/footer/with-navigation/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-footer-with-secondary-navigation-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-with-secondary-navigation-example-html" role="tab" aria-controls="footer-with-secondary-navigation-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#footer-with-secondary-navigation-example-nunjucks" role="tab" aria-controls="footer-with-secondary-navigation-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#footer-with-secondary-navigation-example-html" aria-controls="footer-with-secondary-navigation-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="footer-with-secondary-navigation-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;contentinfo&quot;</span>&gt;</span>
-
      -

      <div class="govuk-width-container "> + + footer with secondary navigation + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <footer class="govuk-footer " role="contentinfo">
+  <div class="govuk-width-container ">
     <div class="govuk-footer__navigation">
       <div class="govuk-footer__section govuk-grid-column-two-thirds">
         <h2 class="govuk-footer__heading govuk-heading-m">Two column list</h2>
-        <ul class="govuk-footer__list govuk-footer__list–columns-2">
+        <ul class="govuk-footer__list govuk-footer__list--columns-2">
           <li class="govuk-footer__list-item">
             <a class="govuk-footer__link" href="#1">
               Navigation item 1
@@ -2326,330 +2328,332 @@ 
     </div>
     <hr class="govuk-footer__section-break">
     <div class="govuk-footer__meta">
-      <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-      All content is available under the
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </div>
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+        <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+          <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+        </svg>
+        <span class="govuk-footer__licence-description">
+          All content is available under the
+          <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
+        </span>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
+      </div>
+    </div>
+  </div>
 </footer>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-footer-with-secondary-navigation-example-details">
-
      +
      + + + -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/footer/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukFooter %}
-
      -

      {{ govukFooter({ +

      + 
      {% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({
   navigation: [
     {
       title: "Two column list",
@@ -2703,7 +2707,7 @@ 
   ]
 }) }}
      -

      +
      @@ -2714,28 +2718,27 @@

      Open this - -
      <span class="govuk-visually-hidden">header</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Header example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/header/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-1"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-1-html" role="tab" aria-controls="default-1-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-1-nunjucks" role="tab" aria-controls="default-1-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-1-html" aria-controls="default-1-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-1-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;banner&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-header&quot;</span>&gt;</span>
-
      -

      <div class="govuk-header__container govuk-width-container"> + + header + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <header class="govuk-header " role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
-      <a href="#" class="govuk-header__link govuk-header__link–homepage">
+      <a href="#" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <!–[if gt IE 8]><!–>
-          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+          <!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
             <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
           </svg>
-          <!–<![endif]–>
-          <!–[if IE 8]>
+          <!--<![endif]-->
+          <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
@@ -1171,186 +1170,188 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-default-1-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-default-1--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">homepageUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The URL of the homepage. Defaults to <code>/</code>
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">assetsPath</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The public path for the assets folder. If not provided it defaults to /assets/images
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">productName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use <code>serviceName</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The name of your service, included in the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL for the service name anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigation</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of navigation item objects.
-                    See <a href="#options-default-1--navigation">navigation</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the navigation section of the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the navigation. Defaults to &#39;Menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">menuButtonLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the button that toggles the navigation. Defaults to &#39;Show or hide menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">containerClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the container, useful if you want to make the header fixed width.
-                </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 header 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 header container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-default-1--navigation">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for navigation</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Text for the navigation 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>
-                  HTML for the navigation 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL of the navigation item anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">active</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Flag to mark the navigation item as active or not.
-                </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 navigation item anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      homepageUrlstring + The URL of the homepage. Defaults to / +
      assetsPathstring + The public path for the assets folder. If not provided it defaults to /assets/images +
      productNamestring + Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName. +
      serviceNamestring + The name of your service, included in the header. +
      serviceUrlstring + URL for the service name anchor. +
      navigationarray + An array of navigation item objects. + See navigation. +
      navigationClassesstring + Classes for the navigation section of the header. +
      navigationLabelstring + Text for the aria-label attribute of the navigation. Defaults to 'Menu'. +
      menuButtonLabelstring + Text for the aria-label attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'. +
      containerClassesstring + Classes for the container, useful if you want to make the header fixed width. +
      classesstring + Classes to add to the header container. +
      attributesobject + HTML attributes (for example data attributes) to add to the header container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for navigation
      NameTypeDescription
      textstring + Required. + Text for the navigation item. If html is provided, the text option will be ignored. +
      htmlstring + Required. + HTML for the navigation item. If html is provided, the text option will be ignored. +
      hrefstring + URL of the navigation item anchor. +
      activeboolean + Flag to mark the navigation item as active or not. +
      attributesobject + HTML attributes (for example data attributes) to add to the navigation item anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/header/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukHeader %}
-
      -

      {{ govukHeader({ +

      + 
      {% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{{ govukHeader({
   homepageUrl: "#"
 }) }}
      -

      +
      @@ -1373,35 +1374,34 @@

      Default header

      Open this - -
      <span class="govuk-visually-hidden">header second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Header second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/header/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-header-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-second-example-html" role="tab" aria-controls="header-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-second-example-nunjucks" role="tab" aria-controls="header-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#header-second-example-html" aria-controls="header-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="header-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;banner&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-header&quot;</span>&gt;</span>
-
      -

      <div class="govuk-header__container govuk-width-container"> + + header second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <header class="govuk-header " role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
-      <a href="#" class="govuk-header__link govuk-header__link–homepage">
+      <a href="#" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <!–[if gt IE 8]><!–>
-          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+          <!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
             <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
           </svg>
-          <!–<![endif]–>
-          <!–[if IE 8]>
+          <!--<![endif]-->
+          <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
@@ -1413,186 +1413,188 @@ 
      Default header
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-header-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-header-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">homepageUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The URL of the homepage. Defaults to <code>/</code>
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">assetsPath</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The public path for the assets folder. If not provided it defaults to /assets/images
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">productName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use <code>serviceName</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The name of your service, included in the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL for the service name anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigation</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of navigation item objects.
-                    See <a href="#options-header-second-example--navigation">navigation</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the navigation section of the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the navigation. Defaults to &#39;Menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">menuButtonLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the button that toggles the navigation. Defaults to &#39;Show or hide menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">containerClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the container, useful if you want to make the header fixed width.
-                </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 header 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 header container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-header-second-example--navigation">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for navigation</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Text for the navigation 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>
-                  HTML for the navigation 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL of the navigation item anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">active</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Flag to mark the navigation item as active or not.
-                </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 navigation item anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      homepageUrlstring + The URL of the homepage. Defaults to / +
      assetsPathstring + The public path for the assets folder. If not provided it defaults to /assets/images +
      productNamestring + Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName. +
      serviceNamestring + The name of your service, included in the header. +
      serviceUrlstring + URL for the service name anchor. +
      navigationarray + An array of navigation item objects. + See navigation. +
      navigationClassesstring + Classes for the navigation section of the header. +
      navigationLabelstring + Text for the aria-label attribute of the navigation. Defaults to 'Menu'. +
      menuButtonLabelstring + Text for the aria-label attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'. +
      containerClassesstring + Classes for the container, useful if you want to make the header fixed width. +
      classesstring + Classes to add to the header container. +
      attributesobject + HTML attributes (for example data attributes) to add to the header container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for navigation
      NameTypeDescription
      textstring + Required. + Text for the navigation item. If html is provided, the text option will be ignored. +
      htmlstring + Required. + HTML for the navigation item. If html is provided, the text option will be ignored. +
      hrefstring + URL of the navigation item anchor. +
      activeboolean + Flag to mark the navigation item as active or not. +
      attributesobject + HTML attributes (for example data attributes) to add to the navigation item anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/header/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukHeader %}
-
      -

      {{ govukHeader({ +

      + 
      {% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{{ govukHeader({
   homepageUrl: "#"
 }) }}
      -

      +
      @@ -1604,35 +1606,34 @@

      Header with service name

      Open this - -
      <span class="govuk-visually-hidden">header with service name</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Header with service name example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/header/with-service-name/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-header-with-service-name-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-with-service-name-example-html" role="tab" aria-controls="header-with-service-name-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-with-service-name-example-nunjucks" role="tab" aria-controls="header-with-service-name-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#header-with-service-name-example-html" aria-controls="header-with-service-name-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="header-with-service-name-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;banner&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-header&quot;</span>&gt;</span>
-
      -

      <div class="govuk-header__container govuk-width-container"> + + header with service name + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <header class="govuk-header " role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
-      <a href="#" class="govuk-header__link govuk-header__link–homepage">
+      <a href="#" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <!–[if gt IE 8]><!–>
-          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+          <!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
             <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
           </svg>
-          <!–<![endif]–>
-          <!–[if IE 8]>
+          <!--<![endif]-->
+          <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
@@ -1649,188 +1650,190 @@ 
      Header with service name
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-header-with-service-name-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-header-with-service-name-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">homepageUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The URL of the homepage. Defaults to <code>/</code>
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">assetsPath</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The public path for the assets folder. If not provided it defaults to /assets/images
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">productName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use <code>serviceName</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The name of your service, included in the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL for the service name anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigation</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of navigation item objects.
-                    See <a href="#options-header-with-service-name-example--navigation">navigation</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the navigation section of the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the navigation. Defaults to &#39;Menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">menuButtonLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the button that toggles the navigation. Defaults to &#39;Show or hide menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">containerClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the container, useful if you want to make the header fixed width.
-                </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 header 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 header container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-header-with-service-name-example--navigation">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for navigation</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Text for the navigation 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>
-                  HTML for the navigation 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL of the navigation item anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">active</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Flag to mark the navigation item as active or not.
-                </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 navigation item anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      homepageUrlstring + The URL of the homepage. Defaults to / +
      assetsPathstring + The public path for the assets folder. If not provided it defaults to /assets/images +
      productNamestring + Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName. +
      serviceNamestring + The name of your service, included in the header. +
      serviceUrlstring + URL for the service name anchor. +
      navigationarray + An array of navigation item objects. + See navigation. +
      navigationClassesstring + Classes for the navigation section of the header. +
      navigationLabelstring + Text for the aria-label attribute of the navigation. Defaults to 'Menu'. +
      menuButtonLabelstring + Text for the aria-label attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'. +
      containerClassesstring + Classes for the container, useful if you want to make the header fixed width. +
      classesstring + Classes to add to the header container. +
      attributesobject + HTML attributes (for example data attributes) to add to the header container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for navigation
      NameTypeDescription
      textstring + Required. + Text for the navigation item. If html is provided, the text option will be ignored. +
      htmlstring + Required. + HTML for the navigation item. If html is provided, the text option will be ignored. +
      hrefstring + URL of the navigation item anchor. +
      activeboolean + Flag to mark the navigation item as active or not. +
      attributesobject + HTML attributes (for example data attributes) to add to the navigation item anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/header/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukHeader %}
-
      -

      {{ govukHeader({ +

      + 
      {% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{{ govukHeader({
   homepageUrl: "#",
   serviceName: "Service name",
   serviceUrl: "#"
 }) }}
      -

      +
      @@ -1842,35 +1845,34 @@

      Header with service name and na
      Open this - -
      <span class="govuk-visually-hidden">header with service name and navigation</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Header with service name and navigation example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/header/with-service-name-and-navigation/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-header-with-service-name-and-navigation-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-with-service-name-and-navigation-example-html" role="tab" aria-controls="header-with-service-name-and-navigation-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#header-with-service-name-and-navigation-example-nunjucks" role="tab" aria-controls="header-with-service-name-and-navigation-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#header-with-service-name-and-navigation-example-html" aria-controls="header-with-service-name-and-navigation-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="header-with-service-name-and-navigation-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">header</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header &quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;banner&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-header&quot;</span>&gt;</span>
-
      -

      <div class="govuk-header__container govuk-width-container"> + + header with service name and navigation + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <header class="govuk-header " role="banner" data-module="govuk-header">
+  <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
-      <a href="#" class="govuk-header__link govuk-header__link–homepage">
+      <a href="#" class="govuk-header__link govuk-header__link--homepage">
         <span class="govuk-header__logotype">
-          <!–[if gt IE 8]><!–>
-          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+          <!--[if gt IE 8]><!-->
+          <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
             <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
           </svg>
-          <!–<![endif]–>
-          <!–[if IE 8]>
+          <!--<![endif]-->
+          <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
           <span class="govuk-header__logotype-text">
             GOV.UK
           </span>
@@ -1882,213 +1884,215 @@ 
      Header with service name and na
         Service name
       </a>
       <nav aria-label="Menu" class="govuk-header__navigation ">
-        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
      
-
      <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-list&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item govuk-header__navigation-item--active&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#1&quot;</span>&gt;</span>
-          Navigation item 1
-        <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#2&quot;</span>&gt;</span>
-          Navigation item 2
-        <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#3&quot;</span>&gt;</span>
-          Navigation item 3
-        <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#4&quot;</span>&gt;</span>
-          Navigation item 4
-        <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
      
-
        </div>
+        <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
+
+        <ul id="navigation" class="govuk-header__navigation-list">
+          <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
+            <a class="govuk-header__link" href="#1">
+              Navigation item 1
+            </a>
+          </li>
+          <li class="govuk-header__navigation-item">
+            <a class="govuk-header__link" href="#2">
+              Navigation item 2
+            </a>
+          </li>
+          <li class="govuk-header__navigation-item">
+            <a class="govuk-header__link" href="#3">
+              Navigation item 3
+            </a>
+          </li>
+          <li class="govuk-header__navigation-item">
+            <a class="govuk-header__link" href="#4">
+              Navigation item 4
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
 </header>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-header-with-service-name-and-navigation-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-header-with-service-name-and-navigation-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">homepageUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The URL of the homepage. Defaults to <code>/</code>
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">assetsPath</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The public path for the assets folder. If not provided it defaults to /assets/images
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">productName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use <code>serviceName</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceName</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The name of your service, included in the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">serviceUrl</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL for the service name anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigation</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  An array of navigation item objects.
-                    See <a href="#options-header-with-service-name-and-navigation-example--navigation">navigation</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the navigation section of the header.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">navigationLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the navigation. Defaults to &#39;Menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">menuButtonLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Text for the <code>aria-label</code> attribute of the button that toggles the navigation. Defaults to &#39;Show or hide menu&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">containerClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for the container, useful if you want to make the header fixed width.
-                </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 header 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 header container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-header-with-service-name-and-navigation-example--navigation">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for navigation</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Text for the navigation 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>
-                  HTML for the navigation 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">href</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  URL of the navigation item anchor.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">active</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Flag to mark the navigation item as active or not.
-                </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 navigation item anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      homepageUrlstring + The URL of the homepage. Defaults to / +
      assetsPathstring + The public path for the assets folder. If not provided it defaults to /assets/images +
      productNamestring + Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName. +
      serviceNamestring + The name of your service, included in the header. +
      serviceUrlstring + URL for the service name anchor. +
      navigationarray + An array of navigation item objects. + See navigation. +
      navigationClassesstring + Classes for the navigation section of the header. +
      navigationLabelstring + Text for the aria-label attribute of the navigation. Defaults to 'Menu'. +
      menuButtonLabelstring + Text for the aria-label attribute of the button that toggles the navigation. Defaults to 'Show or hide menu'. +
      containerClassesstring + Classes for the container, useful if you want to make the header fixed width. +
      classesstring + Classes to add to the header container. +
      attributesobject + HTML attributes (for example data attributes) to add to the header container. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for navigation
      NameTypeDescription
      textstring + Required. + Text for the navigation item. If html is provided, the text option will be ignored. +
      htmlstring + Required. + HTML for the navigation item. If html is provided, the text option will be ignored. +
      hrefstring + URL of the navigation item anchor. +
      activeboolean + Flag to mark the navigation item as active or not. +
      attributesobject + HTML attributes (for example data attributes) to add to the navigation item anchor. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/header/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukHeader %}
-
      -

      {{ govukHeader({ +

      + 
      {% from "govuk/components/header/macro.njk" import govukHeader %}
+
+{{ govukHeader({
   homepageUrl: "#",
   serviceName: "Service name",
   serviceUrl: "#",
@@ -2113,7 +2117,7 @@ 
      Header with service name and na
   ]
 }) }}
      -

      +
      diff --git a/deploy/public/components/inset-text/index.html b/deploy/public/components/inset-text/index.html index 646d5b54d1..66b2707421 100644 --- a/deploy/public/components/inset-text/index.html +++ b/deploy/public/components/inset-text/index.html @@ -1130,117 +1130,118 @@

      Open this - -
      <span class="govuk-visually-hidden">inset text</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Inset text example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/inset-text/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-inset-text-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-example-html" role="tab" aria-controls="inset-text-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-example-nunjucks" role="tab" aria-controls="inset-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#inset-text-example-html" aria-controls="inset-text-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="inset-text-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-inset-text&quot;</span>&gt;</span>
-
      -

      It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. + + inset text + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-inset-text">
+  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-inset-text-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-inset-text-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">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 to use within the back link component. 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 to use within the back link component. 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">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 inset text component in a <code>call</code> block.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the inset text container.
-                </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 inset text 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 inset text container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the back link component. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the back link component. If html is provided, the text option will be ignored. +
      callernunjucks-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 inset text component in a call block. +
      idstring + ID attribute to add to the inset text container. +
      classesstring + Classes to add to the inset text container. +
      attributesobject + HTML attributes (for example data attributes) to add to the inset text container. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/inset-text/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInsetText %}
-
      -

      {{ govukInsetText({ +

      + 
      {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+
+{{ govukInsetText({
   text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
 }) }}
      -

      +
      @@ -1263,117 +1264,118 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">inset text second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Inset text second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/inset-text/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-inset-text-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-second-example-html" role="tab" aria-controls="inset-text-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inset-text-second-example-nunjucks" role="tab" aria-controls="inset-text-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#inset-text-second-example-html" aria-controls="inset-text-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="inset-text-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-inset-text&quot;</span>&gt;</span>
-
      -

      It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. + + inset text second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-inset-text">
+  It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-inset-text-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-inset-text-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">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 to use within the back link component. 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 to use within the back link component. 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">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 inset text component in a <code>call</code> block.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  ID attribute to add to the inset text container.
-                </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 inset text 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 inset text container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the back link component. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the back link component. If html is provided, the text option will be ignored. +
      callernunjucks-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 inset text component in a call block. +
      idstring + ID attribute to add to the inset text container. +
      classesstring + Classes to add to the inset text container. +
      attributesobject + HTML attributes (for example data attributes) to add to the inset text container. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/inset-text/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInsetText %}
-
      -

      {{ govukInsetText({ +

      + 
      {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+
+{{ govukInsetText({
   text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
 }) }}
      -

      +
      diff --git a/deploy/public/components/notification-banner/index.html b/deploy/public/components/notification-banner/index.html index dcbe5a1015..edba6ccd04 100644 --- a/deploy/public/components/notification-banner/index.html +++ b/deploy/public/components/notification-banner/index.html @@ -1138,24 +1138,23 @@

      Open this - -
      <span class="govuk-visually-hidden">default – notification banner</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-notification-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-notification-banner-example-html" role="tab" aria-controls="default-notification-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-notification-banner-example-nunjucks" role="tab" aria-controls="default-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-notification-banner-example-html" aria-controls="default-notification-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-notification-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;govuk-notification-banner-title&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span>&gt;</span>
-
      -

      <div class="govuk-notification-banner__header"> + + default – notification banner + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+  <div class="govuk-notification-banner__header">
     <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
       Important
     </h2>
@@ -1170,149 +1169,151 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-default-notification-banner-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-default-notification-banner-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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is 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>
-                  The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
-                </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 notification banner component in a <code>call</code> block.
-                </td>
-              </tr>
-              <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 ">
-                  The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are &#39;Important&#39;, &#39;Success&#39;, and null:<ul>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored. +
      htmlstring + Required. + The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored. +
      callernunjucks-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 notification banner component in a call block. +
      titleTextstring + The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
      • if you do not set type, titleText defaults to 'Important'
      • if you set type to success, titleText defaults to 'Success'
      • if you set titleHtml, this option is 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 ">
-                  The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleHeadingLevel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleId</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
-                </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 ">
-                  If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
-                </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 ">
-                  The classes that you want to add to the notification banner.
-                </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 ">
-                  The HTML attributes that you want to add to the notification banner, for example, data attributes.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      +
      titleHtmlstring + The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored. +
      titleHeadingLevelstring + Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2. +
      typestring + The type of notification to render. You can use only the success or null values with this option. If you set type to success, the notification banner sets role to alert. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to region. +
      rolestring + Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert. +
      titleIdstring + The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title. +
      disableAutoFocusboolean + If you set type to success, or role to alert, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true. +
      classesstring + The classes that you want to add to the notification banner. +
      attributesobject + The HTML attributes that you want to add to the notification banner, for example, data attributes. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/notification-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukNotificationBanner %}
-
      -

      {% set html %} +

      + 
      {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set html %}
   <p class="govuk-notification-banner__heading">
     You have 7 days left to send your application.
     <a class="govuk-notification-banner__link" href="#">View application</a>.
   </p>
 {% endset %}
+
 {{ govukNotificationBanner({
   html: html
 }) }}
      -

      +
      @@ -1351,24 +1352,23 @@

      Telling
      Open this - -
      <span class="govuk-visually-hidden">whole service – notification banner</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Whole service – notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/whole-service/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-whole-service-notification-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#whole-service-notification-banner-example-html" role="tab" aria-controls="whole-service-notification-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#whole-service-notification-banner-example-nunjucks" role="tab" aria-controls="whole-service-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#whole-service-notification-banner-example-html" aria-controls="whole-service-notification-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="whole-service-notification-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;govuk-notification-banner-title&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span>&gt;</span>
-
      -

      <div class="govuk-notification-banner__header"> + + whole service – notification banner + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+  <div class="govuk-notification-banner__header">
     <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
       Important
     </h2>
@@ -1380,150 +1380,151 @@ 
      Telling
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-whole-service-notification-banner-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-whole-service-notification-banner-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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is 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>
-                  The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
-                </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 notification banner component in a <code>call</code> block.
-                </td>
-              </tr>
-              <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 ">
-                  The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are &#39;Important&#39;, &#39;Success&#39;, and null:<ul>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored. +
      htmlstring + Required. + The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored. +
      callernunjucks-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 notification banner component in a call block. +
      titleTextstring + The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
      • if you do not set type, titleText defaults to 'Important'
      • if you set type to success, titleText defaults to 'Success'
      • if you set titleHtml, this option is 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 ">
-                  The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleHeadingLevel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleId</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
-                </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 ">
-                  If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
-                </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 ">
-                  The classes that you want to add to the notification banner.
-                </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 ">
-                  The HTML attributes that you want to add to the notification banner, for example, data attributes.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      +
      titleHtmlstring + The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored. +
      titleHeadingLevelstring + Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2. +
      typestring + The type of notification to render. You can use only the success or null values with this option. If you set type to success, the notification banner sets role to alert. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to region. +
      rolestring + Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert. +
      titleIdstring + The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title. +
      disableAutoFocusboolean + If you set type to success, or role to alert, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true. +
      classesstring + The classes that you want to add to the notification banner. +
      attributesobject + The HTML attributes that you want to add to the notification banner, for example, data attributes. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/notification-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukNotificationBanner %}
-
      -

      {{ govukNotificationBanner({ +

      + 
      {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{{ govukNotificationBanner({
   text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
 }) }}
      -

      +

      If your service is on GOV.UK and it’s affected by an emergency, ask your department’s content team to request a change to the service start page. If your service is getting more demand than usual, check that you’ve set up There is a problem with the service pages and Service unavailable pages, and the wording is up to date.

      -

      Telling the user about something that’s happening elsewhere

      +

      Telling the user about something that’s happening elsewhere

      Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service. For example:

      • in a case working system, the user might need to know that there are new cases waiting for their attention
        • @@ -1534,24 +1535,23 @@

        Telling the
        Open this - -
        <span class="govuk-visually-hidden">default – notification banner second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – notification banner second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-notification-banner-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-notification-banner-second-example-html" role="tab" aria-controls="default-notification-banner-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-notification-banner-second-example-nunjucks" role="tab" aria-controls="default-notification-banner-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-notification-banner-second-example-html" aria-controls="default-notification-banner-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-notification-banner-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;region&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;govuk-notification-banner-title&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span>&gt;</span>
-
        -

        <div class="govuk-notification-banner__header"> + + default – notification banner second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+  <div class="govuk-notification-banner__header">
     <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
       Important
     </h2>
@@ -1566,149 +1566,151 @@ 
        Telling the
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-default-notification-banner-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-default-notification-banner-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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is 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>
-                  The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
-                </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 notification banner component in a <code>call</code> block.
-                </td>
-              </tr>
-              <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 ">
-                  The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are &#39;Important&#39;, &#39;Success&#39;, and null:<ul>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored. +
        htmlstring + Required. + The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored. +
        callernunjucks-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 notification banner component in a call block. +
        titleTextstring + The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
        • if you do not set type, titleText defaults to 'Important'
        • if you set type to success, titleText defaults to 'Success'
        • if you set titleHtml, this option is 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 ">
-                  The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleHeadingLevel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleId</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
-                </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 ">
-                  If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
-                </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 ">
-                  The classes that you want to add to the notification banner.
-                </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 ">
-                  The HTML attributes that you want to add to the notification banner, for example, data attributes.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        +
        titleHtmlstring + The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored. +
        titleHeadingLevelstring + Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2. +
        typestring + The type of notification to render. You can use only the success or null values with this option. If you set type to success, the notification banner sets role to alert. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to region. +
        rolestring + Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert. +
        titleIdstring + The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title. +
        disableAutoFocusboolean + If you set type to success, or role to alert, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true. +
        classesstring + The classes that you want to add to the notification banner. +
        attributesobject + The HTML attributes that you want to add to the notification banner, for example, data attributes. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/notification-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukNotificationBanner %}
-
        -

        {% set html %} +

        + 
        {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set html %}
   <p class="govuk-notification-banner__heading">
     You have 7 days left to send your application.
     <a class="govuk-notification-banner__link" href="#">View application</a>.
   </p>
 {% endset %}
+
 {{ govukNotificationBanner({
   html: html
 }) }}
        -

        +
        @@ -1722,24 +1724,23 @@

        Reacting to something the user
        Open this - -
        <span class="govuk-visually-hidden">success banner – notification banner</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Success banner – notification banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/notification-banner/success/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-success-banner-notification-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#success-banner-notification-banner-example-html" role="tab" aria-controls="success-banner-notification-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#success-banner-notification-banner-example-nunjucks" role="tab" aria-controls="success-banner-notification-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#success-banner-notification-banner-example-html" aria-controls="success-banner-notification-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="success-banner-notification-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-notification-banner govuk-notification-banner--success&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;alert&quot;</span> <span class="hljs-attr">aria-labelledby</span>=<span class="hljs-string">&quot;govuk-notification-banner-title&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-notification-banner&quot;</span>&gt;</span>
-
        -

        <div class="govuk-notification-banner__header"> + + success banner – notification banner + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-notification-banner govuk-notification-banner--success" role="alert" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
+  <div class="govuk-notification-banner__header">
     <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
       Success
     </h2>
@@ -1748,156 +1749,158 @@ 
        Reacting to something the user
     <h3 class="govuk-notification-banner__heading">
       Training outcome recorded and trainee withdrawn
     </h3>
-    <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
+    <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
   </div>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-success-banner-notification-banner-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-success-banner-notification-banner-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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text that displays in the notification banner. You can use any string with this option. If you set <code>html</code>, this option is not required and is 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>
-                  The HTML to use within the notification banner. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored.
-                </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 notification banner component in a <code>call</code> block.
-                </td>
-              </tr>
-              <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 ">
-                  The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are &#39;Important&#39;, &#39;Success&#39;, and null:<ul>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + The text that displays in the notification banner. You can use any string with this option. If you set html, this option is not required and is ignored. +
        htmlstring + Required. + The HTML to use within the notification banner. You can use any string with this option. If you set html, text is not required and is ignored. +
        callernunjucks-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 notification banner component in a call block. +
        titleTextstring + The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:
        • if you do not set type, titleText defaults to 'Important'
        • if you set type to success, titleText defaults to 'Success'
        • if you set titleHtml, this option is 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 ">
-                  The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set <code>titleHtml</code>, the <code>titleText</code> option is ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleHeadingLevel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Sets heading level for the title only. You can only use values between <code>1</code> and <code>6</code> with this option. The default is <code>2</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The type of notification to render. You can use only the <code>success</code> or null values with this option. If you set <code>type</code> to <code>success</code>, the notification banner sets <code>role</code> to <code>alert</code>. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set <code>type</code>, the notification banner sets <code>role</code> to <code>region</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">role</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Overrides the value of the <code>role</code> attribute for the notification banner. Defaults to <code>region</code>. If you set <code>type</code> to <code>success</code>, <code>role</code> defaults to <code>alert</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">titleId</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The <code>id</code> for the banner title, and the <code>aria-labelledby</code> attribute in the banner. Defaults to <code>govuk-notification-banner-title</code>.
-                </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 ">
-                  If you set <code>type</code> to <code>success</code>, or <code>role</code> to <code>alert</code>, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set <code>disableAutoFocus</code> to <code>true</code>.
-                </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 ">
-                  The classes that you want to add to the notification banner.
-                </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 ">
-                  The HTML attributes that you want to add to the notification banner, for example, data attributes.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        +
        titleHtmlstring + The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set titleHtml, the titleText option is ignored. +
        titleHeadingLevelstring + Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2. +
        typestring + The type of notification to render. You can use only the success or null values with this option. If you set type to success, the notification banner sets role to alert. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set type, the notification banner sets role to region. +
        rolestring + Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert. +
        titleIdstring + The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title. +
        disableAutoFocusboolean + If you set type to success, or role to alert, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set disableAutoFocus to true. +
        classesstring + The classes that you want to add to the notification banner. +
        attributesobject + The HTML attributes that you want to add to the notification banner, for example, data attributes. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/notification-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukNotificationBanner %}
-
        -

        {% set html %} +

        + 
        {% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% set html %}
   <h3 class="govuk-notification-banner__heading">
     Training outcome recorded and trainee withdrawn
   </h3>
-  <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
+  <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
 {% endset %}
+
 {{ govukNotificationBanner({
   html: html,
   type: 'success'
 }) }}
        -

        +
        diff --git a/deploy/public/components/pagination/index.html b/deploy/public/components/pagination/index.html index 7151cd4a98..dd315c006d 100644 --- a/deploy/public/components/pagination/index.html +++ b/deploy/public/components/pagination/index.html @@ -1131,26 +1131,25 @@

        Open this - -
        <span class="govuk-visually-hidden">pagination</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Pagination example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-pagination-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-example-html" role="tab" aria-controls="pagination-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-example-nunjucks" role="tab" aria-controls="pagination-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#pagination-example-html" aria-controls="pagination-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="pagination-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <div class="govuk-pagination__prev"> + + pagination + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination" role="navigation" aria-label="results">
+  <div class="govuk-pagination__prev">
     <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
-      <svg class="govuk-pagination__icon govuk-pagination__icon–prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
       <span class="govuk-pagination__link-title">Previous</span></a>
@@ -1161,7 +1160,7 @@ 
        
         1
       </a>
     </li>
-    <li class="govuk-pagination__item govuk-pagination__item–current">
+    <li class="govuk-pagination__item govuk-pagination__item--current">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 2" aria-current="page">
         2
       </a>
@@ -1173,7 +1172,7 @@ 
        
     </li>
   </ul>
   <div class="govuk-pagination__next">
-    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon–next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
       </svg></a>
   </div>
@@ -1181,232 +1180,234 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-pagination-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-pagination-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-pagination-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-pagination-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-pagination-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   previous: {
     href: "#"
   },
@@ -1430,7 +1431,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1457,33 +1458,32 @@

        For smaller numbers of pages

        Open this - -
        <span class="govuk-visually-hidden">pagination with number labels</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Pagination with number labels example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/labels/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-pagination-with-number-labels-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-with-number-labels-example-html" role="tab" aria-controls="pagination-with-number-labels-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-with-number-labels-example-nunjucks" role="tab" aria-controls="pagination-with-number-labels-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#pagination-with-number-labels-example-html" aria-controls="pagination-with-number-labels-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="pagination-with-number-labels-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination govuk-pagination--block&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <div class="govuk-pagination__prev"> + + pagination with number labels + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination govuk-pagination--block" role="navigation" aria-label="results">
+  <div class="govuk-pagination__prev">
     <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
-      <svg class="govuk-pagination__icon govuk-pagination__icon–prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
       <span class="govuk-pagination__link-title">Previous</span><span class="govuk-visually-hidden">:</span>
       <span class="govuk-pagination__link-label">1 of 3</span></a>
   </div>
   <div class="govuk-pagination__next">
-    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <svg class="govuk-pagination__icon govuk-pagination__icon–next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
       </svg> <span class="govuk-pagination__link-title">Next</span><span class="govuk-visually-hidden">:</span>
       <span class="govuk-pagination__link-label">3 of 3</span></a>
@@ -1492,232 +1492,234 @@ 
        For smaller numbers of pages
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-pagination-with-number-labels-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-pagination-with-number-labels-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-pagination-with-number-labels-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-pagination-with-number-labels-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-pagination-with-number-labels-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-number-labels-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-number-labels-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-number-labels-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   previous: {
     labelText: "1 of 3",
     href: "#"
@@ -1728,7 +1730,7 @@ 
        For smaller numbers of pages
        
   }
 }) }}
        -

        +
        @@ -1740,33 +1742,32 @@ Open this - -
        <span class="govuk-visually-hidden">pagination with text labels</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Pagination with text labels example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/labels-2/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-pagination-with-text-labels-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-with-text-labels-example-html" role="tab" aria-controls="pagination-with-text-labels-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#pagination-with-text-labels-example-nunjucks" role="tab" aria-controls="pagination-with-text-labels-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#pagination-with-text-labels-example-html" aria-controls="pagination-with-text-labels-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="pagination-with-text-labels-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination govuk-pagination--block&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <div class="govuk-pagination__prev"> + + pagination with text labels + example in a new tab + + + + + +

        +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination govuk-pagination--block" role="navigation" aria-label="results">
+  <div class="govuk-pagination__prev">
     <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
-      <svg class="govuk-pagination__icon govuk-pagination__icon–prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
       <span class="govuk-pagination__link-title">Previous</span><span class="govuk-visually-hidden">:</span>
       <span class="govuk-pagination__link-label">Applying for a provisional lorry or bus licence</span></a>
   </div>
   <div class="govuk-pagination__next">
-    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <svg class="govuk-pagination__icon govuk-pagination__icon–next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
       </svg> <span class="govuk-pagination__link-title">Next</span><span class="govuk-visually-hidden">:</span>
       <span class="govuk-pagination__link-label">Driver CPC part 1 test: theory</span></a>
@@ -1775,232 +1776,234 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-pagination-with-text-labels-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-pagination-with-text-labels-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-pagination-with-text-labels-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-pagination-with-text-labels-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-pagination-with-text-labels-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-text-labels-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-text-labels-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-pagination-with-text-labels-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   previous: {
     labelText: "Applying for a provisional lorry or bus licence",
     href: "#"
@@ -2011,7 +2014,7 @@
        -

        +
        @@ -2023,26 +2026,25 @@

        For larger numbers of pages

        Open this - -
        <span class="govuk-visually-hidden">large number of pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Large number of pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/large-number-of-pages/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-large-number-of-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#large-number-of-pages-example-html" role="tab" aria-controls="large-number-of-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#large-number-of-pages-example-nunjucks" role="tab" aria-controls="large-number-of-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#large-number-of-pages-example-html" aria-controls="large-number-of-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="large-number-of-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <div class="govuk-pagination__prev"> + + large number of pages + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination" role="navigation" aria-label="results">
+  <div class="govuk-pagination__prev">
     <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
-      <svg class="govuk-pagination__icon govuk-pagination__icon–prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
       <span class="govuk-pagination__link-title">Previous</span></a>
@@ -2053,13 +2055,13 @@ 
        For larger numbers of pages
        
         1
       </a>
     </li>
-    <li class="govuk-pagination__item govuk-pagination__item–ellipses">&ctdot;</li>
+    <li class="govuk-pagination__item govuk-pagination__item--ellipses">&ctdot;</li>
     <li class="govuk-pagination__item">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 6">
         6
       </a>
     </li>
-    <li class="govuk-pagination__item govuk-pagination__item–current">
+    <li class="govuk-pagination__item govuk-pagination__item--current">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 7" aria-current="page">
         7
       </a>
@@ -2069,7 +2071,7 @@ 
        For larger numbers of pages
        
         8
       </a>
     </li>
-    <li class="govuk-pagination__item govuk-pagination__item–ellipses">&ctdot;</li>
+    <li class="govuk-pagination__item govuk-pagination__item--ellipses">&ctdot;</li>
     <li class="govuk-pagination__item">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 42">
         42
@@ -2077,7 +2079,7 @@ 
        For larger numbers of pages
        
     </li>
   </ul>
   <div class="govuk-pagination__next">
-    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon–next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
       </svg></a>
   </div>
@@ -2085,232 +2087,234 @@ 
        For larger numbers of pages
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-large-number-of-pages-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-large-number-of-pages-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-large-number-of-pages-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-large-number-of-pages-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-large-number-of-pages-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-large-number-of-pages-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-large-number-of-pages-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-large-number-of-pages-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   previous: {
     href: "#"
   },
@@ -2348,7 +2352,7 @@ 
        For larger numbers of pages
        
   ]
 }) }}
        -

        +
        @@ -2385,25 +2389,24 @@

        First and last pages

        Open this - -
        <span class="govuk-visually-hidden">first page</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="First page example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/first-page/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-first-page-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#first-page-example-html" role="tab" aria-controls="first-page-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#first-page-example-nunjucks" role="tab" aria-controls="first-page-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#first-page-example-html" aria-controls="first-page-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="first-page-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <ul class="govuk-pagination__list"> - <li class="govuk-pagination__item govuk-pagination__item–current"> + + first page + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination" role="navigation" aria-label="results">
+  <ul class="govuk-pagination__list">
+    <li class="govuk-pagination__item govuk-pagination__item--current">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 1" aria-current="page">
         1
       </a>
@@ -2420,7 +2423,7 @@ 
        First and last pages
        
     </li>
   </ul>
   <div class="govuk-pagination__next">
-    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon–next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <a class="govuk-link govuk-pagination__link" href="#" rel="next"> <span class="govuk-pagination__link-title">Next</span> <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
       </svg></a>
   </div>
@@ -2428,232 +2431,234 @@ 
        First and last pages
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-first-page-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-first-page-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-first-page-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-first-page-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-first-page-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-first-page-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-first-page-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-first-page-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   next: {
     href: "#"
   },
@@ -2674,7 +2679,7 @@ 
        First and last pages
        
   ]
 }) }}
        -

        +
        @@ -2690,26 +2695,25 @@

        First and last pages

        Open this - -
        <span class="govuk-visually-hidden">last page</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Last page example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/pagination/last-page/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-last-page-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#last-page-example-html" role="tab" aria-controls="last-page-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#last-page-example-nunjucks" role="tab" aria-controls="last-page-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#last-page-example-html" aria-controls="last-page-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="last-page-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-pagination&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;results&quot;</span>&gt;</span>
-
        -

        <div class="govuk-pagination__prev"> + + last page + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <nav class="govuk-pagination" role="navigation" aria-label="results">
+  <div class="govuk-pagination__prev">
     <a class="govuk-link govuk-pagination__link" href="#" rel="prev">
-      <svg class="govuk-pagination__icon govuk-pagination__icon–prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+      <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
       <span class="govuk-pagination__link-title">Previous</span></a>
@@ -2725,7 +2729,7 @@ 
        First and last pages
        
         2
       </a>
     </li>
-    <li class="govuk-pagination__item govuk-pagination__item–current">
+    <li class="govuk-pagination__item govuk-pagination__item--current">
       <a class="govuk-link govuk-pagination__link" href="#" aria-label="Page 3" aria-current="page">
         3
       </a>
@@ -2735,232 +2739,234 @@ 
        First and last pages
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-last-page-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-last-page-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">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  The array of link objects.
-                    See <a href="#options-last-page-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">previous</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the previous page, if there is a previous page.
-                    See <a href="#options-last-page-example--previous">previous</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">next</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  A link to the next page, if there is a next page.
-                    See <a href="#options-last-page-example--next">next</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">landmarkLabel</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The label for the navigation landmark that wraps the pagination. Defaults to &#39;results&#39;.
-                </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 ">
-                  The classes you want to add to the pagination <code>nav</code> parent.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the pagination <code>nav</code> parent.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-last-page-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">number</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The pagination item text - usually a page number.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The visually hidden label (for the pagination item) which will be applied to an <code>aria-label</code> and announced by screen readers on the pagination item link. Should include page number.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The link&#39;s URL.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">current</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Set to <code>true</code> to indicate the current page the user is on.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">ellipsis</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as <code>true</code>, any other options for the item are 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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-last-page-example--previous">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for previous</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the previous page. Defaults to &#39;Previous page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The previous page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-last-page-example--next">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for next</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The link text to the next page. Defaults to &#39;Next page&#39;, where &#39;page&#39; is visually hidden.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">labelText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
-                </td>
-              </tr>
-              <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 ">
-                    <strong>Required.</strong>
-                  The next page&#39;s URL.
-                </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 ">
-                  The HTML attributes (for example, data attributes) you want to add to the anchor.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        itemsarray + The array of link objects. + See items. +
        previousobject + A link to the previous page, if there is a previous page. + See previous. +
        nextobject + A link to the next page, if there is a next page. + See next. +
        landmarkLabelstring + The label for the navigation landmark that wraps the pagination. Defaults to 'results'. +
        classesstring + The classes you want to add to the pagination nav parent. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the pagination nav parent. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        numberstring + The pagination item text - usually a page number. +
        visuallyHiddenTextstring + The visually hidden label (for the pagination item) which will be applied to an aria-label and announced by screen readers on the pagination item link. Should include page number. +
        hrefstring + Required. + The link's URL. +
        currentboolean + Set to true to indicate the current page the user is on. +
        ellipsisboolean + Use this option if you want to specify an ellipsis at a given point between numbers. If you set this option as true, any other options for the item are ignored. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for previous
        NameTypeDescription
        textstring + The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The previous page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for next
        NameTypeDescription
        textstring + The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden. +
        labelTextstring + The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes. +
        hrefstring + Required. + The next page's URL. +
        attributesobject + The HTML attributes (for example, data attributes) you want to add to the anchor. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/pagination/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPagination %}
-
        -

        {{ govukPagination({ +

        + 
        {% from "govuk/components/pagination/macro.njk" import govukPagination %}
+
+{{ govukPagination({
   previous: {
     href: "#"
   },
@@ -2981,7 +2987,7 @@ 
        First and last pages
        
   ]
 }) }}
        -

        +
        diff --git a/deploy/public/components/panel/index.html b/deploy/public/components/panel/index.html index 45241e0672..ccafd6cfad 100644 --- a/deploy/public/components/panel/index.html +++ b/deploy/public/components/panel/index.html @@ -1131,24 +1131,23 @@

        Open this - -
        <span class="govuk-visually-hidden">panel</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Panel example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/panel/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-panel-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-example-html" role="tab" aria-controls="panel-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-example-nunjucks" role="tab" aria-controls="panel-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#panel-example-html" aria-controls="panel-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="panel-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-panel govuk-panel--confirmation&quot;</span>&gt;</span>
-
        -

        <h1 class="govuk-panel__title"> + + panel + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-panel govuk-panel--confirmation">
+  <h1 class="govuk-panel__title">
     Application complete
   </h1>
   <div class="govuk-panel__body">
@@ -1158,112 +1157,114 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-panel-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-panel-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 within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option 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 within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">headingLevel</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>1</code>.
-                </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 to use within the panel content. 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 to use within the panel content. 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">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 panel component in a <code>call</code> block.
-                </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 panel 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 panel container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        titleTextstring + Required. + If titleHtml is set, this is not required. Text to use within the panel. If titleHtml is provided, the titleText option will be ignored. +
        titleHtmlstring + Required. + If titleText is set, this is not required. HTML to use within the panel. If titleHtml is provided, the titleText option will be ignored. +
        headingLevelinteger + Heading level, from 1 to 6. Default is 1. +
        textstring + Required. + If html is set, this is not required. Text to use within the panel content. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the panel content. If html is provided, the text option will be ignored. +
        callernunjucks-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 panel component in a call block. +
        classesstring + Classes to add to the panel container. +
        attributesobject + HTML attributes (for example data attributes) to add to the panel container. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/panel/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPanel %}
-
        -

        {{ govukPanel({ +

        + 
        {% from "govuk/components/panel/macro.njk" import govukPanel %}
+
+{{ govukPanel({
   titleText: "Application complete",
   html: "Your reference number<br><strong>HDJ2123F</strong>"
 }) }}
        -

        +
        @@ -1280,24 +1281,23 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">panel second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Panel second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/panel/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-panel-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-second-example-html" role="tab" aria-controls="panel-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#panel-second-example-nunjucks" role="tab" aria-controls="panel-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#panel-second-example-html" aria-controls="panel-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="panel-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-panel govuk-panel--confirmation&quot;</span>&gt;</span>
-
        -

        <h1 class="govuk-panel__title"> + + panel second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-panel govuk-panel--confirmation">
+  <h1 class="govuk-panel__title">
     Application complete
   </h1>
   <div class="govuk-panel__body">
@@ -1307,112 +1307,114 @@ 
        How it works
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-panel-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-panel-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 within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option 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 within the panel. If <code>titleHtml</code> is provided, the <code>titleText</code> option will be ignored.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">headingLevel</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Heading level, from <code>1</code> to <code>6</code>. Default is <code>1</code>.
-                </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 to use within the panel content. 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 to use within the panel content. 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">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 panel component in a <code>call</code> block.
-                </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 panel 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 panel container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        titleTextstring + Required. + If titleHtml is set, this is not required. Text to use within the panel. If titleHtml is provided, the titleText option will be ignored. +
        titleHtmlstring + Required. + If titleText is set, this is not required. HTML to use within the panel. If titleHtml is provided, the titleText option will be ignored. +
        headingLevelinteger + Heading level, from 1 to 6. Default is 1. +
        textstring + Required. + If html is set, this is not required. Text to use within the panel content. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the panel content. If html is provided, the text option will be ignored. +
        callernunjucks-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 panel component in a call block. +
        classesstring + Classes to add to the panel container. +
        attributesobject + HTML attributes (for example data attributes) to add to the panel container. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/panel/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPanel %}
-
        -

        {{ govukPanel({ +

        + 
        {% from "govuk/components/panel/macro.njk" import govukPanel %}
+
+{{ govukPanel({
   titleText: "Application complete",
   html: "Your reference number<br><strong>HDJ2123F</strong>"
 }) }}
        -

        +
        diff --git a/deploy/public/components/phase-banner/index.html b/deploy/public/components/phase-banner/index.html index 9a51c83b81..88c79ab8f0 100644 --- a/deploy/public/components/phase-banner/index.html +++ b/deploy/public/components/phase-banner/index.html @@ -1131,24 +1131,23 @@

        Open this - -
        <span class="govuk-visually-hidden">phase banner</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Phase banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/phase-banner/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-phase-banner-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-example-html" role="tab" aria-controls="phase-banner-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-example-nunjucks" role="tab" aria-controls="phase-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#phase-banner-example-html" aria-controls="phase-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="phase-banner-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-phase-banner&quot;</span>&gt;</span>
-
        -

        <p class="govuk-phase-banner__content"> + + phase banner + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-phase-banner">
+  <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       alpha
     </strong>
@@ -1160,93 +1159,94 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-phase-banner-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-phase-banner-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">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 to use within the phase banner. 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 to use within the phase banner. 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">tag</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the tag component.
-                    
-                      See <a href="/components/tag/#options-tag-example">tag</a>.
-                </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 phase banner 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 phase banner container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the phase banner. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the phase banner. If html is provided, the text option will be ignored. +
        tagobject + Options for the tag component. + + See tag. +
        classesstring + Classes to add to the phase banner container. +
        attributesobject + HTML attributes (for example data attributes) to add to the phase banner container. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/phase-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPhaseBanner %}
-
        -

        {{ govukPhaseBanner({ +

        + 
        {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{{ govukPhaseBanner({
   tag: {
     text: "alpha"
   },
   html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
 }) }}
        -

        +
        @@ -1262,24 +1262,23 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">phase banner second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Phase banner second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/phase-banner/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-phase-banner-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-second-example-html" role="tab" aria-controls="phase-banner-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-second-example-nunjucks" role="tab" aria-controls="phase-banner-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#phase-banner-second-example-html" aria-controls="phase-banner-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="phase-banner-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-phase-banner&quot;</span>&gt;</span>
-
        -

        <p class="govuk-phase-banner__content"> + + phase banner second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-phase-banner">
+  <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       alpha
     </strong>
@@ -1291,93 +1290,94 @@ 
        How it works
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-phase-banner-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-phase-banner-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">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 to use within the phase banner. 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 to use within the phase banner. 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">tag</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the tag component.
-                    
-                      See <a href="/components/tag/#options-tag-example">tag</a>.
-                </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 phase banner 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 phase banner container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the phase banner. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the phase banner. If html is provided, the text option will be ignored. +
        tagobject + Options for the tag component. + + See tag. +
        classesstring + Classes to add to the phase banner container. +
        attributesobject + HTML attributes (for example data attributes) to add to the phase banner container. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/phase-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPhaseBanner %}
-
        -

        {{ govukPhaseBanner({ +

        + 
        {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{{ govukPhaseBanner({
   tag: {
     text: "alpha"
   },
   html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
 }) }}
        -

        +
        @@ -1393,24 +1393,23 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">phase banner with beta text</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Phase banner with beta text example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/phase-banner/beta/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-phase-banner-with-beta-text-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-with-beta-text-example-html" role="tab" aria-controls="phase-banner-with-beta-text-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#phase-banner-with-beta-text-example-nunjucks" role="tab" aria-controls="phase-banner-with-beta-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#phase-banner-with-beta-text-example-html" aria-controls="phase-banner-with-beta-text-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="phase-banner-with-beta-text-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-phase-banner&quot;</span>&gt;</span>
-
        -

        <p class="govuk-phase-banner__content"> + + phase banner with beta text + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-phase-banner">
+  <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
       beta
     </strong>
@@ -1422,93 +1421,94 @@ 
        How it works
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-phase-banner-with-beta-text-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-phase-banner-with-beta-text-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">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 to use within the phase banner. 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 to use within the phase banner. 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">tag</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the tag component.
-                    
-                      See <a href="/components/tag/#options-tag-example">tag</a>.
-                </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 phase banner 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 phase banner container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the phase banner. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the phase banner. If html is provided, the text option will be ignored. +
        tagobject + Options for the tag component. + + See tag. +
        classesstring + Classes to add to the phase banner container. +
        attributesobject + HTML attributes (for example data attributes) to add to the phase banner container. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/phase-banner/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukPhaseBanner %}
-
        -

        {{ govukPhaseBanner({ +

        + 
        {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{{ govukPhaseBanner({
   tag: {
     text: "beta"
   },
   html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
 }) }}
        -

        +
        diff --git a/deploy/public/components/radios/index.html b/deploy/public/components/radios/index.html index b9aa14219b..f6a18ac407 100644 --- a/deploy/public/components/radios/index.html +++ b/deploy/public/components/radios/index.html @@ -1130,25 +1130,24 @@

        Open this - -
        <span class="govuk-visually-hidden">stacked radios</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Stacked radios example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/radios/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-stacked-radios-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#stacked-radios-example-html" role="tab" aria-controls="stacked-radios-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#stacked-radios-example-nunjucks" role="tab" aria-controls="stacked-radios-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#stacked-radios-example-html" aria-controls="stacked-radios-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="stacked-radios-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + stacked radios + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Where do you live?
       </h1>
@@ -1178,371 +1177,374 @@ 
        
           Northern Ireland
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-stacked-radios-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-stacked-radios-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-stacked-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-stacked-radios-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-stacked-radios-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-stacked-radios-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-stacked-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "where-do-you-live",
   name: "where-do-you-live",
   fieldset: {
     legend: {
       text: "Where do you live?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   items: [
@@ -1565,7 +1567,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1588,7 +1590,7 @@

        How it works

        In some cases, it can be helpful to order them from most-to-least common options. For example, you could order options for ‘Where do you live?’ based on population size.

        However you should do this with extreme caution as it can reinforce bias in your service. If in doubt, order alphabetically.

        Group radios together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘Where do you live?’.

        -

        If you’re asking one question on the page

        +

        If you’re asking one question on the page

        If you are asking just one question per page as recommended, you can set the contents of the <legend> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

        Read more about why and how to set legends as headings.

        There are 2 ways to use the radios component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

        @@ -1597,25 +1599,24 @@

        If you’re asking one questio
        Open this - -
        <span class="govuk-visually-hidden">stacked radios second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Stacked radios second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-stacked-radios-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#stacked-radios-second-example-html" role="tab" aria-controls="stacked-radios-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#stacked-radios-second-example-nunjucks" role="tab" aria-controls="stacked-radios-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#stacked-radios-second-example-html" aria-controls="stacked-radios-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="stacked-radios-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + stacked radios second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Where do you live?
       </h1>
@@ -1645,371 +1646,374 @@ 
        If you’re asking one questio
           Northern Ireland
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-stacked-radios-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-stacked-radios-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-stacked-radios-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-stacked-radios-second-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-stacked-radios-second-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-stacked-radios-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-stacked-radios-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-stacked-radios-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "where-do-you-live",
   name: "where-do-you-live",
   fieldset: {
     legend: {
       text: "Where do you live?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   items: [
@@ -2032,36 +2036,35 @@ 
        If you’re asking one questio
   ]
 }) }}
        -

        +
        -

        If you’re asking more than one question on the page

        +

        If you’re asking more than one question on the page

        If you’re asking more than one question on the page, do not set the contents of the <legend> as the page heading. Read more about asking multiple questions on question pages.

        Open this - -
        <span class="govuk-visually-hidden">radios without a heading</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Radios without a heading example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-radios-without-a-heading-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-without-a-heading-example-html" role="tab" aria-controls="radios-without-a-heading-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-without-a-heading-example-nunjucks" role="tab" aria-controls="radios-without-a-heading-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#radios-without-a-heading-example-html" aria-controls="radios-without-a-heading-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="radios-without-a-heading-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset"> + + radios without a heading + example in a new tab + +

        + +
        + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
     <legend class="govuk-fieldset__legend">
       Where do you live?
     </legend>
@@ -2090,364 +2093,367 @@ 
        If you’re asking m
           Northern Ireland
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-radios-without-a-heading-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-radios-without-a-heading-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-radios-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-radios-without-a-heading-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-radios-without-a-heading-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-without-a-heading-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-without-a-heading-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-radios-without-a-heading-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-radios-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-without-a-heading-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-without-a-heading-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "where-do-you-live",
   name: "where-do-you-live",
   fieldset: {
@@ -2475,7 +2481,7 @@ 
        If you’re asking m
   ]
 }) }}
        -

        +
        @@ -2493,25 +2499,24 @@

        Inline radios

        Open this - -
        <span class="govuk-visually-hidden">inline radios</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Inline radios example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/inline/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-inline-radios-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inline-radios-example-html" role="tab" aria-controls="inline-radios-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inline-radios-example-nunjucks" role="tab" aria-controls="inline-radios-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#inline-radios-example-html" aria-controls="inline-radios-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="inline-radios-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + inline radios + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Have you changed your name?
       </h1>
@@ -2519,7 +2524,7 @@ 
        Inline radios
        
     <div id="changed-name-hint" class="govuk-hint">
       This includes changing your last name or spelling your name differently.
     </div>
-    <div class="govuk-radios govuk-radios–inline" data-module="govuk-radios">
+    <div class="govuk-radios govuk-radios--inline" data-module="govuk-radios">
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="changed-name" name="changed-name" type="radio" value="yes">
         <label class="govuk-label govuk-radios__label" for="changed-name">
@@ -2532,372 +2537,375 @@ 
        Inline radios
        
           No
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-inline-radios-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-inline-radios-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-inline-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-inline-radios-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-inline-radios-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-inline-radios-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-inline-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ - classes: "govuk-radios–inline", +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  classes: "govuk-radios--inline",
   idPrefix: "changed-name",
   name: "changed-name",
   fieldset: {
     legend: {
       text: "Have you changed your name?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -2915,7 +2923,7 @@ 
        Inline radios
        
   ]
 }) }}
        -

        +
        @@ -2927,25 +2935,24 @@

        Radio items with hints

        Open this - -
        <span class="govuk-visually-hidden">radio items with hint</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Radio items with hint example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/hint/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-radio-items-with-hint-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radio-items-with-hint-example-html" role="tab" aria-controls="radio-items-with-hint-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radio-items-with-hint-example-nunjucks" role="tab" aria-controls="radio-items-with-hint-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#radio-items-with-hint-example-html" aria-controls="radio-items-with-hint-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="radio-items-with-hint-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset" aria-describedby="sign-in-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + radio items with hint + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="sign-in-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         How do you want to sign in?
       </h1>
@@ -2972,371 +2979,374 @@ 
        Radio items with hints
        
           You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.
         </div>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-radio-items-with-hint-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-radio-items-with-hint-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-radio-items-with-hint-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-radio-items-with-hint-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-radio-items-with-hint-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radio-items-with-hint-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radio-items-with-hint-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-radio-items-with-hint-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-radio-items-with-hint-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radio-items-with-hint-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radio-items-with-hint-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "sign-in",
   name: "sign-in",
   fieldset: {
     legend: {
       text: "How do you want to sign in?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -3360,7 +3370,7 @@ 
        Radio items with hints
        
   ]
 }) }}
        -

        +
        @@ -3372,25 +3382,24 @@

        Radio items with a text divider

        Open this - -
        <span class="govuk-visually-hidden">radios with a text divider</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Radios with a text divider example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/divider/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-radios-with-a-text-divider-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-with-a-text-divider-example-html" role="tab" aria-controls="radios-with-a-text-divider-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-with-a-text-divider-example-nunjucks" role="tab" aria-controls="radios-with-a-text-divider-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#radios-with-a-text-divider-example-html" aria-controls="radios-with-a-text-divider-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="radios-with-a-text-divider-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + radios with a text divider + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Where do you live?
       </h1>
@@ -3427,371 +3436,374 @@ 
        Radio items with a text divider
        
           I am a British citizen living abroad
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-radios-with-a-text-divider-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-radios-with-a-text-divider-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-radios-with-a-text-divider-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-radios-with-a-text-divider-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-radios-with-a-text-divider-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-a-text-divider-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-a-text-divider-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-radios-with-a-text-divider-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-radios-with-a-text-divider-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-a-text-divider-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-a-text-divider-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "where-do-you-live",
   name: "where-do-you-live",
   fieldset: {
     legend: {
       text: "Where do you live?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   items: [
@@ -3821,7 +3833,7 @@ 
        Radio items with a text divider
        
   ]
 }) }}
        -

        +
        @@ -3834,25 +3846,24 @@

        Smaller radios

        Open this - -
        <span class="govuk-visually-hidden">small radios</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Small radios example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/radios/small/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-small-radios-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#small-radios-example-html" role="tab" aria-controls="small-radios-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#small-radios-example-nunjucks" role="tab" aria-controls="small-radios-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#small-radios-example-html" aria-controls="small-radios-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="small-radios-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–m"> + + small radios + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
       <h1 class="govuk-fieldset__heading">
         Filter
       </h1>
     </legend>
-    <div class="govuk-radios govuk-radios–small" data-module="govuk-radios">
+    <div class="govuk-radios govuk-radios--small" data-module="govuk-radios">
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="changed-name" name="changed-name" type="radio" value="month">
         <label class="govuk-label govuk-radios__label" for="changed-name">
@@ -4395,372 +4411,375 @@ 
        Smaller radios
        
           Yearly
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-small-radios-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-small-radios-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-small-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-small-radios-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-small-radios-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-radios-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-radios-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-small-radios-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-small-radios-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-radios-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-small-radios-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ - classes: "govuk-radios–small", +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
+  classes: "govuk-radios--small",
   idPrefix: "changed-name",
   name: "changed-name",
   fieldset: {
     legend: {
       text: "Filter",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–m"
+      classes: "govuk-fieldset__legend--m"
     }
   },
   items: [
@@ -4775,7 +4794,7 @@ 
        Smaller radios
        
   ]
 }) }}
        -

        +
        @@ -4794,25 +4813,24 @@

        Error messages

        Open this - -
        <span class="govuk-visually-hidden">inline radios with error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Inline radios with error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-inline-radios-with-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inline-radios-with-error-example-html" role="tab" aria-controls="inline-radios-with-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#inline-radios-with-error-example-nunjucks" role="tab" aria-controls="inline-radios-with-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#inline-radios-with-error-example-html" aria-controls="inline-radios-with-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="inline-radios-with-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + inline radios with error + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group govuk-form-group--error">
+  <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         Where do you live?
       </h1>
@@ -4845,371 +4863,374 @@ 
        Error messages
        
           Northern Ireland
         </label>
       </div>
-    </div>
        
-
          </fieldset>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-inline-radios-with-error-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-inline-radios-with-error-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-inline-radios-with-error-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-inline-radios-with-error-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-inline-radios-with-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {{ govukRadios({ +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{{ govukRadios({
   idPrefix: "where-do-you-live",
   name: "where-do-you-live",
   fieldset: {
     legend: {
       text: "Where do you live?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   items: [
@@ -5235,44 +5256,43 @@ 
        Error messages
        
   }
 }) }}
        -

        +

        Make sure errors follow the guidance in error message and have specific error messages for specific error states.

        -

        If it’s a ‘yes’ or ‘no’ question

        +

        If it’s a ‘yes’ or ‘no’ question

        Say ‘Select yes if [whatever it is is true]’. For example, ‘Select yes if Sarah normally lives with you’.

        -

        If there are two options which are not ‘yes’ and ‘no’

        +

        If there are two options which are not ‘yes’ and ‘no’

        Say ‘Select if [whatever it is]’. For example, ‘Select if you are employed or self-employed’.

        If there are more than two options

        Say ‘Select [whatever it is]’. For example, ‘Select the day of the week you pay your rent’.

        -

        If it’s a conditionally revealed question

        +

        If it’s a conditionally revealed question

        Include an error message that is clearly related to the initial question.

        Open this - -
        <span class="govuk-visually-hidden">radios with conditionally revealing content showing an error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Radios with conditionally revealing content showing an error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/radios/conditional-reveal-error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-radios-with-conditionally-revealing-content-showing-an-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-with-conditionally-revealing-content-showing-an-error-example-html" role="tab" aria-controls="radios-with-conditionally-revealing-content-showing-an-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#radios-with-conditionally-revealing-content-showing-an-error-example-nunjucks" role="tab" aria-controls="radios-with-conditionally-revealing-content-showing-an-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#radios-with-conditionally-revealing-content-showing-an-error-example-html" aria-controls="radios-with-conditionally-revealing-content-showing-an-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="radios-with-conditionally-revealing-content-showing-an-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <fieldset class="govuk-fieldset" aria-describedby="contact-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + radios with conditionally revealing content showing an error + example in a new tab + +

        + +
        + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset" aria-describedby="contact-hint">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         How would you prefer to be contacted?
       </h1>
@@ -5288,405 +5308,408 @@ 
        If it’s a conditionally reve
         </label>
       </div>
       <div class="govuk-radios__conditional" id="conditional-contact">
-        <div class="govuk-form-group govuk-form-group–error">
+        <div class="govuk-form-group govuk-form-group--error">
           <label class="govuk-label" for="contact-by-email">
             Email address
           </label>
           <p id="contact-by-email-error" class="govuk-error-message">
             <span class="govuk-visually-hidden">Error:</span> Email address cannot be blank
           </p>
-          <input class="govuk-input govuk-!-width-one-half govuk-input–error" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" aria-describedby="contact-by-email-error" autocomplete="email">
-        </div>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;contact-2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;contact&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;phone&quot;</span> <span class="hljs-attr">data-aria-controls</span>=<span class="hljs-string">&quot;conditional-contact-2&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;contact-2&quot;</span>&gt;</span>
-      Phone
-    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__conditional govuk-radios__conditional--hidden&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;conditional-contact-2&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;contact-by-phone&quot;</span>&gt;</span>
-        Phone number
-      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-!-width-one-third&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;contact-by-phone&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;contact-by-phone&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;tel&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;tel&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;contact-3&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;contact&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">data-aria-controls</span>=<span class="hljs-string">&quot;conditional-contact-3&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;contact-3&quot;</span>&gt;</span>
-      Text message
-    <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__conditional govuk-radios__conditional--hidden&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;conditional-contact-3&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;contact-by-text&quot;</span>&gt;</span>
-        Mobile phone number
-      <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-!-width-one-third&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;contact-by-text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;contact-by-text&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;tel&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;tel&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
        
-
          </fieldset>
+          <input class="govuk-input govuk-!-width-one-half govuk-input--error" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" aria-describedby="contact-by-email-error" autocomplete="email">
+        </div>
+
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="contact-2" name="contact" type="radio" value="phone" data-aria-controls="conditional-contact-2">
+        <label class="govuk-label govuk-radios__label" for="contact-2">
+          Phone
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact-2">
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="contact-by-phone">
+            Phone number
+          </label>
+          <input class="govuk-input govuk-!-width-one-third" id="contact-by-phone" name="contact-by-phone" type="tel" autocomplete="tel">
+        </div>
+
+      </div>
+      <div class="govuk-radios__item">
+        <input class="govuk-radios__input" id="contact-3" name="contact" type="radio" value="text" data-aria-controls="conditional-contact-3">
+        <label class="govuk-label govuk-radios__label" for="contact-3">
+          Text message
+        </label>
+      </div>
+      <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-contact-3">
+        <div class="govuk-form-group">
+          <label class="govuk-label" for="contact-by-text">
+            Mobile phone number
+          </label>
+          <input class="govuk-input govuk-!-width-one-third" id="contact-by-text" name="contact-by-text" type="tel" autocomplete="tel">
+        </div>
+
+      </div>
+    </div>
+
+  </fieldset>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-radios-with-conditionally-revealing-content-showing-an-error-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-radios-with-conditionally-revealing-content-showing-an-error-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">fieldset</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the fieldset component (for example legend).
-                    
-                      See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component (for example text).
-                    
-                      See <a href="#options-radios-with-conditionally-revealing-content-showing-an-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-radios-with-conditionally-revealing-content-showing-an-error-example--formGroup">formGroup</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name attribute for each radio item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of radio items objects.
-                    See <a href="#options-radios-with-conditionally-revealing-content-showing-an-error-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
-                </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 radio 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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-conditionally-revealing-content-showing-an-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-conditionally-revealing-content-showing-an-error-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">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 to use within each radio item label. 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 to use within each radio item label. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Value for the radio input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide attributes and classes to each radio item label.
-                    
-                      See <a href="#options-radios-with-conditionally-revealing-content-showing-an-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Provide hint to each radio item.
-                    
-                      See <a href="#options-radios-with-conditionally-revealing-content-showing-an-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">divider</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Divider text to separate radio items, for example the text &#39;or&#39;.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">checked</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the radio should be checked when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, content provided will be revealed when the item is checked.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">conditional.html</th>
-                <td class="govuk-table__cell ">html</td>
-                <td class="govuk-table__cell ">
-                  Provide content for the conditional reveal.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If <code>true</code>, radio will be disabled.
-                </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 radio input tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-conditionally-revealing-content-showing-an-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-radios-with-conditionally-revealing-content-showing-an-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        fieldsetobject + Options for the fieldset component (for example legend). + + See fieldset. +
        hintobject + Options for the hint component (for example text). + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        idPrefixstring + String to prefix ID for each radio item if no ID is specified on each item. If idPrefix is not passed, fallback to using the name attribute instead. +
        namestring + Required. + Name attribute for each radio item. +
        itemsarray + Required. + Array of radio items objects. + See items. +
        valuestring + The value for the radio which should be checked when the page loads. Use this as an alternative to setting the checked option on each individual item. +
        classesstring + Classes to add to the radio container. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each radio item label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within each radio item label. If html is provided, the text option will be ignored. +
        idstring + Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied. +
        valuestring + Required. + Value for the radio input. +
        labelobject + Provide attributes and classes to each radio item label. + + See label. +
        hintobject + Provide hint to each radio item. + + See hint. +
        dividerstring + Divider text to separate radio items, for example the text 'or'. +
        checkedboolean + Whether the radio should be checked when the page loads. Takes precedence over the top-level value option. +
        conditionalstring + If true, content provided will be revealed when the item is checked. +
        conditional.htmlhtml + Provide content for the conditional reveal. +
        disabledboolean + If true, radio will be disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the radio input tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/radios/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukRadios %}
-
        -

        {% from "govuk/components/input/macro.njk" import govukInput %} +

        + 
        {% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
 {% set emailHtml %}
 {{ govukInput({
   id: "contact-by-email",
@@ -5703,6 +5726,7 @@ 
        If it’s a conditionally reve
   }
 }) }}
 {% endset -%}
+
 {% set phoneHtml %}
 {{ govukInput({
   id: "contact-by-phone",
@@ -5715,6 +5739,7 @@ 
        If it’s a conditionally reve
   }
 }) }}
 {% endset -%}
+
 {% set textHtml %}
 {{ govukInput({
   id: "contact-by-text",
@@ -5727,6 +5752,7 @@ 
        If it’s a conditionally reve
   }
 }) }}
 {% endset -%}
+
 {{ govukRadios({
   idPrefix: "contact",
   name: "contact",
@@ -5734,7 +5760,7 @@ 
        If it’s a conditionally reve
     legend: {
       text: "How would you prefer to be contacted?",
       isPageHeading: true,
-      classes: "govuk-fieldset__legend–l"
+      classes: "govuk-fieldset__legend--l"
     }
   },
   hint: {
@@ -5766,7 +5792,7 @@ 
        If it’s a conditionally reve
   ]
 }) }}
        -

        +
        diff --git a/deploy/public/components/select/index.html b/deploy/public/components/select/index.html index 9cd78f0e08..4e62c8a07c 100644 --- a/deploy/public/components/select/index.html +++ b/deploy/public/components/select/index.html @@ -1130,24 +1130,23 @@

        Open this - -
        <span class="govuk-visually-hidden">select</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Select example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/select/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-select-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-example-html" role="tab" aria-controls="select-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-example-nunjucks" role="tab" aria-controls="select-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#select-example-html" aria-controls="select-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="select-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <label class="govuk-label" for="sort"> + + select + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <label class="govuk-label" for="sort">
     Sort by
   </label>
   <select class="govuk-select" id="sort" name="sort">
@@ -1160,311 +1159,313 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-select-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-select-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  ID for each select box.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name property for the select.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of option items for the select.
-                    See <a href="#options-select-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option which should be selected. Use this as an alternative to setting the <code>selected</code> option on each individual item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Label text or HTML by specifying value for either text or html keys.
-                    
-                      See <a href="#options-select-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-select-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-select-example--formGroup">formGroup</a>.
-                </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 select.
-                </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 select.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option item. Defaults to an empty string.
-                </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>
-                  Text for the option item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">selected</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the option should be selected when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets the option item as disabled.
-                </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 option.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + Required. + ID for each select box. +
        namestring + Required. + Name property for the select. +
        itemsarray + Required. + Array of option items for the select. + See items. +
        valuestring + Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item. +
        describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
        labelobject + Label text or HTML by specifying value for either text or html keys. + + See label. +
        hintobject + Options for the hint component. + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        classesstring + Classes to add to the select. +
        attributesobject + HTML attributes (for example data attributes) to add to the select. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        valuestring + Value for the option item. Defaults to an empty string. +
        textstring + Required. + Text for the option item. +
        selectedboolean + Whether the option should be selected when the page loads. Takes precedence over the top-level value option. +
        disabledboolean + Sets the option item as disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the option. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/select/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSelect %}
-
        -

        {{ govukSelect({ +

        + 
        {% from "govuk/components/select/macro.njk" import govukSelect %}
+
+{{ govukSelect({
   id: "sort",
   name: "sort",
   label: {
@@ -1491,7 +1492,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1510,24 +1511,23 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">select second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Select second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/select/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-select-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-second-example-html" role="tab" aria-controls="select-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-second-example-nunjucks" role="tab" aria-controls="select-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#select-second-example-html" aria-controls="select-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="select-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <label class="govuk-label" for="sort"> + + select second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <label class="govuk-label" for="sort">
     Sort by
   </label>
   <select class="govuk-select" id="sort" name="sort">
@@ -1540,311 +1540,313 @@ 
        How it works
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-select-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-select-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  ID for each select box.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name property for the select.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of option items for the select.
-                    See <a href="#options-select-second-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option which should be selected. Use this as an alternative to setting the <code>selected</code> option on each individual item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Label text or HTML by specifying value for either text or html keys.
-                    
-                      See <a href="#options-select-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-select-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-select-second-example--formGroup">formGroup</a>.
-                </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 select.
-                </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 select.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option item. Defaults to an empty string.
-                </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>
-                  Text for the option item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">selected</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the option should be selected when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets the option item as disabled.
-                </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 option.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + Required. + ID for each select box. +
        namestring + Required. + Name property for the select. +
        itemsarray + Required. + Array of option items for the select. + See items. +
        valuestring + Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item. +
        describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
        labelobject + Label text or HTML by specifying value for either text or html keys. + + See label. +
        hintobject + Options for the hint component. + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        classesstring + Classes to add to the select. +
        attributesobject + HTML attributes (for example data attributes) to add to the select. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        valuestring + Value for the option item. Defaults to an empty string. +
        textstring + Required. + Text for the option item. +
        selectedboolean + Whether the option should be selected when the page loads. Takes precedence over the top-level value option. +
        disabledboolean + Sets the option item as disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the option. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/select/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSelect %}
-
        -

        {{ govukSelect({ +

        + 
        {% from "govuk/components/select/macro.njk" import govukSelect %}
+
+{{ govukSelect({
   id: "sort",
   name: "sort",
   label: {
@@ -1871,7 +1873,7 @@ 
        How it works
        
   ]
 }) }}
        -

        +
        @@ -1883,24 +1885,23 @@

        Select with hint

        Open this - -
        <span class="govuk-visually-hidden">select with hint</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Select with hint example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/select/with-hint/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-select-with-hint-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-with-hint-example-html" role="tab" aria-controls="select-with-hint-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#select-with-hint-example-nunjucks" role="tab" aria-controls="select-with-hint-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#select-with-hint-example-html" aria-controls="select-with-hint-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="select-with-hint-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <label class="govuk-label" for="subject"> + + select with hint + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <label class="govuk-label" for="subject">
     Choose location
   </label>
   <div id="subject-hint" class="govuk-hint">
@@ -1922,311 +1923,313 @@ 
        Select with hint
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-select-with-hint-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-select-with-hint-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  ID for each select box.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Name property for the select.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of option items for the select.
-                    See <a href="#options-select-with-hint-example--items">items</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option which should be selected. Use this as an alternative to setting the <code>selected</code> option on each individual item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Label text or HTML by specifying value for either text or html keys.
-                    
-                      See <a href="#options-select-with-hint-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-select-with-hint-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-select-with-hint-example--formGroup">formGroup</a>.
-                </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 select.
-                </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 select.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-with-hint-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the option item. Defaults to an empty string.
-                </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>
-                  Text for the option item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">selected</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the option should be selected when the page loads. Takes precedence over the top-level <code>value</code> option.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Sets the option item as disabled.
-                </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 option.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-with-hint-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-with-hint-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-select-with-hint-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + Required. + ID for each select box. +
        namestring + Required. + Name property for the select. +
        itemsarray + Required. + Array of option items for the select. + See items. +
        valuestring + Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item. +
        describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
        labelobject + Label text or HTML by specifying value for either text or html keys. + + See label. +
        hintobject + Options for the hint component. + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        classesstring + Classes to add to the select. +
        attributesobject + HTML attributes (for example data attributes) to add to the select. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        valuestring + Value for the option item. Defaults to an empty string. +
        textstring + Required. + Text for the option item. +
        selectedboolean + Whether the option should be selected when the page loads. Takes precedence over the top-level value option. +
        disabledboolean + Sets the option item as disabled. +
        attributesobject + HTML attributes (for example data attributes) to add to the option. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/select/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSelect %}
-
        -

        {{ govukSelect({ +

        + 
        {% from "govuk/components/select/macro.njk" import govukSelect %}
+
+{{ govukSelect({
   id: "subject",
   name: "subject",
   label: {
@@ -2278,9 +2281,10 @@ 
        Select with hint
        
       text: "Yorkshire and the Humber"
     }
    ]
+
 }) }}
        -

        +
        diff --git a/deploy/public/components/skip-link/index.html b/deploy/public/components/skip-link/index.html index eba126bdd3..a53202a332 100644 --- a/deploy/public/components/skip-link/index.html +++ b/deploy/public/components/skip-link/index.html @@ -1131,111 +1131,114 @@

        Open this - -
        <span class="govuk-visually-hidden">skip link</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Skip link example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/skip-link/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-skip-link-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#skip-link-example-html" role="tab" aria-controls="skip-link-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#skip-link-example-nunjucks" role="tab" aria-controls="skip-link-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#skip-link-example-html" aria-controls="skip-link-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="skip-link-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>To view the skip link component tab to this example, or click inside this example and press tab.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
        -

        <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> + + skip link + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
+
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-skip-link-example-details">
-
        +
        + + + -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">&lt;p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;To view the skip link component tab to <span class="hljs-built_in">this</span> example, or click inside <span class="hljs-built_in">this</span> example and press tab.&lt;/p&gt;
-
        -

        {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %} +

        + 
        <p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
+
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+
 {{ govukSkipLink({
   text: "Skip to main content",
   href: "#content"
 }) }}
        -

        +
        @@ -1254,111 +1257,114 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">skip link second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Skip link second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/skip-link/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-skip-link-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#skip-link-second-example-html" role="tab" aria-controls="skip-link-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#skip-link-second-example-nunjucks" role="tab" aria-controls="skip-link-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#skip-link-second-example-html" aria-controls="skip-link-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="skip-link-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>To view the skip link component tab to this example, or click inside this example and press tab.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
        -

        <a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a> + + skip link second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
+
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-skip-link-second-example-details">
-
        +
        + + + -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">&lt;p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;To view the skip link component tab to <span class="hljs-built_in">this</span> example, or click inside <span class="hljs-built_in">this</span> example and press tab.&lt;/p&gt;
-
        -

        {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %} +

        + 
        <p class="govuk-body">To view the skip link component tab to this example, or click inside this example and press tab.</p>
+
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+
 {{ govukSkipLink({
   text: "Skip to main content",
   href: "#content"
 }) }}
        -

        +
        diff --git a/deploy/public/components/summary-list/index.html b/deploy/public/components/summary-list/index.html index 40395c5280..c4f6ded944 100644 --- a/deploy/public/components/summary-list/index.html +++ b/deploy/public/components/summary-list/index.html @@ -1131,24 +1131,23 @@

        Open this - -
        <span class="govuk-visually-hidden">summary list</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-summary-list-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-example-html" role="tab" aria-controls="summary-list-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-example-nunjucks" role="tab" aria-controls="summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-example-html" aria-controls="summary-list-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="summary-list-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list&quot;</span>&gt;</span>
-
        -

        <div class="govuk-summary-list__row"> + + summary list + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Name
     </dt>
@@ -1193,7 +1192,7 @@ 
        
     </dt>
     <dd class="govuk-summary-list__value">
       <p class="govuk-body">07700 900457</p>
-      <p class="govuk-body">sarah.phillips@example.com</p>
+      <p class="govuk-body">sarah.phillips@example.com</p>
     </dd>
     <dd class="govuk-summary-list__actions">
       <a class="govuk-link" href="#">
@@ -1205,209 +1204,211 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-summary-list-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-summary-list-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of row item objects.
-                    See <a href="#options-summary-list-example--rows">rows</a>.
-                </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 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 container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the row <code>div</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.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 to use within the each key. 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">key.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the key wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value.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 to use within the each value. 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">value.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 to use within the each value. 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">value.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the value wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the actions wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of action item objects.
-                    See <a href="#options-summary-list-example--actions.items">actions.items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-example--actions.items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for actions.items</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 ">
-                    <strong>Required.</strong>
-                  The value of the link&#39;s <code>href</code> attribute for an action item.
-                </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 to use within each action 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 to use within the each action 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">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios.
-                </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 action item.
-                </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 action item.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of row item objects. + See rows. +
        classesstring + Classes to add to the container. +
        attributesobject + HTML attributes (for example data attributes) to add to the container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        classesstring + Classes to add to the row div. +
        key.textstring + Required. + If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored. +
        key.htmlstring + Required. + +
        key.classesstring + Classes to add to the key wrapper. +
        value.textstring + Required. + If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored. +
        value.htmlstring + Required. + If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored. +
        value.classesstring + Classes to add to the value wrapper. +
        actions.classesstring + Classes to add to the actions wrapper. +
        actions.itemsarray + Array of action item objects. + See actions.items. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for actions.items
        NameTypeDescription
        hrefstring + Required. + The value of the link's href attribute for an action item. +
        textstring + Required. + If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored. +
        visuallyHiddenTextstring + Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios. +
        classesstring + Classes to add to the action item. +
        attributesobject + HTML attributes (for example data attributes) to add to the action item. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/summary-list/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSummaryList %}
-
        -

        {{ govukSummaryList({ +

        + 
        {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
   rows: [
     {
       key: {
@@ -1465,7 +1466,7 @@ 
        
         text: "Contact details"
       },
       value: {
-        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
       },
       actions: {
         items: [
@@ -1480,7 +1481,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1498,24 +1499,23 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">without actions – summary list</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Without actions – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/without-actions/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-without-actions-summary-list-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-actions-summary-list-example-html" role="tab" aria-controls="without-actions-summary-list-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-actions-summary-list-example-nunjucks" role="tab" aria-controls="without-actions-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#without-actions-summary-list-example-html" aria-controls="without-actions-summary-list-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="without-actions-summary-list-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list&quot;</span>&gt;</span>
-
        -

        <div class="govuk-summary-list__row"> + + without actions – summary list + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Name
     </dt>
@@ -1545,216 +1545,218 @@ 
        How it works
        
     </dt>
     <dd class="govuk-summary-list__value">
       <p class="govuk-body">07700 900457</p>
-      <p class="govuk-body">sarah.phillips@example.com</p>
+      <p class="govuk-body">sarah.phillips@example.com</p>
     </dd>
   </div>
 </dl>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-without-actions-summary-list-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-without-actions-summary-list-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of row item objects.
-                    See <a href="#options-without-actions-summary-list-example--rows">rows</a>.
-                </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 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 container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the row <code>div</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.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 to use within the each key. 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">key.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the key wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value.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 to use within the each value. 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">value.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 to use within the each value. 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">value.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the value wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the actions wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of action item objects.
-                    See <a href="#options-without-actions-summary-list-example--actions.items">actions.items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-without-actions-summary-list-example--actions.items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for actions.items</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 ">
-                    <strong>Required.</strong>
-                  The value of the link&#39;s <code>href</code> attribute for an action item.
-                </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 to use within each action 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 to use within the each action 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">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios.
-                </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 action item.
-                </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 action item.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of row item objects. + See rows. +
        classesstring + Classes to add to the container. +
        attributesobject + HTML attributes (for example data attributes) to add to the container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        classesstring + Classes to add to the row div. +
        key.textstring + Required. + If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored. +
        key.htmlstring + Required. + +
        key.classesstring + Classes to add to the key wrapper. +
        value.textstring + Required. + If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored. +
        value.htmlstring + Required. + If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored. +
        value.classesstring + Classes to add to the value wrapper. +
        actions.classesstring + Classes to add to the actions wrapper. +
        actions.itemsarray + Array of action item objects. + See actions.items. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for actions.items
        NameTypeDescription
        hrefstring + Required. + The value of the link's href attribute for an action item. +
        textstring + Required. + If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored. +
        visuallyHiddenTextstring + Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios. +
        classesstring + Classes to add to the action item. +
        attributesobject + HTML attributes (for example data attributes) to add to the action item. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/summary-list/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSummaryList %}
-
        -

        {{ govukSummaryList({ +

        + 
        {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
   rows: [
     {
       key: {
@@ -1785,13 +1787,13 @@ 
        How it works
        
         text: "Contact details"
       },
       value: {
-        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
       }
     }
   ]
 }) }}
        -

        +
        @@ -1806,24 +1808,23 @@

        Adding actions to each row

        Open this - -
        <span class="govuk-visually-hidden">summary list second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Summary list second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-summary-list-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-second-example-html" role="tab" aria-controls="summary-list-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-second-example-nunjucks" role="tab" aria-controls="summary-list-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-second-example-html" aria-controls="summary-list-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="summary-list-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list&quot;</span>&gt;</span>
-
        -

        <div class="govuk-summary-list__row"> + + summary list second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Name
     </dt>
@@ -1868,7 +1869,7 @@ 
        Adding actions to each row
        
     </dt>
     <dd class="govuk-summary-list__value">
       <p class="govuk-body">07700 900457</p>
-      <p class="govuk-body">sarah.phillips@example.com</p>
+      <p class="govuk-body">sarah.phillips@example.com</p>
     </dd>
     <dd class="govuk-summary-list__actions">
       <a class="govuk-link" href="#">
@@ -1880,209 +1881,211 @@ 
        Adding actions to each row
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-summary-list-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-summary-list-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of row item objects.
-                    See <a href="#options-summary-list-second-example--rows">rows</a>.
-                </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 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 container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-second-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the row <code>div</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.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 to use within the each key. 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">key.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the key wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value.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 to use within the each value. 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">value.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 to use within the each value. 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">value.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the value wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the actions wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of action item objects.
-                    See <a href="#options-summary-list-second-example--actions.items">actions.items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-second-example--actions.items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for actions.items</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 ">
-                    <strong>Required.</strong>
-                  The value of the link&#39;s <code>href</code> attribute for an action item.
-                </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 to use within each action 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 to use within the each action 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">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios.
-                </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 action item.
-                </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 action item.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of row item objects. + See rows. +
        classesstring + Classes to add to the container. +
        attributesobject + HTML attributes (for example data attributes) to add to the container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        classesstring + Classes to add to the row div. +
        key.textstring + Required. + If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored. +
        key.htmlstring + Required. + +
        key.classesstring + Classes to add to the key wrapper. +
        value.textstring + Required. + If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored. +
        value.htmlstring + Required. + If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored. +
        value.classesstring + Classes to add to the value wrapper. +
        actions.classesstring + Classes to add to the actions wrapper. +
        actions.itemsarray + Array of action item objects. + See actions.items. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for actions.items
        NameTypeDescription
        hrefstring + Required. + The value of the link's href attribute for an action item. +
        textstring + Required. + If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored. +
        visuallyHiddenTextstring + Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios. +
        classesstring + Classes to add to the action item. +
        attributesobject + HTML attributes (for example data attributes) to add to the action item. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/summary-list/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSummaryList %}
-
        -

        {{ govukSummaryList({ +

        + 
        {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
   rows: [
     {
       key: {
@@ -2140,7 +2143,7 @@ 
        Adding actions to each row
        
         text: "Contact details"
       },
       value: {
-        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
       },
       actions: {
         items: [
@@ -2155,7 +2158,7 @@ 
        Adding actions to each row
        
   ]
 }) }}
        -

        +
        @@ -2166,24 +2169,23 @@

        Adding actions to each row

        Open this - -
        <span class="govuk-visually-hidden">summary list with a mix of rows with and without actions</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Summary list with a mix of rows with and without actions example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/mixed-actions/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-example-html" role="tab" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-example-nunjucks" role="tab" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#summary-list-with-a-mix-of-rows-with-and-without-actions-example-html" aria-controls="summary-list-with-a-mix-of-rows-with-and-without-actions-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="summary-list-with-a-mix-of-rows-with-and-without-actions-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list&quot;</span>&gt;</span>
-
        -

        <div class="govuk-summary-list__row govuk-summary-list__row–no-actions"> + + summary list with a mix of rows with and without actions + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <dl class="govuk-summary-list">
+  <div class="govuk-summary-list__row govuk-summary-list__row--no-actions">
     <dt class="govuk-summary-list__key">
       Name
     </dt>
@@ -2223,7 +2225,7 @@ 
        Adding actions to each row
        
     </dt>
     <dd class="govuk-summary-list__value">
       <p class="govuk-body">07700 900457</p>
-      <p class="govuk-body">sarah.phillips@example.com</p>
+      <p class="govuk-body">sarah.phillips@example.com</p>
     </dd>
     <dd class="govuk-summary-list__actions">
       <a class="govuk-link" href="#">
@@ -2235,209 +2237,211 @@ 
        Adding actions to each row
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-summary-list-with-a-mix-of-rows-with-and-without-actions-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of row item objects.
-                    See <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-example--rows">rows</a>.
-                </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 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 container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the row <code>div</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.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 to use within the each key. 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">key.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the key wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value.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 to use within the each value. 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">value.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 to use within the each value. 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">value.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the value wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the actions wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of action item objects.
-                    See <a href="#options-summary-list-with-a-mix-of-rows-with-and-without-actions-example--actions.items">actions.items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-summary-list-with-a-mix-of-rows-with-and-without-actions-example--actions.items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for actions.items</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 ">
-                    <strong>Required.</strong>
-                  The value of the link&#39;s <code>href</code> attribute for an action item.
-                </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 to use within each action 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 to use within the each action 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">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios.
-                </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 action item.
-                </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 action item.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of row item objects. + See rows. +
        classesstring + Classes to add to the container. +
        attributesobject + HTML attributes (for example data attributes) to add to the container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        classesstring + Classes to add to the row div. +
        key.textstring + Required. + If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored. +
        key.htmlstring + Required. + +
        key.classesstring + Classes to add to the key wrapper. +
        value.textstring + Required. + If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored. +
        value.htmlstring + Required. + If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored. +
        value.classesstring + Classes to add to the value wrapper. +
        actions.classesstring + Classes to add to the actions wrapper. +
        actions.itemsarray + Array of action item objects. + See actions.items. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for actions.items
        NameTypeDescription
        hrefstring + Required. + The value of the link's href attribute for an action item. +
        textstring + Required. + If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored. +
        visuallyHiddenTextstring + Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios. +
        classesstring + Classes to add to the action item. +
        attributesobject + HTML attributes (for example data attributes) to add to the action item. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/summary-list/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSummaryList %}
-
        -

        {{ govukSummaryList({ +

        + 
        {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
   rows: [
     {
       key: {
@@ -2486,7 +2490,7 @@ 
        Adding actions to each row
        
         text: "Contact details"
       },
       value: {
-        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
       },
       actions: {
         items: [
@@ -2501,7 +2505,7 @@ 
        Adding actions to each row
        
   ]
 }) }}
        -

        +
        @@ -2514,24 +2518,23 @@

        Removing the borders

        Open this - -
        <span class="govuk-visually-hidden">without borders – summary list</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Without borders – Summary list example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/summary-list/without-borders/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-without-borders-summary-list-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-borders-summary-list-example-html" role="tab" aria-controls="without-borders-summary-list-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#without-borders-summary-list-example-nunjucks" role="tab" aria-controls="without-borders-summary-list-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#without-borders-summary-list-example-html" aria-controls="without-borders-summary-list-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="without-borders-summary-list-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list govuk-summary-list--no-border&quot;</span>&gt;</span>
-
        -

        <div class="govuk-summary-list__row"> + + without borders – summary list + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <dl class="govuk-summary-list govuk-summary-list--no-border">
+  <div class="govuk-summary-list__row">
     <dt class="govuk-summary-list__key">
       Name
     </dt>
@@ -2561,217 +2564,219 @@ 
        Removing the borders
        
     </dt>
     <dd class="govuk-summary-list__value">
       <p class="govuk-body">07700 900457</p>
-      <p class="govuk-body">sarah.phillips@example.com</p>
+      <p class="govuk-body">sarah.phillips@example.com</p>
     </dd>
   </div>
 </dl>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-without-borders-summary-list-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-without-borders-summary-list-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of row item objects.
-                    See <a href="#options-without-borders-summary-list-example--rows">rows</a>.
-                </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 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 container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the row <code>div</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.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 to use within the each key. 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">key.html</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">key.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the key wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value.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 to use within the each value. 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">value.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 to use within the each value. 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">value.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the value wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the actions wrapper.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">actions.items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of action item objects.
-                    See <a href="#options-without-borders-summary-list-example--actions.items">actions.items</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-without-borders-summary-list-example--actions.items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for actions.items</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 ">
-                    <strong>Required.</strong>
-                  The value of the link&#39;s <code>href</code> attribute for an action item.
-                </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 to use within each action 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 to use within the each action 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">visuallyHiddenText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use <code>html</code> for more complicated scenarios.
-                </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 action item.
-                </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 action item.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of row item objects. + See rows. +
        classesstring + Classes to add to the container. +
        attributesobject + HTML attributes (for example data attributes) to add to the container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        classesstring + Classes to add to the row div. +
        key.textstring + Required. + If html is set, this is not required. Text to use within the each key. If html is provided, the text option will be ignored. +
        key.htmlstring + Required. + +
        key.classesstring + Classes to add to the key wrapper. +
        value.textstring + Required. + If html is set, this is not required. Text to use within the each value. If html is provided, the text option will be ignored. +
        value.htmlstring + Required. + If text is set, this is not required. HTML to use within the each value. If html is provided, the text option will be ignored. +
        value.classesstring + Classes to add to the value wrapper. +
        actions.classesstring + Classes to add to the actions wrapper. +
        actions.itemsarray + Array of action item objects. + See actions.items. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for actions.items
        NameTypeDescription
        hrefstring + Required. + The value of the link's href attribute for an action item. +
        textstring + Required. + If html is set, this is not required. Text to use within each action item. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each action item. If html is provided, the text option will be ignored. +
        visuallyHiddenTextstring + Actions rely on context from the surrounding content so may require additional accessible text. Text supplied to this option is appended to the end. Use html for more complicated scenarios. +
        classesstring + Classes to add to the action item. +
        attributesobject + HTML attributes (for example data attributes) to add to the action item. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/summary-list/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukSummaryList %}
-
        -

        {{ govukSummaryList({ - classes: 'govuk-summary-list–no-border', +

        + 
        {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+
+{{ govukSummaryList({
+  classes: 'govuk-summary-list--no-border',
   rows: [
     {
       key: {
@@ -2802,13 +2807,13 @@ 
        Removing the borders
        
         text: "Contact details"
       },
       value: {
-        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+        html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
       }
     }
   ]
 }) }}
        -

        +
        diff --git a/deploy/public/components/table/index.html b/deploy/public/components/table/index.html index 6b6b8dfde6..60d6f78903 100644 --- a/deploy/public/components/table/index.html +++ b/deploy/public/components/table/index.html @@ -1131,24 +1131,23 @@

        Open this - -
        <span class="govuk-visually-hidden">table</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-table-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-example-html" role="tab" aria-controls="table-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-example-nunjucks" role="tab" aria-controls="table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#table-example-html" aria-controls="table-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="table-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–m">Dates and amounts</caption> + + table + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header">Date</th>
@@ -1173,227 +1172,229 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-table-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-table-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-table-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-table-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-table-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-table-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Dates and amounts",
-  captionClasses: "govuk-table__caption–m",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {
@@ -1431,7 +1432,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1449,24 +1450,23 @@

        Table captions

        Open this - -
        <span class="govuk-visually-hidden">custom caption size</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Custom caption size example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/caption-l/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-custom-caption-size-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-caption-size-example-html" role="tab" aria-controls="custom-caption-size-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-caption-size-example-nunjucks" role="tab" aria-controls="custom-caption-size-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#custom-caption-size-example-html" aria-controls="custom-caption-size-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="custom-caption-size-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–l">Months and rates</caption> + + custom caption size + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--l">Months and rates</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header">Month you apply</th>
@@ -1491,227 +1491,229 @@ 
        Table captions
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-custom-caption-size-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-custom-caption-size-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-custom-caption-size-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-custom-caption-size-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-caption-size-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-caption-size-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Months and rates",
-  captionClasses: "govuk-table__caption–l",
+  captionClasses: "govuk-table__caption--l",
   firstCellIsHeader: true,
   head: [
     {
@@ -1749,7 +1751,7 @@ 
        Table captions
        
   ]
 }) }}
        -

        +
        @@ -1762,24 +1764,23 @@

        Table headers

        Open this - -
        <span class="govuk-visually-hidden">table second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Table second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-table-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-second-example-html" role="tab" aria-controls="table-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#table-second-example-nunjucks" role="tab" aria-controls="table-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#table-second-example-html" aria-controls="table-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="table-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–m">Dates and amounts</caption> + + table second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Dates and amounts</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header">Date</th>
@@ -1804,227 +1805,229 @@ 
        Table headers
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-table-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-table-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-table-second-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-table-second-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-table-second-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-table-second-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Dates and amounts",
-  captionClasses: "govuk-table__caption–m",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {
@@ -2062,7 +2065,7 @@ 
        Table headers
        
   ]
 }) }}
        -

        +
        @@ -2074,273 +2077,274 @@

        Numbers in a table

        Open this - -
        <span class="govuk-visually-hidden">numbers in a table</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Numbers in a table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/numbers/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-numbers-in-a-table-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#numbers-in-a-table-example-html" role="tab" aria-controls="numbers-in-a-table-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#numbers-in-a-table-example-nunjucks" role="tab" aria-controls="numbers-in-a-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#numbers-in-a-table-example-html" aria-controls="numbers-in-a-table-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="numbers-in-a-table-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–m">Months and rates</caption> + + numbers in a table + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Months and rates</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header">Month you apply</th>
-      <th scope="col" class="govuk-table__header govuk-table__header–numeric">Rate for bicycles</th>
-      <th scope="col" class="govuk-table__header govuk-table__header–numeric">Rate for vehicles</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th>
+      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th>
     </tr>
   </thead>
   <tbody class="govuk-table__body">
     <tr class="govuk-table__row">
       <th scope="row" class="govuk-table__header">January</th>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£85</td>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£95</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
     </tr>
     <tr class="govuk-table__row">
       <th scope="row" class="govuk-table__header">February</th>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£75</td>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£55</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
     </tr>
     <tr class="govuk-table__row">
       <th scope="row" class="govuk-table__header">March</th>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£165</td>
-      <td class="govuk-table__cell govuk-table__cell–numeric">£125</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
+      <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
     </tr>
   </tbody>
 </table>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-numbers-in-a-table-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-numbers-in-a-table-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-numbers-in-a-table-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-numbers-in-a-table-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-numbers-in-a-table-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-numbers-in-a-table-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Months and rates",
-  captionClasses: "govuk-table__caption–m",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {
@@ -2398,7 +2402,7 @@ 
        Numbers in a table
        
   ]
 }) }}
        -

        +
        @@ -2410,24 +2414,23 @@

        Custom column widths

        Open this - -
        <span class="govuk-visually-hidden">custom width using override classes – table</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Custom width using override classes – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/column-widths/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-custom-width-using-override-classes-table-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-override-classes-table-example-html" role="tab" aria-controls="custom-width-using-override-classes-table-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-override-classes-table-example-nunjucks" role="tab" aria-controls="custom-width-using-override-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#custom-width-using-override-classes-table-example-html" aria-controls="custom-width-using-override-classes-table-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="custom-width-using-override-classes-table-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–m">Month you apply</caption> + + custom width using override classes – table + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Month you apply</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header govuk-!-width-one-half">Date</th>
@@ -2456,227 +2459,229 @@ 
        Custom column widths
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-custom-width-using-override-classes-table-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-custom-width-using-override-classes-table-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-custom-width-using-override-classes-table-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-custom-width-using-override-classes-table-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-width-using-override-classes-table-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-width-using-override-classes-table-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Month you apply",
-  captionClasses: "govuk-table__caption–m",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {
@@ -2729,7 +2734,7 @@ 
        Custom column widths
        
   ]
 }) }}
        -

        +
        @@ -2741,24 +2746,23 @@

        Custom column widths

        Open this - -
        <span class="govuk-visually-hidden">custom width using custom classes – table</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Custom width using custom classes – Table example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/table/column-widths-custom-classes/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-custom-width-using-custom-classes-table-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-custom-classes-table-example-html" role="tab" aria-controls="custom-width-using-custom-classes-table-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#custom-width-using-custom-classes-table-example-nunjucks" role="tab" aria-controls="custom-width-using-custom-classes-table-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#custom-width-using-custom-classes-table-example-html" aria-controls="custom-width-using-custom-classes-table-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="custom-width-using-custom-classes-table-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <caption class="govuk-table__caption govuk-table__caption–m">Month you apply</caption> + + custom width using custom classes – table + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <caption class="govuk-table__caption govuk-table__caption--m">Month you apply</caption>
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th scope="col" class="govuk-table__header app-custom-class">Date</th>
@@ -2787,227 +2791,229 @@ 
        Custom column widths
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-custom-width-using-custom-classes-table-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-custom-width-using-custom-classes-table-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">rows</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of table rows and cells.
-                    See <a href="#options-custom-width-using-custom-classes-table-example--rows">rows</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">head</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                  Array of table head cells.
-                    See <a href="#options-custom-width-using-custom-classes-table-example--head">head</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">caption</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Caption text
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">captionClasses</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes for caption text size. Classes should correspond to the available typography heading classes.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">firstCellIsHeader</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  If set to true, first cell in table row will be a TH instead of a TD.
-                </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 table 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 table container.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-width-using-custom-classes-table-example--rows">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for rows</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">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 cells in table rows. 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 cells in table rows. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table row cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-custom-width-using-custom-classes-table-example--head">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for head</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  If <code>html</code> is set, this is not required. Text for table head cells. 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 ">
-                  If <code>text</code> is set, this is not required. HTML for table head cells. 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">format</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Specify format of a cell. Currently we only use &quot;numeric&quot;.
-                </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 table head cell.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">colspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many columns a cell extends.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rowspan</th>
-                <td class="govuk-table__cell ">integer</td>
-                <td class="govuk-table__cell ">
-                  Specify how many rows a cell extends.
-                </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 table cell.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        rowsarray + Required. + Array of table rows and cells. + See rows. +
        headarray + Array of table head cells. + See head. +
        captionstring + Caption text +
        captionClassesstring + Classes for caption text size. Classes should correspond to the available typography heading classes. +
        firstCellIsHeaderboolean + If set to true, first cell in table row will be a TH instead of a TD. +
        classesstring + Classes to add to the table container. +
        attributesobject + HTML attributes (for example data attributes) to add to the table container. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for rows
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text for cells in table rows. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML for cells in table rows. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table row cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for head
        NameTypeDescription
        textstring + If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored. +
        htmlstring + If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored. +
        formatstring + Specify format of a cell. Currently we only use "numeric". +
        classesstring + Classes to add to the table head cell. +
        colspaninteger + Specify how many columns a cell extends. +
        rowspaninteger + Specify how many rows a cell extends. +
        attributesobject + HTML attributes (for example data attributes) to add to the table cell. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/table/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTable %}
-
        -

        {{ govukTable({ +

        + 
        {% from "govuk/components/table/macro.njk" import govukTable %}
+
+{{ govukTable({
   caption: "Month you apply",
-  captionClasses: "govuk-table__caption–m",
+  captionClasses: "govuk-table__caption--m",
   firstCellIsHeader: true,
   head: [
     {
@@ -3060,7 +3066,7 @@ 
        Custom column widths
        
   ]
 }) }}
        -

        +
        diff --git a/deploy/public/components/tabs/index.html b/deploy/public/components/tabs/index.html index 5278043720..4b7fe5235f 100644 --- a/deploy/public/components/tabs/index.html +++ b/deploy/public/components/tabs/index.html @@ -1138,28 +1138,27 @@

        Open this - -
        <span class="govuk-visually-hidden">tabs</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Tabs example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/tabs/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-tabs-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-example-html" role="tab" aria-controls="tabs-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-example-nunjucks" role="tab" aria-controls="tabs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#tabs-example-html" aria-controls="tabs-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="tabs-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tabs&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-tabs&quot;</span>&gt;</span>
-
        -

        <h2 class="govuk-tabs__title"> + + tabs + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-tabs" data-module="govuk-tabs">
+  <h2 class="govuk-tabs__title">
     Contents
   </h2>
   <ul class="govuk-tabs__list">
-    <li class="govuk-tabs__list-item govuk-tabs__list-item–selected">
+    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
       <a class="govuk-tabs__tab" href="#past-day">
         Past day
       </a>
@@ -1207,9 +1206,10 @@ 
        
           <td class="govuk-table__cell">0</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-week">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
     <h2 class="govuk-heading-l">Past week</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1236,9 +1236,10 @@ 
        
           <td class="govuk-table__cell">27</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-month">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
     <h2 class="govuk-heading-l">Past month</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1265,9 +1266,10 @@ 
        
           <td class="govuk-table__cell">142</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-year">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
     <h2 class="govuk-heading-l">Past year</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1294,178 +1296,181 @@ 
        
           <td class="govuk-table__cell">1265</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
+    </table>
+
+  </div>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-tabs-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-tabs-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each tab item if no id is specified on each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">title</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Title for the tabs table of contents.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of tab items.
-                    See <a href="#options-tabs-example--items">items</a>.
-                </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 tabs component.
-                </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 tabs component.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-tabs-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Specific ID attribute for the tab item. If omitted, then <code>idPrefix</code> string is required instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text label of a tab item.
-                </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 tab.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">panel</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Content for the panel
-                    See <a href="#options-tabs-example--panel">panel</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-tabs-example--panel">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for panel</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">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 to use within each tab panel. 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 to use within the each tab panel. 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 tab panel.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + This is used for the main component and to compose the ID attribute for each item. +
        idPrefixstring + String to prefix id for each tab item if no id is specified on each item. +
        titlestring + Title for the tabs table of contents. +
        itemsarray + Required. + Array of tab items. + See items. +
        classesstring + Classes to add to the tabs component. +
        attributesobject + HTML attributes (for example data attributes) to add to the tabs component. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        idstring + Required. + Specific ID attribute for the tab item. If omitted, then idPrefix string is required instead. +
        labelstring + Required. + The text label of a tab item. +
        attributesobject + HTML attributes (for example data attributes) to add to the tab. +
        panelobject + Required. + Content for the panel + See panel. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for panel
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each tab panel. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each tab panel. If html is provided, the text option will be ignored. +
        attributesobject + HTML attributes (for example data attributes) to add to the tab panel. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tabs/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTabs %}
-
        -

        {% from "govuk/components/table/macro.njk" import govukTable %} +

        + 
        {% from "govuk/components/tabs/macro.njk" import govukTabs %}
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
 {% set pastDayHtml %}
 <h2 class="govuk-heading-l">Past day</h2>
 {{ govukTable({
@@ -1517,6 +1522,7 @@ 
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastWeekHtml %}
 <h2 class="govuk-heading-l">Past week</h2>
 {{ govukTable({
@@ -1568,6 +1574,7 @@ 
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastMonthHtml %}
 <h2 class="govuk-heading-l">Past month</h2>
 {{ govukTable({
@@ -1619,6 +1626,7 @@ 
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastYearHtml %}
 <h2 class="govuk-heading-l">Past year</h2>
 {{ govukTable({
@@ -1670,6 +1678,7 @@ 
        
   ]
 }) }}
 {% endset -%}
+
 {{ govukTabs({
   items: [
     {
@@ -1703,7 +1712,7 @@ 
        
   ]
 }) }}
        -

        +
        @@ -1747,28 +1756,27 @@

        How it works

        Open this - -
        <span class="govuk-visually-hidden">tabs second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Tabs second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/tabs/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-tabs-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-second-example-html" role="tab" aria-controls="tabs-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tabs-second-example-nunjucks" role="tab" aria-controls="tabs-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#tabs-second-example-html" aria-controls="tabs-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="tabs-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tabs&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-tabs&quot;</span>&gt;</span>
-
        -

        <h2 class="govuk-tabs__title"> + + tabs second + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-tabs" data-module="govuk-tabs">
+  <h2 class="govuk-tabs__title">
     Contents
   </h2>
   <ul class="govuk-tabs__list">
-    <li class="govuk-tabs__list-item govuk-tabs__list-item–selected">
+    <li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
       <a class="govuk-tabs__tab" href="#past-day">
         Past day
       </a>
@@ -1816,9 +1824,10 @@ 
        How it works
        
           <td class="govuk-table__cell">0</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-week">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
     <h2 class="govuk-heading-l">Past week</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1845,9 +1854,10 @@ 
        How it works
        
           <td class="govuk-table__cell">27</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-month">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
     <h2 class="govuk-heading-l">Past month</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1874,9 +1884,10 @@ 
        How it works
        
           <td class="govuk-table__cell">142</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
-  <div class="govuk-tabs__panel govuk-tabs__panel–hidden" id="past-year">
+    </table>
+
+  </div>
+  <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
     <h2 class="govuk-heading-l">Past year</h2>
     <table class="govuk-table">
       <thead class="govuk-table__head">
@@ -1903,178 +1914,181 @@ 
        How it works
        
           <td class="govuk-table__cell">1265</td>
         </tr>
       </tbody>
-    </table>
        
-
          </div>
+    </table>
+
+  </div>
 </div>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-tabs-second-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-tabs-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  This is used for the main component and to compose the ID attribute for each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">idPrefix</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  String to prefix id for each tab item if no id is specified on each item.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">title</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Title for the tabs table of contents.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">items</th>
-                <td class="govuk-table__cell ">array</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Array of tab items.
-                    See <a href="#options-tabs-second-example--items">items</a>.
-                </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 tabs component.
-                </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 tabs component.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-tabs-second-example--items">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for items</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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Specific ID attribute for the tab item. If omitted, then <code>idPrefix</code> string is required instead.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The text label of a tab item.
-                </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 tab.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">panel</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Content for the panel
-                    See <a href="#options-tabs-second-example--panel">panel</a>.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-tabs-second-example--panel">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for panel</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">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 to use within each tab panel. 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 to use within the each tab panel. 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 tab panel.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + This is used for the main component and to compose the ID attribute for each item. +
        idPrefixstring + String to prefix id for each tab item if no id is specified on each item. +
        titlestring + Title for the tabs table of contents. +
        itemsarray + Required. + Array of tab items. + See items. +
        classesstring + Classes to add to the tabs component. +
        attributesobject + HTML attributes (for example data attributes) to add to the tabs component. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for items
        NameTypeDescription
        idstring + Required. + Specific ID attribute for the tab item. If omitted, then idPrefix string is required instead. +
        labelstring + Required. + The text label of a tab item. +
        attributesobject + HTML attributes (for example data attributes) to add to the tab. +
        panelobject + Required. + Content for the panel + See panel. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for panel
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within each tab panel. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the each tab panel. If html is provided, the text option will be ignored. +
        attributesobject + HTML attributes (for example data attributes) to add to the tab panel. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tabs/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTabs %}
-
        -

        {% from "govuk/components/table/macro.njk" import govukTable %} +

        + 
        {% from "govuk/components/tabs/macro.njk" import govukTabs %}
+{% from "govuk/components/table/macro.njk" import govukTable %}
+
 {% set pastDayHtml %}
 <h2 class="govuk-heading-l">Past day</h2>
 {{ govukTable({
@@ -2126,6 +2140,7 @@ 
        How it works
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastWeekHtml %}
 <h2 class="govuk-heading-l">Past week</h2>
 {{ govukTable({
@@ -2177,6 +2192,7 @@ 
        How it works
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastMonthHtml %}
 <h2 class="govuk-heading-l">Past month</h2>
 {{ govukTable({
@@ -2228,6 +2244,7 @@ 
        How it works
        
   ]
 }) }}
 {% endset -%}
+
 {% set pastYearHtml %}
 <h2 class="govuk-heading-l">Past year</h2>
 {{ govukTable({
@@ -2279,6 +2296,7 @@ 
        How it works
        
   ]
 }) }}
 {% endset -%}
+
 {{ govukTabs({
   items: [
     {
@@ -2312,7 +2330,7 @@ 
        How it works
        
   ]
 }) }}
        -

        +
        diff --git a/deploy/public/components/tag/index.html b/deploy/public/components/tag/index.html index 8c8a5b9860..cf3230045d 100644 --- a/deploy/public/components/tag/index.html +++ b/deploy/public/components/tag/index.html @@ -1131,103 +1131,104 @@

        Open this - -
        <span class="govuk-visually-hidden">tag</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Tag example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-tag-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tag-example-html" role="tab" aria-controls="tag-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#tag-example-nunjucks" role="tab" aria-controls="tag-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#tag-example-html" aria-controls="tag-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="tag-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag&quot;</span>&gt;</span>
-
        -

        completed + + tag + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <strong class="govuk-tag">
+  completed
 </strong>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-tag-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-tag-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">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 to use within the tag component. 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 to use within the tag component. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the tag.
-                </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 tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the tag component. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the tag component. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{%- <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tag/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTag -%}
-
        -

        {{ govukTag({ +

        + 
        {%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{{ govukTag({
   text: "completed"
 }) }}
        -

        +
        @@ -1246,24 +1247,23 @@

        Showing one or two statuses

        Open this - -
        <span class="govuk-visually-hidden">multiple tags</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Multiple tags example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/multiple-tags/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-multiple-tags-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-tags-example-html" role="tab" aria-controls="multiple-tags-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-tags-example-nunjucks" role="tab" aria-controls="multiple-tags-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#multiple-tags-example-html" aria-controls="multiple-tags-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="multiple-tags-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <thead class="govuk-table__head"> + + multiple tags + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Name of user </th>
       <th class="govuk-table__header" scope="col"> Status </th>
@@ -1275,154 +1275,156 @@ 
        Showing one or two statuses
        
         Rachel Silver
       </td>
       <td class="govuk-table__cell">
-        <strong class="govuk-tag govuk-tag–grey">
+        <strong class="govuk-tag govuk-tag--grey">
+  Inactive
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Jesse Smith
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--grey">
+  Inactive
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Joshua Wessel
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag">
+  Active
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Rachael Pepper
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag">
+  Active
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Stuart Say
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--grey">
   Inactive
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Jesse Smith
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--grey&quot;</span>&gt;</span>
-
        
-
          Inactive
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Joshua Wessel
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag&quot;</span>&gt;</span>
-
        
-
          Active
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Rachael Pepper
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag&quot;</span>&gt;</span>
-
        
-
          Active
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Stuart Say
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--grey&quot;</span>&gt;</span>
-
        
-
          Inactive
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Laura Frith
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag&quot;</span>&gt;</span>
-
        
-
          Active
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Tim Harvey
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--grey&quot;</span>&gt;</span>
-
        
-
          Inactive
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-
        
-
          </tbody>
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Laura Frith
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag">
+  Active
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Tim Harvey
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--grey">
+  Inactive
+</strong>
+
+      </td>
+    </tr>
+  </tbody>
 </table>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-multiple-tags-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-multiple-tags-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">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 to use within the tag component. 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 to use within the tag component. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the tag.
-                </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 tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the tag component. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the tag component. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{%- <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tag/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTag -%}
-
        -

        <table class="govuk-table"> +

        + 
        {%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+<table class="govuk-table">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Name of user </th>
@@ -1437,7 +1439,7 @@ 
        Showing one or two statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Inactive",
-          classes: "govuk-tag–grey"
+          classes: "govuk-tag--grey"
         })}}
       </td>
     </tr>
@@ -1448,7 +1450,7 @@ 
        Showing one or two statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Inactive",
-          classes: "govuk-tag–grey"
+          classes: "govuk-tag--grey"
         })}}
       </td>
     </tr>
@@ -1479,7 +1481,7 @@ 
        Showing one or two statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Inactive",
-          classes: "govuk-tag–grey"
+          classes: "govuk-tag--grey"
         })}}
       </td>
     </tr>
@@ -1500,14 +1502,14 @@ 
        Showing one or two statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Inactive",
-          classes: "govuk-tag–grey"
+          classes: "govuk-tag--grey"
         })}}
       </td>
     </tr>
   </tbody>        
 </table>
        -

        +
        @@ -1519,24 +1521,23 @@

        Showing multiple statuses

        Open this - -
        <span class="govuk-visually-hidden">coloured tags</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Coloured tags example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/coloured-tags/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-coloured-tags-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#coloured-tags-example-html" role="tab" aria-controls="coloured-tags-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#coloured-tags-example-nunjucks" role="tab" aria-controls="coloured-tags-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#coloured-tags-example-html" aria-controls="coloured-tags-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="coloured-tags-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <thead class="govuk-table__head"> + + coloured tags + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Application </th>
       <th class="govuk-table__header" scope="col"> Status </th>
@@ -1548,155 +1549,157 @@ 
        Showing multiple statuses
        
         Joshua Wessel
       </td>
       <td class="govuk-table__cell">
-        <strong class="govuk-tag govuk-tag–red">
+        <strong class="govuk-tag govuk-tag--red">
   Urgent
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Rachel Silver
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--blue&quot;</span>&gt;</span>
-
        
-
          New
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Laura Frith
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--blue&quot;</span>&gt;</span>
-
        
-
          New
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Paul French
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--blue&quot;</span>&gt;</span>
-
        
-
          New
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Jesse Smith
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--blue&quot;</span>&gt;</span>
-
        
-
          New
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Rachael Pepper
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--green&quot;</span>&gt;</span>
-
        
-
          Finished
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    Emma Tennant
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--yellow&quot;</span>&gt;</span>
-
        
-
          Waiting on
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-
        
-
          </tbody>
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Rachel Silver
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--blue">
+  New
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Laura Frith
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--blue">
+  New
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Paul French
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--blue">
+  New
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Jesse Smith
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--blue">
+  New
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Rachael Pepper
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--green">
+  Finished
+</strong>
+
+      </td>
+    </tr>
+
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        Emma Tennant
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--yellow">
+  Waiting on
+</strong>
+
+      </td>
+    </tr>
+  </tbody>
 </table>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-coloured-tags-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-coloured-tags-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">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 to use within the tag component. 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 to use within the tag component. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the tag.
-                </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 tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the tag component. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the tag component. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{%- <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tag/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTag -%}
-
        -

        <table class="govuk-table"> +

        + 
        {%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+<table class="govuk-table">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Application </th>
@@ -1711,7 +1714,7 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Urgent",
-          classes: "govuk-tag–red"
+          classes: "govuk-tag--red"
         })}}
       </td>
     </tr>
@@ -1722,7 +1725,7 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "New",
-          classes: "govuk-tag–blue"
+          classes: "govuk-tag--blue"
         })}}
       </td>
     </tr>
@@ -1733,7 +1736,7 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "New",
-          classes: "govuk-tag–blue"
+          classes: "govuk-tag--blue"
         })}}
       </td>
     </tr>
@@ -1744,7 +1747,7 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "New",
-          classes: "govuk-tag–blue"
+          classes: "govuk-tag--blue"
         })}}
       </td>
     </tr>
@@ -1755,7 +1758,7 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "New",
-          classes: "govuk-tag–blue"
+          classes: "govuk-tag--blue"
         })}}
       </td>
     </tr>
@@ -1766,10 +1769,11 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Finished",
-          classes: "govuk-tag–green"
+          classes: "govuk-tag--green"
         })}}
       </td>
     </tr>
+
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
         Emma Tennant
@@ -1777,14 +1781,14 @@ 
        Showing multiple statuses
        
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Waiting on",
-          classes: "govuk-tag–yellow"
+          classes: "govuk-tag--yellow"
         })}}
       </td>
     </tr>
   </tbody>        
 </table>
        -

        +
        @@ -1800,24 +1804,23 @@

        Additional colours

        Open this - -
        <span class="govuk-visually-hidden">all tag colours</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="All tag colours example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/tag/all-colours/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-all-tag-colours-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#all-tag-colours-example-html" role="tab" aria-controls="all-tag-colours-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#all-tag-colours-example-nunjucks" role="tab" aria-controls="all-tag-colours-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#all-tag-colours-example-html" aria-controls="all-tag-colours-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="all-tag-colours-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table&quot;</span>&gt;</span>
-
        -

        <thead class="govuk-table__head"> + + all tag colours + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <table class="govuk-table">
+  <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Class name </th>
       <th class="govuk-table__header" scope="col"> Tag </th>
@@ -1826,179 +1829,181 @@ 
        Additional colours
        
   <tbody class="govuk-table__body">
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–grey </code>
+        <code> govuk-tag--grey </code>
       </td>
       <td class="govuk-table__cell">
-        <strong class="govuk-tag govuk-tag–grey">
+        <strong class="govuk-tag govuk-tag--grey">
   Inactive
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--green <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--green&quot;</span>&gt;</span>
-
        
-
          New
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--turquoise <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--turquoise&quot;</span>&gt;</span>
-
        
-
          Active
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--blue <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--blue&quot;</span>&gt;</span>
-
        
-
          Pending
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--purple <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--purple&quot;</span>&gt;</span>
-
        
-
          Received
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--pink <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--pink&quot;</span>&gt;</span>
-
        
-
          Sent
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--red <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--red&quot;</span>&gt;</span>
-
        
-
          Rejected
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--orange <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--orange&quot;</span>&gt;</span>
-
        
-
          Declined
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">code</span>&gt;</span> govuk-tag--yellow <span class="hljs-tag">&lt;/<span class="hljs-name">code</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-table__cell&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-tag govuk-tag--yellow&quot;</span>&gt;</span>
-
        
-
          Delayed
-</strong>
        
-
        <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
-
        
-
          </tbody>
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--green </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--green">
+  New
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--turquoise </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--turquoise">
+  Active
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--blue </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--blue">
+  Pending
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--purple </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--purple">
+  Received
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--pink </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--pink">
+  Sent
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--red </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--red">
+  Rejected
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--orange </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--orange">
+  Declined
+</strong>
+
+      </td>
+    </tr>
+    <tr class="govuk-table__row">
+      <td class="govuk-table__cell">
+        <code> govuk-tag--yellow </code>
+      </td>
+      <td class="govuk-table__cell">
+        <strong class="govuk-tag govuk-tag--yellow">
+  Delayed
+</strong>
+
+      </td>
+    </tr>
+  </tbody>
 </table>
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-all-tag-colours-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-all-tag-colours-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">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 to use within the tag component. 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 to use within the tag component. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the tag.
-                </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 tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the tag component. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the tag component. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{%- <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/tag/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTag -%}
-
        -

        <table class="govuk-table"> +

        + 
        {%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+<table class="govuk-table">
   <thead class="govuk-table__head">
     <tr class="govuk-table__row">
       <th class="govuk-table__header" scope="col"> Class name </th>
@@ -2008,107 +2013,107 @@ 
        Additional colours
        
   <tbody class="govuk-table__body">
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–grey </code>
+        <code> govuk-tag--grey </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Inactive",
-          classes: "govuk-tag–grey"
+          classes: "govuk-tag--grey"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–green </code>
+        <code> govuk-tag--green </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "New",
-          classes: "govuk-tag–green"
+          classes: "govuk-tag--green"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–turquoise </code>
+        <code> govuk-tag--turquoise </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Active",
-          classes: "govuk-tag–turquoise"
+          classes: "govuk-tag--turquoise"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–blue </code>
+        <code> govuk-tag--blue </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Pending",
-          classes: "govuk-tag–blue"
+          classes: "govuk-tag--blue"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–purple </code>
+        <code> govuk-tag--purple </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Received",
-          classes: "govuk-tag–purple"
+          classes: "govuk-tag--purple"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–pink </code>
+        <code> govuk-tag--pink </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Sent",
-          classes: "govuk-tag–pink"
+          classes: "govuk-tag--pink"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–red </code>
+        <code> govuk-tag--red </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Rejected",
-          classes: "govuk-tag–red"
+          classes: "govuk-tag--red"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–orange </code>
+        <code> govuk-tag--orange </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Declined",
-          classes: "govuk-tag–orange"
+          classes: "govuk-tag--orange"
         })}}
       </td>
     </tr>
     <tr class="govuk-table__row">
       <td class="govuk-table__cell">
-        <code> govuk-tag–yellow </code>
+        <code> govuk-tag--yellow </code>
       </td>
       <td class="govuk-table__cell">
         {{govukTag({
           text: "Delayed",
-          classes: "govuk-tag–yellow"
+          classes: "govuk-tag--yellow"
         })}}
       </td>
     </tr>
   </tbody>
 </table>
        -

        +
        diff --git a/deploy/public/components/text-input/index.html b/deploy/public/components/text-input/index.html index 34bf1812fd..aef8068190 100644 --- a/deploy/public/components/text-input/index.html +++ b/deploy/public/components/text-input/index.html @@ -1130,24 +1130,23 @@

        Open this - -
        <span class="govuk-visually-hidden">text input</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-example-html" role="tab" aria-controls="text-input-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-example-nunjucks" role="tab" aria-controls="text-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-example-html" aria-controls="text-input-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
        -

        <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="event-name"> + + text input + example in a new tab + +

        + + + + +
        HTML
        +
        +
        + 
        <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
       What is the name of the event?
     </label>
   </h1>
@@ -1156,401 +1155,403 @@
        Nunjucks
        -

        -
        <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-example-details">
-
        +
        + + +
        Nunjucks macro options
        - -
        <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-text-input-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
        + +

        + 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
        NameTypeDescription
        idstring + Required. + The ID of the input. +
        namestring + Required. + The name of the input, which is submitted with the form data. +
        typestring + Type of input control to render, for example, a password input control. Defaults to text. +
        inputmodestring + Optional value for inputmode. +
        valuestring + Optional initial value of the input. +
        describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
        labelobject + Required. + Options for the label component. + + See label. +
        hintobject + Options for the hint component. + + See hint. +
        errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
        prefixobject + Options for the prefix element. + See prefix. +
        suffixobject + Options for the suffix element. + See suffix. +
        formGroupobject + Options for the form-group wrapper. + See formGroup. +
        classesstring + Classes to add to the input. +
        autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
        patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
        spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
        attributesobject + HTML attributes (for example data attributes) to add to the input. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for prefix
        NameTypeDescription
        textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the prefix. +
        attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for suffix
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        classesstring + Classes to add to the suffix element. +
        attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
        + + + + + + + + + + + + + + + + + +
        Options for formGroup
        NameTypeDescription
        classesstring + Classes to add to the form group (for example to show error state for the whole group). +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for label
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
        forstring + The value of the for attribute, the ID of the input the label is associated with. +
        isPageHeadingboolean + Whether the label also acts as the heading for the page. +
        classesstring + Classes to add to the label tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        Options for hint
        NameTypeDescription
        textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
        htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
        idstring + Optional ID attribute to add to the hint span tag. +
        classesstring + Classes to add to the hint span tag. +
        attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
        + +
        -
        <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
        -

        {{ govukInput({ +

        + 
        {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is the name of the event?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   id: "event-name",
   name: "event-name"
 }) }}
        -

        +
        @@ -1569,7 +1570,7 @@

        Avoid placeholder text

      • not all screen readers read it out
      • its browser default styles often do not meet minimum contrast requirements

      -

      If you’re asking one question on the page

      +

      If you’re asking one question on the page

      If you’re asking just one question per page as recommended, you can set the contents of the <label> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

      Read more about why and how to set legends as headings.

      There are 2 ways to use the text input component. You can use HTML or, if you’re using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

      @@ -1578,24 +1579,23 @@

      If you’re asking one questio
      Open this - -
      <span class="govuk-visually-hidden">text input second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-second-example-html" role="tab" aria-controls="text-input-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-second-example-nunjucks" role="tab" aria-controls="text-input-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-second-example-html" aria-controls="text-input-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="event-name"> + + text input second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
       What is the name of the event?
     </label>
   </h1>
@@ -1604,430 +1604,431 @@ 
      If you’re asking one questio
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-second-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-second-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-second-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-second-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-second-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is the name of the event?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   id: "event-name",
   name: "event-name"
 }) }}
      -

      +
      -

      If you’re asking more than one question on the page

      +

      If you’re asking more than one question on the page

      If you’re asking more than one question on the page, do not set the contents of the <label> as the page heading. Read more about asking multiple questions on question pages.

      Open this - -
      <span class="govuk-visually-hidden">text input without a heading</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input without a heading example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-without-a-heading-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-without-a-heading-example-html" role="tab" aria-controls="text-input-without-a-heading-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-without-a-heading-example-nunjucks" role="tab" aria-controls="text-input-without-a-heading-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-without-a-heading-example-html" aria-controls="text-input-without-a-heading-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-without-a-heading-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="event-name"> + + text input without a heading + example in a new tab + +

      + +
      + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="event-name">
     What is the name of the event?
   </label>
   <input class="govuk-input" id="event-name" name="event-name" type="text">
@@ -2035,391 +2036,393 @@ 
      If you’re asking m
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-without-a-heading-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-without-a-heading-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-without-a-heading-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-without-a-heading-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-without-a-heading-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-without-a-heading-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-without-a-heading-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is the name of the event?"
   },
@@ -2427,7 +2430,7 @@ 
      If you’re asking m
   name: "event-name"
 }) }}
      -

      +
      @@ -2445,495 +2448,506 @@

      Fixed width inputs

      Open this - -
      <span class="govuk-visually-hidden">fixed width inputs</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Fixed width inputs example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/text-input/input-fixed-width/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-fixed-width-inputs-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fixed-width-inputs-example-html" role="tab" aria-controls="fixed-width-inputs-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fixed-width-inputs-example-nunjucks" role="tab" aria-controls="fixed-width-inputs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#fixed-width-inputs-example-html" aria-controls="fixed-width-inputs-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="fixed-width-inputs-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="width-20"> + + fixed width inputs + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="width-20">
     20 character width
   </label>
-  <input class="govuk-input govuk-input–width-20" id="width-20" name="width-20" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-20" id="width-20" name="width-20" type="text">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="width-10">
     10 character width
   </label>
-  <input class="govuk-input govuk-input–width-10" id="width-10" name="width-10" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-10" id="width-10" name="width-10" type="text">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="width-5">
     5 character width
   </label>
-  <input class="govuk-input govuk-input–width-5" id="width-5" name="width-5" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-5" id="width-5" name="width-5" type="text">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="width-4">
     4 character width
   </label>
-  <input class="govuk-input govuk-input–width-4" id="width-4" name="width-4" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-4" id="width-4" name="width-4" type="text">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="width-3">
     3 character width
   </label>
-  <input class="govuk-input govuk-input–width-3" id="width-3" name="width-3" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-3" id="width-3" name="width-3" type="text">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="width-2">
     2 character width
   </label>
-  <input class="govuk-input govuk-input–width-2" id="width-2" name="width-2" type="text">
+  <input class="govuk-input govuk-input--width-2" id="width-2" name="width-2" type="text">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-fixed-width-inputs-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-fixed-width-inputs-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-fixed-width-inputs-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-fixed-width-inputs-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-fixed-width-inputs-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-fixed-width-inputs-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-fixed-width-inputs-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "20 character width"
   },
-  classes: "govuk-input–width-20",
+  classes: "govuk-input--width-20",
   id: "width-20",
   name: "width-20"
 }) }}
+
 {{ govukInput({
   label: {
     text: "10 character width"
   },
-  classes: "govuk-input–width-10",
+  classes: "govuk-input--width-10",
   id: "width-10",
   name: "width-10"
 }) }}
+
 {{ govukInput({
   label: {
     text: "5 character width"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   id: "width-5",
   name: "width-5"
 }) }}
+
 {{ govukInput({
   label: {
     text: "4 character width"
   },
-  classes: "govuk-input–width-4",
+  classes: "govuk-input--width-4",
   id: "width-4",
   name: "width-4"
 }) }}
+
 {{ govukInput({
   label: {
     text: "3 character width"
   },
-  classes: "govuk-input–width-3",
+  classes: "govuk-input--width-3",
   id: "width-3",
   name: "width-3"
 }) }}
+
 {{ govukInput({
   label: {
     text: "2 character width"
   },
-  classes: "govuk-input–width-2",
+  classes: "govuk-input--width-2",
   id: "width-2",
   name: "width-2"
 }) }}
      -

      +
      @@ -2946,53 +2960,57 @@

      Fluid width inputs

      Open this - -
      <span class="govuk-visually-hidden">fluid width inputs</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Fluid width inputs example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/components/text-input/input-fluid-width/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-fluid-width-inputs-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fluid-width-inputs-example-html" role="tab" aria-controls="fluid-width-inputs-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#fluid-width-inputs-example-nunjucks" role="tab" aria-controls="fluid-width-inputs-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#fluid-width-inputs-example-html" aria-controls="fluid-width-inputs-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="fluid-width-inputs-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="full"> + + fluid width inputs + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="full">
     Full width
   </label>
   <input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="three-quarters">
     Three-quarters width
   </label>
   <input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="two-thirds">
     Two-thirds width
   </label>
   <input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-half">
     One-half width
   </label>
   <input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-third">
     One-third width
   </label>
   <input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
      
-
      <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-quarter">
     One-quarter width
   </label>
@@ -3001,391 +3019,393 @@ 
      Fluid width inputs
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-fluid-width-inputs-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-fluid-width-inputs-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-fluid-width-inputs-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-fluid-width-inputs-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-fluid-width-inputs-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-fluid-width-inputs-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-fluid-width-inputs-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "Full width"
   },
@@ -3393,6 +3413,7 @@ 
      Fluid width inputs
      
   id: "full",
   name: "full"
 }) }}
+
 {{ govukInput({
   label: {
     text: "Three-quarters width"
@@ -3401,6 +3422,7 @@ 
      Fluid width inputs
      
   id: "three-quarters",
   name: "three-quarters"
 }) }}
+
 {{ govukInput({
   label: {
     text: "Two-thirds width"
@@ -3409,6 +3431,7 @@ 
      Fluid width inputs
      
   id: "two-thirds",
   name: "two-thirds"
 }) }}
+
 {{ govukInput({
   label: {
     text: "One-half width"
@@ -3417,6 +3440,7 @@ 
      Fluid width inputs
      
   id: "one-half",
   name: "one-half"
 }) }}
+
 {{ govukInput({
   label: {
     text: "One-third width"
@@ -3425,6 +3449,7 @@ 
      Fluid width inputs
      
   id: "one-third",
   name: "one-third"
 }) }}
+
 {{ govukInput({
   label: {
     text: "One-quarter width"
@@ -3434,7 +3459,7 @@ 
      Fluid width inputs
      
   name: "one-quarter"
 }) }}
      -

      +
      @@ -3446,24 +3471,23 @@

      Hint text

      Open this - -
      <span class="govuk-visually-hidden">hint text</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Hint text example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-hint-text/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-hint-text-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#hint-text-example-html" role="tab" aria-controls="hint-text-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#hint-text-example-nunjucks" role="tab" aria-controls="hint-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#hint-text-example-html" aria-controls="hint-text-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="hint-text-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="event-name"> + + hint text + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
       What is the name of the event?
     </label>
   </h1>
@@ -3475,394 +3499,396 @@ 
      Hint text
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-hint-text-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-hint-text-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-hint-text-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-hint-text-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-hint-text-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-hint-text-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-hint-text-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-hint-text-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-hint-text-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-hint-text-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-hint-text-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-hint-text-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is the name of the event?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -3872,7 +3898,7 @@ 
      Hint text
      
   name: "event-name"
 }) }}
      -

      +
      @@ -3890,426 +3916,427 @@

      Asking for whole numbers

      Open this - -
      <span class="govuk-visually-hidden">number input</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Number input example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/text-input/number-input/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-number-input-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#number-input-example-html" role="tab" aria-controls="number-input-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#number-input-example-nunjucks" role="tab" aria-controls="number-input-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#number-input-example-html" aria-controls="number-input-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="number-input-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="account-number"> + + number input + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="account-number">
       What is your account number?
     </label>
   </h1>
   <div id="account-number-hint" class="govuk-hint">
     Must be between 6 and 8 digits long
   </div>
-  <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+  <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-number-input-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-number-input-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-number-input-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-number-input-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-number-input-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-number-input-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-number-input-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-number-input-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-number-input-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-number-input-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-number-input-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-number-input-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is your account number?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
-  classes: "govuk-input–width-10",
+  classes: "govuk-input--width-10",
   hint: {
     text: "Must be between 6 and 8 digits long"
   },
@@ -4319,7 +4346,7 @@ 
      Asking for whole numbers
      
   spellcheck: false
 }) }}
      -

      +
      @@ -4338,422 +4365,423 @@

      Asking for decimal numbers

      Open this - -
      <span class="govuk-visually-hidden">example of an input asking for numbers with decimal places</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Example of an input asking for numbers with decimal places example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/text-input/decimal-input/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-example-html" role="tab" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-example-nunjucks" role="tab" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#example-of-an-input-asking-for-numbers-with-decimal-places-example-html" aria-controls="example-of-an-input-asking-for-numbers-with-decimal-places-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="example-of-an-input-asking-for-numbers-with-decimal-places-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="weight"> + + example of an input asking for numbers with decimal places + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="weight">
     Weight, in kilograms
   </label>
-  <div class="govuk-input__wrapper"><input class="govuk-input govuk-input–width-5" id="weight" name="weight" type="text" spellcheck="false">
+  <div class="govuk-input__wrapper"><input class="govuk-input govuk-input--width-5" id="weight" name="weight" type="text" spellcheck="false">
     <div class="govuk-input__suffix" aria-hidden="true">kg</div>
   </div>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-example-of-an-input-asking-for-numbers-with-decimal-places-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "Weight, in kilograms"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   id: "weight",
   name: "weight",
   suffix: {
@@ -4762,7 +4790,7 @@ 
      Asking for decimal numbers
      
   spellcheck: false
 }) }}
      -

      +
      @@ -4776,426 +4804,427 @@

      Prefixes and suffixes

      Open this - -
      <span class="govuk-visually-hidden">text input with prefix and suffix</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input with prefix and suffix example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix-suffix/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-with-prefix-and-suffix-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-example-html" role="tab" aria-controls="text-input-with-prefix-and-suffix-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-and-suffix-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-and-suffix-example-html" aria-controls="text-input-with-prefix-and-suffix-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="cost-per-item"> + + text input with prefix and suffix + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="cost-per-item">
       What is the cost per item, in pounds?
     </label>
   </h1>
   <div class="govuk-input__wrapper">
     <div class="govuk-input__prefix" aria-hidden="true">£</div>
-    <input class="govuk-input govuk-input–width-5" id="cost-per-item" name="cost-per-item" type="text" spellcheck="false">
+    <input class="govuk-input govuk-input--width-5" id="cost-per-item" name="cost-per-item" type="text" spellcheck="false">
     <div class="govuk-input__suffix" aria-hidden="true">per item</div>
   </div>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-prefix-and-suffix-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-prefix-and-suffix-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-prefix-and-suffix-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-prefix-and-suffix-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-prefix-and-suffix-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-prefix-and-suffix-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-prefix-and-suffix-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   id: "cost-per-item",
   name: "cost-per-item",
   label: {
     text: "What is the cost per item, in pounds?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   prefix: {
@@ -5204,11 +5233,11 @@ 
      Prefixes and suffixes
      
   suffix: {
     text: "per item"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   spellcheck: false
 }) }}
      -

      +
      @@ -5223,435 +5252,436 @@

      Text inputs with a prefix

      Open this - -
      <span class="govuk-visually-hidden">text input with prefix</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input with prefix example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-with-prefix-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-example-html" role="tab" aria-controls="text-input-with-prefix-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-example-html" aria-controls="text-input-with-prefix-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="cost"> + + text input with prefix + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="cost">
       What is the cost in pounds?
     </label>
   </h1>
   <div class="govuk-input__wrapper">
     <div class="govuk-input__prefix" aria-hidden="true">£</div>
-    <input class="govuk-input govuk-input–width-5" id="cost" name="cost" type="text" spellcheck="false">
+    <input class="govuk-input govuk-input--width-5" id="cost" name="cost" type="text" spellcheck="false">
   </div>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-prefix-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-prefix-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-prefix-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-prefix-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-prefix-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-prefix-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-prefix-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   id: "cost",
   name: "cost",
   label: {
     text: "What is the cost in pounds?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   prefix: {
     text: "£"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   spellcheck: false
 }) }}
      -

      +
      @@ -5662,434 +5692,435 @@

      Text inputs with a suffix

      Open this - -
      <span class="govuk-visually-hidden">text input with suffix</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input with suffix example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-suffix/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-with-suffix-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-suffix-example-html" role="tab" aria-controls="text-input-with-suffix-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-suffix-example-nunjucks" role="tab" aria-controls="text-input-with-suffix-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-suffix-example-html" aria-controls="text-input-with-suffix-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-with-suffix-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="weight"> + + text input with suffix + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="weight">
       What is the weight in kilograms?
     </label>
   </h1>
-  <div class="govuk-input__wrapper"><input class="govuk-input govuk-input–width-5" id="weight" name="weight" type="text" spellcheck="false">
+  <div class="govuk-input__wrapper"><input class="govuk-input govuk-input--width-5" id="weight" name="weight" type="text" spellcheck="false">
     <div class="govuk-input__suffix" aria-hidden="true">kg</div>
   </div>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-suffix-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-suffix-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-suffix-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-suffix-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-suffix-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-suffix-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-suffix-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-suffix-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-suffix-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-suffix-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-suffix-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-suffix-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   id: "weight",
   name: "weight",
   label: {
     text: "What is the weight in kilograms?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   suffix: {
     text: "kg"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   spellcheck: false
 }) }}
      -

      +
      @@ -6116,402 +6147,402 @@

      Use the autocomplete attribute

      Nunjucks
      - - -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-autocomplete-attribute-example-open-details">
-
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-autocomplete-attribute-example-open--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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-autocomplete-attribute-example-open--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-autocomplete-attribute-example-open--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-autocomplete-attribute-example-open--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-autocomplete-attribute-example-open--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-autocomplete-attribute-example-open--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-example-open--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-example-open--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-example-open--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-example-open--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-autocomplete-attribute-example-open--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "Postcode"
   },
-  classes: "govuk-input–width-10",
+  classes: "govuk-input--width-10",
   id: "postcode",
   name: "postcode",
   autocomplete: "postal-code"
 }) }}
      -

      + @@ -6520,7 +6551,7 @@

      Use the autocomplete attribute

      You will not normally need to use the autocomplete attribute in prototypes, as users will not generally be using their own devices.

      Do not disable copy and paste

      Users often need to copy and paste information into a text input, so do not stop them from doing this.

      -

      How and when to spellcheck a user’s input

      +

      How and when to spellcheck a user’s input

      Sometimes, browsers will spellcheck the information a user puts into a text input. If a user enters something which is recognised as a spelling error, sighted users will see a red line under the word.

      If you are asking users for information which is not appropriate to spellcheck, like a reference number, name, email address or National Insurance number, disable the spellcheck.

      To do this set the spellcheck attribute to false as shown in this example.

      @@ -6543,392 +6574,392 @@

      How and when to spellcheck a u
      Nunjucks
      - - -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-spellcheck-disabled-example-open-details">
-
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-spellcheck-disabled-example-open--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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-spellcheck-disabled-example-open--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-spellcheck-disabled-example-open--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-spellcheck-disabled-example-open--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-spellcheck-disabled-example-open--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-spellcheck-disabled-example-open--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "Reference number"
   },
@@ -6937,7 +6968,7 @@ 
      How and when to spellcheck a u
   spellcheck: false
 }) }}
      -

      + @@ -6950,24 +6981,23 @@

      Error messages

      Open this - -
      <span class="govuk-visually-hidden">text input with errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input with errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-with-errors-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-errors-example-html" role="tab" aria-controls="text-input-with-errors-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-errors-example-nunjucks" role="tab" aria-controls="text-input-with-errors-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-errors-example-html" aria-controls="text-input-with-errors-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-with-errors-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="event-name"> + + text input with errors + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="event-name">
       What is the name of the event?
     </label>
   </h1>
@@ -6977,399 +7007,401 @@ 
      Error messages
      
   <p id="event-name-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter an event name
   </p>
-  <input class="govuk-input govuk-input–error" id="event-name" name="event-name" type="text" aria-describedby="event-name-hint event-name-error">
+  <input class="govuk-input govuk-input--error" id="event-name" name="event-name" type="text" aria-describedby="event-name-hint event-name-error">
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-errors-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-errors-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-errors-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-errors-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-errors-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-errors-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-errors-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   label: {
     text: "What is the name of the event?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   id: "event-name",
@@ -7382,7 +7414,7 @@ 
      Error messages
      
   }
 }) }}
      -

      +
      @@ -7393,24 +7425,23 @@

      If the input has a prefix or a su
      Open this - -
      <span class="govuk-visually-hidden">text input with prefix and suffix with error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Text input with prefix and suffix with error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/components/text-input/input-prefix-suffix-error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-text-input-with-prefix-and-suffix-with-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-with-error-example-html" role="tab" aria-controls="text-input-with-prefix-and-suffix-with-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#text-input-with-prefix-and-suffix-with-error-example-nunjucks" role="tab" aria-controls="text-input-with-prefix-and-suffix-with-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#text-input-with-prefix-and-suffix-with-error-example-html" aria-controls="text-input-with-prefix-and-suffix-with-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="text-input-with-prefix-and-suffix-with-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="cost-per-item-error"> + + text input with prefix and suffix with error + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="cost-per-item-error">
       What is the cost per item, in pounds?
     </label>
   </h1>
@@ -7419,403 +7450,405 @@ 
      If the input has a prefix or a su
   </p>
   <div class="govuk-input__wrapper">
     <div class="govuk-input__prefix" aria-hidden="true">£</div>
-    <input class="govuk-input govuk-input–width-5 govuk-input–error" id="cost-per-item-error" name="cost-per-item-error" type="text" spellcheck="false" aria-describedby="cost-per-item-error-error">
+    <input class="govuk-input govuk-input--width-5 govuk-input--error" id="cost-per-item-error" name="cost-per-item-error" type="text" spellcheck="false" aria-describedby="cost-per-item-error-error">
     <div class="govuk-input__suffix" aria-hidden="true">per item</div>
   </div>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-text-input-with-prefix-and-suffix-with-error-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-text-input-with-prefix-and-suffix-with-error-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the input, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of input control to render, for example, a password input control. Defaults to <code>text</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">inputmode</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional value for <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">inputmode</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">prefix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the prefix element.
-                    See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--prefix">prefix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">suffix</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the suffix element.
-                    See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--suffix">suffix</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--formGroup">formGroup</a>.
-                </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 input.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance &quot;postal-code&quot; or &quot;username&quot;. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">pattern</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the input.
-                </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 input.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--prefix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</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">text</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Required. If <code>html</code> is set, this is not required. Text to use within the label. 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>
-                  Required. If <code>text</code> is set, this is not required. HTML to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the prefix.
-                </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 prefix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--suffix">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</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">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 to use within the label. 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 to use within the label. 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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the suffix element.
-                </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 suffix element.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the input. +
      namestring + Required. + The name of the input, which is submitted with the form data. +
      typestring + Type of input control to render, for example, a password input control. Defaults to text. +
      inputmodestring + Optional value for inputmode. +
      valuestring + Optional initial value of the input. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      prefixobject + Options for the prefix element. + See prefix. +
      suffixobject + Options for the suffix element. + See suffix. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the input. +
      autocompletestring + Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. +
      patternstring + Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the input. +
      attributesobject + HTML attributes (for example data attributes) to add to the input. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for prefix
      NameTypeDescription
      textstring + Required. + Required. If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + Required. If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the prefix. +
      attributesobject + HTML attributes (for example data attributes) to add to the prefix element. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for suffix
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      classesstring + Classes to add to the suffix element. +
      attributesobject + HTML attributes (for example data attributes) to add to the suffix element. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/input/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukInput %}
-
      -

      {{ govukInput({ +

      + 
      {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
   id: "cost-per-item-error",
   name: "cost-per-item-error",
   label: {
     text: "What is the cost per item, in pounds?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   prefix: {
@@ -7827,11 +7860,11 @@ 
      If the input has a prefix or a su
   errorMessage: {
     text: "Enter a cost per item, in pounds"
   },
-  classes: "govuk-input–width-5",
+  classes: "govuk-input--width-5",
   spellcheck: false
 }) }}
      -

      +
      diff --git a/deploy/public/components/textarea/index.html b/deploy/public/components/textarea/index.html index 33d8e3a561..42be91a0ef 100644 --- a/deploy/public/components/textarea/index.html +++ b/deploy/public/components/textarea/index.html @@ -1130,24 +1130,23 @@

      Open this - -
      <span class="govuk-visually-hidden">textarea</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/textarea/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-example-html" role="tab" aria-controls="textarea-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-example-nunjucks" role="tab" aria-controls="textarea-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-example-html" aria-controls="textarea-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="more-detail"> + + textarea + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
       Can you provide more detail?
     </label>
   </h1>
@@ -1159,280 +1158,282 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-textarea-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-textarea-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-textarea-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-textarea-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-textarea-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </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 textarea.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the textarea. +
      namestring + Required. + The name of the textarea, which is submitted with the form data. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the textarea. +
      rowsstring + Optional number of textarea rows (default is 5 rows). +
      valuestring + Optional initial value of the textarea. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the textarea. +
      autocompletestring + Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used. +
      attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/textarea/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTextarea %}
-
      -

      {{ govukTextarea({ +

      + 
      {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
   name: "more-detail",
   id: "more-detail",
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -1440,7 +1441,7 @@ 
      
   }
 }) }}
      -

      +
      @@ -1460,24 +1461,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">textarea second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/components/textarea/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-second-example-html" role="tab" aria-controls="textarea-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-second-example-nunjucks" role="tab" aria-controls="textarea-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-second-example-html" aria-controls="textarea-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="more-detail"> + + textarea second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
       Can you provide more detail?
     </label>
   </h1>
@@ -1489,280 +1489,282 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-textarea-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-textarea-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-textarea-second-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-textarea-second-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-textarea-second-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </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 textarea.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-second-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-second-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-second-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the textarea. +
      namestring + Required. + The name of the textarea, which is submitted with the form data. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the textarea. +
      rowsstring + Optional number of textarea rows (default is 5 rows). +
      valuestring + Optional initial value of the textarea. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the textarea. +
      autocompletestring + Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used. +
      attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/textarea/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTextarea %}
-
      -

      {{ govukTextarea({ +

      + 
      {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
   name: "more-detail",
   id: "more-detail",
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -1770,7 +1772,7 @@ 
      How it works
      
   }
 }) }}
      -

      +
      @@ -1782,24 +1784,23 @@

      Use appropriately-sized textareas

      Open this - -
      <span class="govuk-visually-hidden">textarea appropriately-sized with rows</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea appropriately-sized with rows example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/specifying-rows/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-appropriately-sized-with-rows-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-appropriately-sized-with-rows-example-html" role="tab" aria-controls="textarea-appropriately-sized-with-rows-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-appropriately-sized-with-rows-example-nunjucks" role="tab" aria-controls="textarea-appropriately-sized-with-rows-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-appropriately-sized-with-rows-example-html" aria-controls="textarea-appropriately-sized-with-rows-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-appropriately-sized-with-rows-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="more-detail"> + + textarea appropriately-sized with rows + example in a new tab + + + + + +

      +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
       Can you provide more detail?
     </label>
   </h1>
@@ -1811,281 +1812,283 @@ 
      Use appropriately-sized textareas
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-textarea-appropriately-sized-with-rows-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-textarea-appropriately-sized-with-rows-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-textarea-appropriately-sized-with-rows-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-textarea-appropriately-sized-with-rows-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-textarea-appropriately-sized-with-rows-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </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 textarea.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the textarea. +
      namestring + Required. + The name of the textarea, which is submitted with the form data. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the textarea. +
      rowsstring + Optional number of textarea rows (default is 5 rows). +
      valuestring + Optional initial value of the textarea. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the textarea. +
      autocompletestring + Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used. +
      attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/textarea/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTextarea %}
-
      -

      {{ govukTextarea({ +

      + 
      {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
   name: "more-detail",
   id: "more-detail",
   rows: "8",
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -2093,38 +2096,37 @@ 
      Use appropriately-sized textareas
      -

      +

      Do not disable copy and paste

      Users will often need to copy and paste information into a textarea, so do not stop them from doing this.

      -

      If you’re asking more than one question on the page

      +

      If you’re asking more than one question on the page

      If you’re asking more than one question on the page, do not set the contents of the <label> as the page heading. Read more about asking multiple questions on question pages.

      Open this - -
      <span class="govuk-visually-hidden">textarea without a heading</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea without a heading example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/without-heading/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-without-a-heading-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-without-a-heading-example-html" role="tab" aria-controls="textarea-without-a-heading-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-without-a-heading-example-nunjucks" role="tab" aria-controls="textarea-without-a-heading-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-without-a-heading-example-html" aria-controls="textarea-without-a-heading-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-without-a-heading-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
      -

      <label class="govuk-label" for="more-detail"> + + textarea without a heading + example in a new tab + +

      + +
      + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group">
+  <label class="govuk-label" for="more-detail">
     Can you provide more detail?
   </label>
   <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5"></textarea>
@@ -2132,275 +2134,277 @@ 
      If you’re asking m
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-textarea-without-a-heading-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-textarea-without-a-heading-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-textarea-without-a-heading-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-textarea-without-a-heading-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-textarea-without-a-heading-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </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 textarea.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-without-a-heading-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the textarea. +
      namestring + Required. + The name of the textarea, which is submitted with the form data. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the textarea. +
      rowsstring + Optional number of textarea rows (default is 5 rows). +
      valuestring + Optional initial value of the textarea. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the textarea. +
      autocompletestring + Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used. +
      attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/textarea/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTextarea %}
-
      -

      {{ govukTextarea({ +

      + 
      {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
   name: "more-detail",
   id: "more-detail",
   label: {
@@ -2408,7 +2412,7 @@ 
      If you’re asking m
   }
 }) }}
      -

      +
      @@ -2422,24 +2426,23 @@

      Error messages

      Open this - -
      <span class="govuk-visually-hidden">textarea with error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea with error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/components/textarea/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-with-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-with-error-example-html" role="tab" aria-controls="textarea-with-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-with-error-example-nunjucks" role="tab" aria-controls="textarea-with-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-with-error-example-html" aria-controls="textarea-with-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-with-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
      -

      <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="more-detail"> + + textarea with error + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-form-group govuk-form-group--error">
+  <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
       Can you provide more detail?
     </label>
   </h1>
@@ -2449,285 +2452,287 @@ 
      Error messages
      
   <p id="more-detail-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter more detail
   </p>
-  <textarea class="govuk-textarea govuk-textarea–error" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint more-detail-error"></textarea>
+  <textarea class="govuk-textarea govuk-textarea--error" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint more-detail-error"></textarea>
 </div>
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-textarea-with-error-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-textarea-with-error-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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The ID of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The name of the textarea, which is submitted with the form data.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">spellcheck</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Optional field to enable or disable the <code>spellcheck</code> attribute on the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">rows</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional number of textarea rows (default is 5 rows).
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional initial value of the textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">describedBy</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  One or more element IDs to add to the <code>aria-describedby</code> attribute, used to provide additional descriptive information for screenreader users.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">label</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  Options for the label component.
-                    
-                      See <a href="#options-textarea-with-error-example--label">label</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">hint</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the hint component.
-                    
-                      See <a href="#options-textarea-with-error-example--hint">hint</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">errorMessage</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
-                    
-                      See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">formGroup</th>
-                <td class="govuk-table__cell ">object</td>
-                <td class="govuk-table__cell ">
-                  Options for the form-group wrapper.
-                    See <a href="#options-textarea-with-error-example--formGroup">formGroup</a>.
-                </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 textarea.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">autocomplete</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
-                </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 textarea.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-with-error-example--formGroup">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</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">classes</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Classes to add to the form group (for example to show error state for the whole group).
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-with-error-example--label">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for label</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">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 to use within the label. 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 to use within the label. 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">for</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  The value of the <code>for</code> attribute, the ID of the input the label is associated with.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isPageHeading</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the label also acts as the heading for the page.
-                </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 label tag.
-                </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 label tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-        <table class="govuk-table app-options__table" id="options-textarea-with-error-example--hint">
-          <caption class="govuk-table__caption govuk-heading-m ">Options for hint</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">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 to use within the hint. 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 to use within the hint. 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">id</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Optional ID attribute to add to the hint span tag.
-                </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 hint span tag.
-                </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 hint span tag.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      idstring + Required. + The ID of the textarea. +
      namestring + Required. + The name of the textarea, which is submitted with the form data. +
      spellcheckboolean + Optional field to enable or disable the spellcheck attribute on the textarea. +
      rowsstring + Optional number of textarea rows (default is 5 rows). +
      valuestring + Optional initial value of the textarea. +
      describedBystring + One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users. +
      labelobject + Required. + Options for the label component. + + See label. +
      hintobject + Options for the hint component. + + See hint. +
      errorMessageobject + Options for the error message component. The error message component will not display if you use a falsy value for errorMessage, for example false or null. + + See errorMessage. +
      formGroupobject + Options for the form-group wrapper. + See formGroup. +
      classesstring + Classes to add to the textarea. +
      autocompletestring + Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used. +
      attributesobject + HTML attributes (for example data attributes) to add to the textarea. +
      + + + + + + + + + + + + + + + + + +
      Options for formGroup
      NameTypeDescription
      classesstring + Classes to add to the form group (for example to show error state for the whole group). +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for label
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the label. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the label. If html is provided, the text option will be ignored. +
      forstring + The value of the for attribute, the ID of the input the label is associated with. +
      isPageHeadingboolean + Whether the label also acts as the heading for the page. +
      classesstring + Classes to add to the label tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the label tag. +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Options for hint
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the hint. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the hint. If html is provided, the text option will be ignored. +
      idstring + Optional ID attribute to add to the hint span tag. +
      classesstring + Classes to add to the hint span tag. +
      attributesobject + HTML attributes (for example data attributes) to add to the hint span tag. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/textarea/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukTextarea %}
-
      -

      {{ govukTextarea({ +

      + 
      {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
+{{ govukTextarea({
   name: "more-detail",
   id: "more-detail",
   label: {
     text: "Can you provide more detail?",
-    classes: "govuk-label–l",
+    classes: "govuk-label--l",
     isPageHeading: true
   },
   hint: {
@@ -2738,7 +2743,7 @@ 
      Error messages
      
   }
 }) }}
      -

      +
      diff --git a/deploy/public/components/warning-text/index.html b/deploy/public/components/warning-text/index.html index d4f5a0c2d6..17452406e1 100644 --- a/deploy/public/components/warning-text/index.html +++ b/deploy/public/components/warning-text/index.html @@ -1130,24 +1130,23 @@

      Open this - -
      <span class="govuk-visually-hidden">warning text</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Warning text example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/warning-text/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-warning-text-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-text-example-html" role="tab" aria-controls="warning-text-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-text-example-nunjucks" role="tab" aria-controls="warning-text-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#warning-text-example-html" aria-controls="warning-text-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="warning-text-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-warning-text&quot;</span>&gt;</span>
-
      -

      <span class="govuk-warning-text__icon" aria-hidden="true">!</span> + + warning text + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-warning-text">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
   <strong class="govuk-warning-text__text">
     <span class="govuk-warning-text__assistive">Warning</span>
     You can be fined up to £5,000 if you do not register.
@@ -1156,90 +1155,92 @@
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-warning-text-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-warning-text-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">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 to use within the warning text component. 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 to use within the warning text component. 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">iconFallbackText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The fallback text for the icon.
-                </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 warning text.
-                </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 warning text.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the warning text component. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the warning text component. If html is provided, the text option will be ignored. +
      iconFallbackTextstring + Required. + The fallback text for the icon. +
      classesstring + Classes to add to the warning text. +
      attributesobject + HTML attributes (for example data attributes) to add to the warning text. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/warning-text/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukWarningText %}
-
      -

      {{ govukWarningText({ +

      + 
      {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
+
+{{ govukWarningText({
   text: "You can be fined up to £5,000 if you do not register.",
   iconFallbackText: "Warning"
 }) }}
      -

      +
      @@ -1253,24 +1254,23 @@

      How it works

      Open this - -
      <span class="govuk-visually-hidden">warning text second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Warning text second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/warning-text/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-warning-text-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-text-second-example-html" role="tab" aria-controls="warning-text-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#warning-text-second-example-nunjucks" role="tab" aria-controls="warning-text-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#warning-text-second-example-html" aria-controls="warning-text-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="warning-text-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-warning-text&quot;</span>&gt;</span>
-
      -

      <span class="govuk-warning-text__icon" aria-hidden="true">!</span> + + warning text second + example in a new tab + +

      + + + + +
      HTML
      +
      +
      + 
      <div class="govuk-warning-text">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
   <strong class="govuk-warning-text__text">
     <span class="govuk-warning-text__assistive">Warning</span>
     You can be fined up to £5,000 if you do not register.
@@ -1279,90 +1279,92 @@ 
      How it works
      Nunjucks
      -

      -
      <details class="govuk-details app-options" data-module="govuk-details" id="options-warning-text-second-example-details">
-
      +
      + + +
      Nunjucks macro options
      - -
      <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-warning-text-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">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 to use within the warning text component. 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 to use within the warning text component. 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">iconFallbackText</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                    <strong>Required.</strong>
-                  The fallback text for the icon.
-                </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 warning text.
-                </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 warning text.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
      + +

      + 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
      NameTypeDescription
      textstring + Required. + If html is set, this is not required. Text to use within the warning text component. If html is provided, the text option will be ignored. +
      htmlstring + Required. + If text is set, this is not required. HTML to use within the warning text component. If html is provided, the text option will be ignored. +
      iconFallbackTextstring + Required. + The fallback text for the icon. +
      classesstring + Classes to add to the warning text. +
      attributesobject + HTML attributes (for example data attributes) to add to the warning text. +
      + +
      -
      <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/warning-text/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukWarningText %}
-
      -

      {{ govukWarningText({ +

      + 
      {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
+
+{{ govukWarningText({
   text: "You can be fined up to £5,000 if you do not register.",
   iconFallbackText: "Warning"
 }) }}
      -

      +
      diff --git a/deploy/public/design-system-team/index.html b/deploy/public/design-system-team/index.html index 786926dd6e..13a44ae0a5 100644 --- a/deploy/public/design-system-team/index.html +++ b/deploy/public/design-system-team/index.html @@ -938,7 +938,7 @@

      Pages

      -

      GOV.UK Design System team

      +

      GOV.UK Design System team

      The GOV.UK Design System team at the Government Digital Service (GDS) maintains this design system.

      If you want to contact the team you can diff --git a/deploy/public/get-started/extending-and-modifying-components/index.html b/deploy/public/get-started/extending-and-modifying-components/index.html index 29551f975c..695595a868 100644 --- a/deploy/public/get-started/extending-and-modifying-components/index.html +++ b/deploy/public/get-started/extending-and-modifying-components/index.html @@ -1044,17 +1044,17 @@

      Start with override classes

    • font size with font override classes
    • width with width override classes

    -

    Avoid overwriting GOV.UK Design System code

    +

    Avoid overwriting GOV.UK Design System code

    If you make a modification involving CSS you might decide to write a selector that targets a GOV.UK Design System class and change its CSS properties.

    This will work in the short term but may break if you install an update relying on the component’s previous behaviour.

    For example, if you want to override the button component you could do the following.

    -
    <div class="app-interruption-card">
+
    <div class="app-interruption-card">
   <button class="govuk-button">
     Inverse button
   </button>
 </div>
 
    
-
    .app-interruption-card .govuk-button {
+
    .app-interruption-card .govuk-button {
   background-color: white;
   color: blue;
 }
@@ -1075,11 +1075,11 @@ 
    Use a unique prefix for compone
 
    Custom override classes
    
 
    If you need to specify some custom override classes which do not belong to a particular component, you can define these using your prefix and the -!- convention from the GOV.UK Design System.
    
 
    For example, to define a custom width for a specific reference number in your services you might do this.
    
-
    .app-\!-reference-number-width {
+
    .app-\!-reference-number-width {
   width: 10ch !important;
 }
 
    
-
    <span class="app-!-reference-number-width">
+
    <span class="app-!-reference-number-width">
   7446868939
 </span>
 
    
@@ -1087,13 +1087,13 @@ 
    Small modifications to components
    The GOV.UK Design System uses a naming convention called Block Element Modifier (BEM) which makes it easier to ensure styling is isolated to individual components. You can use this convention to make modifications to components.
    
 
    When making small modifications to components you can make use of the modifier convention from BEM, which uses a suffix of -- plus a name, alongside your own prefix.
    
 
    For example, if you wanted to override the button component you could do the following.
    
-
    <div class="app-interruption-card">
+
    <div class="app-interruption-card">
   <button class="govuk-button app-button--inverse">
     Inverse button
   </button>
 </div>
 
    
-
    .app-button--inverse {
+
    .app-button--inverse {
   background-color: govuk-colour("white");
   color: govuk-colour("blue");
 }
diff --git a/deploy/public/get-started/focus-states/index.html b/deploy/public/get-started/focus-states/index.html
index 52c288fca7..a16778b0ad 100644
--- a/deploy/public/get-started/focus-states/index.html
+++ b/deploy/public/get-started/focus-states/index.html
@@ -1039,8 +1039,7 @@ 
    Make focusable text accessible
    
 
    .app-component:focus {
   @include govuk-focused-text;
 }
-
    
-
    Make other focusable elements accessible
    
+
    Make other focusable elements accessible
    
 
    If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
    
 
    The 3 Sass variables are:
    
 
-
    Start using the GOV.UK page template
    
+
    Start using the GOV.UK page template
    
 
    You can set up a basic page that is consistent with GOV.UK branding by using the GOV.UK page template.
    
 
    Styling page elements
    
 
    The Design System provides CSS classes for styling content, instead of global styles.
    
@@ -1062,159 +1062,160 @@ 
    Using components
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-html" role="tab" aria-controls="button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-nunjucks" role="tab" aria-controls="button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-example-html" aria-controls="button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
    
-
      Save and continue
+
+          button
+          example in a new tab
+        
+      
    
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <button class="govuk-button" data-module="govuk-button">
+  Save and continue
 </button>
    
       
    
     
    
       
    Nunjucks
    
-    
      
    
-
    <details class="govuk-details app-options" data-module="govuk-details" id="options-button-example-details">
-
    
+    
      
+
+
+        
    
   
     
       Nunjucks macro options
     
   
   
    
-      
-
    <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-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
    
+
+          
    
+          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
    NameTypeDescription
    elementstring
+                      Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
+                    
    textstring
+                        Required.
+                      If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input.
+                    
    htmlstring
+                        Required.
+                      If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input.
+                    
    namestring
+                      Name for the input or button. This has no effect on a elements.
+                    
    typestring
+                      Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements.
+                    
    valuestring
+                      Value for the button tag. This has no effect on a or input elements.
+                    
    disabledboolean
+                      Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
+                    
    hrefstring
+                      The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
+                    
    classesstring
+                      Classes to add to the button component.
+                    
    attributesobject
+                      HTML attributes (for example data attributes) to add to the button component.
+                    
    preventDoubleClickboolean
+                      Prevent accidental double clicks on submit buttons from submitting forms multiple times
+                    
    isStartButtonboolean
+                      Use for the main call to action on your service's start page.
+                    
    
+
+
   
    
 
    
 
-
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
    
-
    {{ govukButton({
+      
    
+        
    {% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Save and continue"
 }) }}
    
       
    
-    
    
+    
    
 
 
 
diff --git a/deploy/public/get-started/prototyping/index.html b/deploy/public/get-started/prototyping/index.html
index 8a85079036..7a6da0076f 100644
--- a/deploy/public/get-started/prototyping/index.html
+++ b/deploy/public/get-started/prototyping/index.html
@@ -1031,159 +1031,160 @@ 
    Using components
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">button</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Button example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/button/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-button-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-html" role="tab" aria-controls="button-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#button-example-nunjucks" role="tab" aria-controls="button-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#button-example-html" aria-controls="button-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="button-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-
    
-
      Save and continue
+
+          button
+          example in a new tab
+        
+      
    
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <button class="govuk-button" data-module="govuk-button">
+  Save and continue
 </button>
    
       
    
     
    
       
    Nunjucks
    
-    
      
    
-
    <details class="govuk-details app-options" data-module="govuk-details" id="options-button-example-details">
-
    
+    
      
+
+
+        
    
   
     
       Nunjucks macro options
     
   
   
    
-      
-
    <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-button-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">element</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Whether to use an <code>input</code>, <code>button</code> or <code>a</code> element to create the button. In most cases you will not need to set this as it will be configured automatically if you use <code>href</code> or <code>html</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </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 button or link. If <code>html</code> is provided, the <code>text</code> option will be ignored and <code>element</code> will be automatically set to <code>button</code> unless <code>href</code> is also set, or it has already been defined. This option has no effect if <code>element</code> is set to <code>input</code>.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">name</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Name for the <code>input</code> or <code>button</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">type</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Type of <code>input</code> or <code>button</code> – <code>button</code>, <code>submit</code> or <code>reset</code>. Defaults to <code>submit</code>. This has no effect on <code>a</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">value</th>
-                <td class="govuk-table__cell ">string</td>
-                <td class="govuk-table__cell ">
-                  Value for the <code>button</code> tag. This has no effect on <code>a</code> or <code>input</code> elements.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">disabled</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Whether the button should be disabled. For button and input elements, <code>disabled</code> and <code>aria-disabled</code> attributes will be set automatically.
-                </td>
-              </tr>
-              <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 ">
-                  The URL that the button should link to. If this is set, <code>element</code> will be automatically set to <code>a</code> if it has not already been defined.
-                </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 button component.
-                </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 button component.
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">preventDoubleClick</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Prevent accidental double clicks on submit buttons from submitting forms multiple times
-                </td>
-              </tr>
-              <tr class="govuk-table__row">
-                <th class="govuk-table__header" scope="row">isStartButton</th>
-                <td class="govuk-table__cell ">boolean</td>
-                <td class="govuk-table__cell ">
-                  Use for the main call to action on your service&#39;s start page.
-                </td>
-              </tr>
-          </tbody>
-        </table>
-
    
+
+          
    
+          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
    NameTypeDescription
    elementstring
+                      Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
+                    
    textstring
+                        Required.
+                      If html is set, this is not required. Text for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input.
+                    
    htmlstring
+                        Required.
+                      If text is set, this is not required. HTML for the button or link. If html is provided, the text option will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This option has no effect if element is set to input.
+                    
    namestring
+                      Name for the input or button. This has no effect on a elements.
+                    
    typestring
+                      Type of input or button – button, submit or reset. Defaults to submit. This has no effect on a elements.
+                    
    valuestring
+                      Value for the button tag. This has no effect on a or input elements.
+                    
    disabledboolean
+                      Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
+                    
    hrefstring
+                      The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
+                    
    classesstring
+                      Classes to add to the button component.
+                    
    attributesobject
+                      HTML attributes (for example data attributes) to add to the button component.
+                    
    preventDoubleClickboolean
+                      Prevent accidental double clicks on submit buttons from submitting forms multiple times
+                    
    isStartButtonboolean
+                      Use for the main call to action on your service's start page.
+                    
    
+
+
   
    
 
    
 
-
    <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;govuk/components/button/macro.njk&quot;</span> <span class="hljs-keyword">import</span> govukButton %}
-
    
-
    {{ govukButton({
+      
    
+        
    {% from "govuk/components/button/macro.njk" import govukButton %}
+
+{{ govukButton({
   text: "Save and continue"
 }) }}
    
       
    
-    
    
+    
    
 
 
 
diff --git a/deploy/public/get-started/updating-your-code/index.html b/deploy/public/get-started/updating-your-code/index.html
index c422881096..b2f3564814 100644
--- a/deploy/public/get-started/updating-your-code/index.html
+++ b/deploy/public/get-started/updating-your-code/index.html
@@ -1029,202 +1029,201 @@ 
    Nunjucks
    
   
   
 
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">:top_of_page</td>
-  <td class="govuk-table__cell">Deprecated: putting content above the <code>&lt;!DOCTYPE html&gt;</code> will result in broken pages for users of older Internet Explorer versions.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:html_lang</td>
-  <td class="govuk-table__cell">htmlLang</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:page_title</td>
-  <td class="govuk-table__cell">pageTitle</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:asset_path</td>
-  <td class="govuk-table__cell">assetPath</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:head</td>
-  <td class="govuk-table__cell">head</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:body_classes</td>
-  <td class="govuk-table__cell">bodyClasses</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:body_start</td>
-  <td class="govuk-table__cell">bodyStart</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:skip_link_message</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the skip link by rendering your own,
-      which can include custom <code>text</code>
-    </p>
-    <pre><code>{% block skipLink %}
-
    
-
      {{ govukSkipLink({ text: “custom text” }) }}
+    
+      :top_of_page
+      Deprecated: putting content above the <!DOCTYPE html> will result in broken pages for users of older Internet Explorer versions.
+    
+
+    
+      :html_lang
+      htmlLang
+    
+
+    
+      :page_title
+      pageTitle
+    
+
+    
+      :asset_path
+      assetPath
+    
+
+    
+      :head
+      head
+    
+
+    
+      :body_classes
+      bodyClasses
+    
+
+    
+      :body_start
+      bodyStart
+    
+
+    
+      :skip_link_message
+      
+        
    
+          You can now entirely replace the skip link by rendering your own,
+          which can include custom text
+        
    
+        
    {% block skipLink %}
+  {{ govukSkipLink({ text: "custom text" }) }}
 {% endblock %}
    
         
    
           See the skip link component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">:cookie_message</td>
-  <td class="govuk-table__cell">
-    See the <a class="govuk-link" href="/components/cookie-banner/">cookie banner component</a> for more details.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">header_class</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the header component by rendering your own,
-      which can include custom <code>classes</code>
-    </p>
-    <pre><code>{% block header %}
-{{ govukHeader({ classes: "app-custom-classes" }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      :cookie_message
+      
+        See the cookie banner component for more details.
+      
+    
+
+    
+      header_class
+      
+        
    
+          You can now entirely replace the header component by rendering your own,
+          which can include custom classes
+        
    
+        
    {% block header %}
+    {{ govukHeader({ classes: "app-custom-classes" }) }}
+{% endblock %}
    
         
    
           See the header component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">homepage_url</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the header component by rendering your own,
-      which can include custom <code>homepageUrl</code>
-    </p>
-    <pre><code>{% block header %}
-{{ govukHeader({ homepageUrl: "/custom-url" }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      homepage_url
+      
+        
    
+          You can now entirely replace the header component by rendering your own,
+          which can include custom homepageUrl
+        
    
+        
    {% block header %}
+    {{ govukHeader({ homepageUrl: "/custom-url" }) }}
+{% endblock %}
    
         
    
           See the header component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">global_header_text</td>
-  <td class="govuk-table__cell">
-    No equivalent. <a href="https://github.com/alphagov/govuk-frontend/issue/new">Raise an issue</a> if you need this.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">inside_header</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the header component by rendering your own,
-      which can include a custom <code>serviceName</code>
-    </p>
-    <pre><code>{% block header %}
-{{ govukHeader({ serviceName: "Custom service name" }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      global_header_text
+      
+        No equivalent. Raise an issue if you need this.
+      
+    
+
+    
+      inside_header
+      
+        
    
+          You can now entirely replace the header component by rendering your own,
+          which can include a custom serviceName
+        
    
+        
    {% block header %}
+    {{ govukHeader({ serviceName: "Custom service name" }) }}
+{% endblock %}
    
         
    
           See the header component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">proposition_header</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the header component by rendering your own,
-      which can include a custom <code>navigation</code>
-    </p>
-    <pre><code>{% block header %}
-{{ govukHeader({ navigation: [] }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      proposition_header
+      
+        
    
+          You can now entirely replace the header component by rendering your own,
+          which can include a custom navigation
+        
    
+        
    {% block header %}
+    {{ govukHeader({ navigation: [] }) }}
+{% endblock %}
    
         
    
           See the header component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">:after_header</td>
-  <td class="govuk-table__cell">beforeContent</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:content</td>
-  <td class="govuk-table__cell">
-    <p>
-      main
-    </p>
-    <p>
-      Setting <code>content</code> in the new template will put it inside a  <code>&lt;main&gt;</code> element.
-    </p>
-    <p>
-      In the old GOV.UK Template there was no default <code>&lt;main&gt;</code> element.
-    </p>
-    <p>
-      You can restructure your content so that it does not use a <code>&lt;main&gt;</code> element, or override the <code>main</code> block.
-    </p>
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:footer_top</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the footer component by rendering your own,
-      which can include a custom <code>navigation</code>
-    </p>
-    <pre><code>{% block header %}
-{{ govukFooter({ navigation: [] }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      :after_header
+      beforeContent
+    
+
+    
+      :content
+      
+        
    
+          main
+        
    
+        
    
+          Setting content in the new template will put it inside a  <main> element.
+        
    
+        
    
+          In the old GOV.UK Template there was no default <main> element.
+        
    
+        
    
+          You can restructure your content so that it does not use a <main> element, or override the main block.
+        
    
+      
+    
+
+    
+      :footer_top
+      
+        
    
+          You can now entirely replace the footer component by rendering your own,
+          which can include a custom navigation
+        
    
+        
    {% block header %}
+    {{ govukFooter({ navigation: [] }) }}
+{% endblock %}
    
         
    
           See the footer component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">:footer_support_links</td>
-  <td class="govuk-table__cell">
-    <p>
-      You can now entirely replace the footer component by rendering your own,
-      which can include custom <code>meta</code> links
-    </p>
-    <pre><code>{% block header %}
-{{ govukFooter({ meta: [] }) }}
-
    
-
    {% endblock %}
    
+    
+
+    
+      :footer_support_links
+      
+        
    
+          You can now entirely replace the footer component by rendering your own,
+          which can include custom meta links
+        
    
+        
    {% block header %}
+    {{ govukFooter({ meta: [] }) }}
+{% endblock %}
    
         
    
           See the footer component for more details.
         
    
       
-    
    
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">:licence_message</td>
-  <td class="govuk-table__cell">
-    No equivalent. <a href="https://github.com/alphagov/govuk-frontend/issues/new">Raise an issue</a> if you need this.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">:body_end</td>
-  <td class="govuk-table__cell">bodyEnd</td>
-</tr>
-
    
+    
+
+    
+      :licence_message
+      
+        No equivalent. Raise an issue if you need this.
+      
+    
+
+    
+      :body_end
+      bodyEnd
+    
   
 
 
@@ -1465,19 +1464,18 @@ 
       Width override classes
     
 
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell ">form-section</td>
-  <td class="govuk-table__cell ">Deprecated: not required with new spacing implementation</td>
-</tr>
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell ">form-group-related</td>
-  <td class="govuk-table__cell ">Deprecated: not required with new spacing implementation</td>
-</tr>
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell ">form-group-compound</td>
-  <td class="govuk-table__cell ">Deprecated: not required with new spacing implementation</td>
-</tr>
-
    
+    
+      form-section
+      Deprecated: not required with new spacing implementation
+    
+    
+      form-group-related
+      Deprecated: not required with new spacing implementation
+    
+    
+      form-group-compound
+      Deprecated: not required with new spacing implementation
+    
   
 
 
diff --git a/deploy/public/patterns/addresses/index.html b/deploy/public/patterns/addresses/index.html
index c00fcbf0f7..65f4529800 100644
--- a/deploy/public/patterns/addresses/index.html
+++ b/deploy/public/patterns/addresses/index.html
@@ -1144,65 +1144,71 @@ 
    Multiple text inputs
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">multiple text inputs addresses</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Multiple text inputs Addresses example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/addresses/multiple/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-multiple-text-inputs-addresses-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-text-inputs-addresses-example-open-html" role="tab" aria-controls="multiple-text-inputs-addresses-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#multiple-text-inputs-addresses-example-open-nunjucks" role="tab" aria-controls="multiple-text-inputs-addresses-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#multiple-text-inputs-addresses-example-open-html" aria-controls="multiple-text-inputs-addresses-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="multiple-text-inputs-addresses-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span>&gt;</span>
-
    
-
      <legend class="govuk-fieldset__legend govuk-fieldset__legend–l">
+
+          multiple text inputs addresses
+          example in a new tab
+        
+      
    
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
     <h1 class="govuk-fieldset__heading">
       What is your address?
     </h1>
-  </legend>
    
-
      <div class="govuk-form-group">
+  </legend>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-line-1">
       Address line 1
     </label>
     <input class="govuk-input" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
-  </div>
    
-
      <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-line-2">
       Address line 2 (optional)
     </label>
     <input class="govuk-input" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
-  </div>
    
-
      <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-town">
       Town or city
     </label>
     <input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
-  </div>
    
-
      <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-county">
       County (optional)
     </label>
     <input class="govuk-input govuk-!-width-two-thirds" id="address-county" name="address-county" type="text">
-  </div>
    
-
      <div class="govuk-form-group">
+  </div>
+
+  <div class="govuk-form-group">
     <label class="govuk-label" for="address-postcode">
       Postcode
     </label>
-    <input class="govuk-input govuk-input–width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
-  </div>
    
-
    </fieldset>
    
+    <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
+  </div>
+
+</fieldset>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+
 {% call govukFieldset({
   legend: {
     text: "What is your address?",
@@ -1210,6 +1216,7 @@ 
    Multiple text inputs
    
     isPageHeading: true
   }
 }) %}
+
   {{ govukInput({
     label: {
       text: 'Address line 1'
@@ -1218,6 +1225,7 @@ 
    Multiple text inputs
    
     name: "address-line-1",
     autocomplete: "address-line1"
   }) }}
+
   {{ govukInput({
     label: {
       text: 'Address line 2 (optional)'
@@ -1226,6 +1234,7 @@ 
    Multiple text inputs
    
     name: "address-line-2",
     autocomplete: "address-line2"
   }) }}
+
   {{ govukInput({
     label: {
       text: "Town or city"
@@ -1235,6 +1244,7 @@ 
    Multiple text inputs
    
     name: "address-town",
     autocomplete: "address-level2"
   }) }}
+
   {{ govukInput({
     label: {
       text: "County (optional)"
@@ -1243,6 +1253,7 @@ 
    Multiple text inputs
    
     id: "address-county",
     name: "address-county"
   }) }}
+
   {{ govukInput({
     label: {
       text: "Postcode"
@@ -1252,9 +1263,10 @@ 
    Multiple text inputs
    
     name: "address-postcode",
     autocomplete: "postal-code"
   }) }}
+
 {% endcall %}
    -

    + @@ -1285,7 +1297,7 @@

    How multiple text inputs work

    Make it optional for users to enter their county (such as Berkshire or Cumbria). It’s not part of a correct UK address, according to Royal Mail, and it’s not used to deliver post.

    Remove the county field if you’re sure your users will not need it, and your service will not use it.

    Use the autocomplete attribute on multiple address fields

    -

    Use the autocomplete attribute on each individual address field to help users enter their address more quickly. This lets you specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.

    +

    Use the autocomplete attribute on each individual address field to help users enter their address more quickly. This lets you specify each input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.

    Check which input purpose to use for each field.

    In production, you’ll need to do this to meet WCAG 2.1 Level AA. You will not normally need to use the autocomplete attribute in prototypes, as users will not generally be using their own devices.

    Error messages

    @@ -1295,36 +1307,36 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">postcode error</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Postcode error example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/addresses/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-postcode-error-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#postcode-error-example-html" role="tab" aria-controls="postcode-error-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#postcode-error-example-nunjucks" role="tab" aria-controls="postcode-error-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#postcode-error-example-html" aria-controls="postcode-error-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="postcode-error-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="address-postcode"> + + postcode error + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="address-postcode">
     Postcode
   </label>
   <p id="address-postcode-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a real postcode
   </p>
-  <input class="govuk-input govuk-input–width-10 govuk-input–error" id="address-postcode" name="address-postcode" type="text" value="Not a postcode" aria-describedby="address-postcode-error" autocomplete="postal-code">
+  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="address-postcode" name="address-postcode" type="text" value="Not a postcode" aria-describedby="address-postcode-error" autocomplete="postal-code">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Postcode"
@@ -1339,7 +1351,7 @@ 
    Error messages
    
   autocomplete: "postal-code"
 }) }}
    -

    + @@ -1382,24 +1394,23 @@

    Textarea

    Open this - -
    <span class="govuk-visually-hidden">textarea addresses</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Textarea addresses example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/addresses/textarea/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-textarea-addresses-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-addresses-example-open-html" role="tab" aria-controls="textarea-addresses-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#textarea-addresses-example-open-nunjucks" role="tab" aria-controls="textarea-addresses-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#textarea-addresses-example-open-html" aria-controls="textarea-addresses-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="textarea-addresses-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="address"> + + textarea addresses + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="address">
     What is your address?
   </label>
   <textarea class="govuk-textarea" id="address" name="address" rows="5" autocomplete="street-address"></textarea>
@@ -1409,6 +1420,7 @@ 
    Textarea
    
       
    Nunjucks
    
     
          
    
         
    {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
 {{ govukTextarea({
   name: "address",
   id: "address",
@@ -1418,7 +1430,7 @@ 
    Textarea
    
   }
 }) }}
    
       
    
-    
    
+
    diff --git a/deploy/public/patterns/bank-details/index.html b/deploy/public/patterns/bank-details/index.html index 54b93bb312..bd586b088a 100644 --- a/deploy/public/patterns/bank-details/index.html +++ b/deploy/public/patterns/bank-details/index.html @@ -1144,57 +1144,61 @@

    Open this - -
    <span class="govuk-visually-hidden">bank or building society account details</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Bank or building society account details example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/bank-details/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-bank-or-building-society-account-details-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#bank-or-building-society-account-details-example-html" role="tab" aria-controls="bank-or-building-society-account-details-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#bank-or-building-society-account-details-example-nunjucks" role="tab" aria-controls="bank-or-building-society-account-details-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#bank-or-building-society-account-details-example-html" aria-controls="bank-or-building-society-account-details-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="bank-or-building-society-account-details-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Bank or building society account details<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    -

    <div class="govuk-form-group"> + + bank or building society account details + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <h1 class="govuk-heading-l">Bank or building society account details</h1>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="name-on-the-account">
     Name on the account
   </label>
   <input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="sort-code">
     Sort code
   </label>
   <div id="sort-code-hint" class="govuk-hint">
     Must be 6 digits long
   </div>
-  <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
    
-
    <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="account-number">
     Account number
   </label>
   <div id="account-number-hint" class="govuk-hint">
     Must be between 6 and 8 digits long
   </div>
-  <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
    
-
    <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="roll-number">
     Building society roll number (if you have one)
   </label>
   <div id="roll-number-hint" class="govuk-hint">
     You can find it on your card, statement or passbook
   </div>
-  <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+  <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
 </button>
    @@ -1203,7 +1207,9 @@ 

    {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
+
 <h1 class="govuk-heading-l">Bank or building society account details</h1>
+
 {{ govukInput({
   label: {
     text: "Name on the account"
@@ -1213,6 +1219,7 @@ 
    
   autocomplete: "name",
   spellcheck: false
 }) }}
+
 {{ govukInput({
   label: {
     text: "Sort code"
@@ -1226,6 +1233,7 @@ 
    
   inputmode: "numeric",
   spellcheck: false
 }) }}
+
 {{ govukInput({
   label: {
     text: "Account number"
@@ -1239,6 +1247,7 @@ 
    
   inputmode: "numeric",
   spellcheck: false
 }) }}
+
 {{ govukInput({
   label: {
     text: "Building society roll number (if you have one)"
@@ -1251,11 +1260,12 @@ 
    
   name: "roll-number",
   spellcheck: false
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
    -

    +

    @@ -1287,25 +1297,24 @@

    Turn off HTML5 validation

    Open this - -
    <span class="govuk-visually-hidden">branch question</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Branch question example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/bank-details/branch/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-branch-question-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#branch-question-example-html" role="tab" aria-controls="branch-question-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#branch-question-example-nunjucks" role="tab" aria-controls="branch-question-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#branch-question-example-html" aria-controls="branch-question-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="branch-question-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <fieldset class="govuk-fieldset"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend–l"> + + branch question + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading">
         How do you want to be paid?
       </h1>
@@ -1338,10 +1347,12 @@ 
    Turn off HTML5 validation
    
           We&#39;ll contact you to arrange payment
         </div>
       </div>
-    </div>
    
-
      </fieldset>
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+    </div>
+
+  </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
 </button>
    @@ -1350,6 +1361,7 @@

    Turn off HTML5 validation

    {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
 {{ govukRadios({
   idPrefix: "method-of-payment",
   name: "method-of-payment",
@@ -1382,11 +1394,12 @@ 
    Turn off HTML5 validation
    
     }
   ]
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
    -

    +
    @@ -1408,32 +1421,32 @@

    International bank account details Open this - -
    <span class="govuk-visually-hidden">international bank account details</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="International bank account details example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/bank-details/international/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-international-bank-account-details-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#international-bank-account-details-example-html" role="tab" aria-controls="international-bank-account-details-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#international-bank-account-details-example-nunjucks" role="tab" aria-controls="international-bank-account-details-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#international-bank-account-details-example-html" aria-controls="international-bank-account-details-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="international-bank-account-details-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="bic-code"> + + international bank account details + example in a new tab + + + + + +

    +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="bic-code">
     BIC or SWIFT code
   </label>
   <div id="bic-code-hint" class="govuk-hint">
     Must be between 8 and 11 characters long. You can ask your bank or check your bank statement
   </div>
-  <input class="govuk-input govuk-input–width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
-</div>
    
-
    <div class="govuk-form-group">
+  <input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="iban">
     IBAN
   </label>
@@ -1448,6 +1461,7 @@ 
    International bank account details      
    
         
    {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "BIC or SWIFT code"
@@ -1460,6 +1474,7 @@ 
    International bank account detailsname: "bic-code",
   spellcheck: false
 }) }}
+
 {{ govukInput({
   label: {
     text: "IBAN"
@@ -1472,7 +1487,7 @@ 
    International bank account detailsspellcheck: false
 }) }}
    
       
    
-

    +
    @@ -1484,24 +1499,23 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/bank-details/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-errors-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#errors-example-html" role="tab" aria-controls="errors-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#errors-example-nunjucks" role="tab" aria-controls="errors-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#errors-example-html" aria-controls="errors-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="errors-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="sort-code"> + + errors + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="sort-code">
     Sort code
   </label>
   <div id="sort-code-hint" class="govuk-hint">
@@ -1510,13 +1524,14 @@ 
    Error messages
    
   <p id="sort-code-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a valid sort code like 309430
   </p>
-  <input class="govuk-input govuk-input–width-5 govuk-input–error" id="sort-code" name="sort-code" type="text" spellcheck="false" value="12" aria-describedby="sort-code-hint sort-code-error" inputmode="numeric">
+  <input class="govuk-input govuk-input--width-5 govuk-input--error" id="sort-code" name="sort-code" type="text" spellcheck="false" value="12" aria-describedby="sort-code-hint sort-code-error" inputmode="numeric">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Sort code"
@@ -1535,7 +1550,7 @@ 
    Error messages
    
   }
 }) }}
    -

    + diff --git a/deploy/public/patterns/check-answers/index.html b/deploy/public/patterns/check-answers/index.html index 9926c4c44a..e7dd65ffef 100644 --- a/deploy/public/patterns/check-answers/index.html +++ b/deploy/public/patterns/check-answers/index.html @@ -1137,162 +1137,162 @@

    Open this - -
    <span class="govuk-visually-hidden">check answers</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Check answers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/check-answers/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-check-answers-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#check-answers-example-html" role="tab" aria-controls="check-answers-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#check-answers-example-nunjucks" role="tab" aria-controls="check-answers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#check-answers-example-html" aria-controls="check-answers-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="check-answers-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + check answers + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds-from-desktop">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Check your answers before sending your application<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Personal details<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list govuk-!-margin-bottom-9&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Name
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          Sarah Philips
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> name<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Date of birth
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          5 January 1978
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> date of birth<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Address
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          72 Guild Street<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>London<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>SE23 6FH
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> address<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Contact details
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>07700 900457<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>sarah.phillips@example.com<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> contact details<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Application details<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list govuk-!-margin-bottom-9&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Previous application number
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          502135326
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> previous application number<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Licence type
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          For personal use
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> licence type<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Home address
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          72 Guild Street<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>London<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>SE23 6FH
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> home address<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__row&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__key&quot;</span>&gt;</span>
-          Licence period
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__value&quot;</span>&gt;</span>
-          Valid for 6 months
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-summary-list__actions&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>
-            Change<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-visually-hidden&quot;</span>&gt;</span> licence period<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Now send your application<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;hidden&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;answers-checked&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Accept and send
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+      <div class="govuk-grid-column-two-thirds-from-desktop">
+
+        <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+        <h2 class="govuk-heading-m">Personal details</h2>
+
+        <dl class="govuk-summary-list govuk-!-margin-bottom-9">
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Name
+            </dt>
+            <dd class="govuk-summary-list__value">
+              Sarah Philips
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> name</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Date of birth
+            </dt>
+            <dd class="govuk-summary-list__value">
+              5 January 1978
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> date of birth</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Address
+            </dt>
+            <dd class="govuk-summary-list__value">
+              72 Guild Street<br>London<br>SE23 6FH
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> address</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Contact details
+            </dt>
+            <dd class="govuk-summary-list__value">
+              <p class="govuk-body">07700 900457</p>
+              <p class="govuk-body">sarah.phillips@example.com</p>
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> contact details</span>
+              </a>
+            </dd>
+          </div>
+        </dl>
+
+        <h2 class="govuk-heading-m">Application details</h2>
+
+        <dl class="govuk-summary-list govuk-!-margin-bottom-9">
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Previous application number
+            </dt>
+            <dd class="govuk-summary-list__value">
+              502135326
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> previous application number</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Licence type
+            </dt>
+            <dd class="govuk-summary-list__value">
+              For personal use
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> licence type</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Home address
+            </dt>
+            <dd class="govuk-summary-list__value">
+              72 Guild Street<br>London<br>SE23 6FH
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> home address</span>
+              </a>
+            </dd>
+          </div>
+          <div class="govuk-summary-list__row">
+            <dt class="govuk-summary-list__key">
+              Licence period
+            </dt>
+            <dd class="govuk-summary-list__value">
+              Valid for 6 months
+            </dd>
+            <dd class="govuk-summary-list__actions">
+              <a class="govuk-link" href="#">
+                Change<span class="govuk-visually-hidden"> licence period</span>
+              </a>
+            </dd>
+          </div>
+        </dl>
+
+        <h2 class="govuk-heading-m">Now send your application</h2>
+
+        <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+
+        <form action="/form-handler" method="post" novalidate>
+
+          <input type="hidden" name="answers-checked" value="true">
+
+          <button class="govuk-button" data-module="govuk-button">
+            Accept and send
+          </button>
+
+        </form>
+
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1301,17 +1301,22 @@ 

    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back",
     href: "#"
   }) }}
 {% endblock %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds-from-desktop">
+
       <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
       <h2 class="govuk-heading-m">Personal details</h2>
+
       {{ govukSummaryList({
         classes: 'govuk-!-margin-bottom-9',
         rows: [
@@ -1371,7 +1376,7 @@ 
    
               text: "Contact details"
             },
             value: {
-              html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+              html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
             },
             actions: {
               items: [
@@ -1385,7 +1390,10 @@ 
    
           }
         ]
       }) }}
+
+
       <h2 class="govuk-heading-m">Application details</h2>
+
       {{ govukSummaryList({
         classes: 'govuk-!-margin-bottom-9',
         rows: [
@@ -1459,19 +1467,26 @@ 
    
           }
         ]
       }) }}
+
       <h2 class="govuk-heading-m">Now send your application</h2>
+
       <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+
       <form action="/form-handler" method="post" novalidate>
+
         <input type="hidden" name="answers-checked" value="true">
+
         {{ govukButton({
           text: "Accept and send"
         }) }}
+
       </form>
+
     </div>
   </div>
 {% endblock %}
    -

    + diff --git a/deploy/public/patterns/confirm-a-phone-number/index.html b/deploy/public/patterns/confirm-a-phone-number/index.html index b6f7573e39..bcde64bafb 100644 --- a/deploy/public/patterns/confirm-a-phone-number/index.html +++ b/deploy/public/patterns/confirm-a-phone-number/index.html @@ -1137,42 +1137,48 @@

    Open this - -
    <span class="govuk-visually-hidden">default – confirm a phone number</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-confirm-a-phone-number-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-confirm-a-phone-number-example-html" role="tab" aria-controls="default-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="default-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-confirm-a-phone-number-example-html" aria-controls="default-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-confirm-a-phone-number-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Check your phone<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    -

    <p class="govuk-body">We’ve sent you a text message with a security code.</p>

    -

    <div class="govuk-form-group"> + + default – confirm a phone number + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <h1 class="govuk-heading-l">Check your phone</h1>
+
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="security-code">
     Security code
   </label>
-  <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+  <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
-</button>
    
-
    <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    +</button> + +<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 <h1 class="govuk-heading-l">Check your phone</h1>
+
 <p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
 {{ govukInput({
   label: {
     text: "Security code"
@@ -1184,12 +1190,14 @@ 
    
   classes: "govuk-input--width-4",
   inputmode: "numeric"
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
+
 <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    -

    + @@ -1218,42 +1226,48 @@

    When the user creates an account

    Open this - -
    <span class="govuk-visually-hidden">default – confirm a phone number</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-confirm-a-phone-number-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-confirm-a-phone-number-example-html" role="tab" aria-controls="default-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="default-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-confirm-a-phone-number-example-html" aria-controls="default-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-confirm-a-phone-number-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Check your phone<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    -

    <p class="govuk-body">We’ve sent you a text message with a security code.</p>

    -

    <div class="govuk-form-group"> + + default – confirm a phone number + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <h1 class="govuk-heading-l">Check your phone</h1>
+
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="security-code">
     Security code
   </label>
-  <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+  <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
-</button>
    
-
    <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    +</button> + +<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 <h1 class="govuk-heading-l">Check your phone</h1>
+
 <p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
 {{ govukInput({
   label: {
     text: "Security code"
@@ -1265,12 +1279,14 @@ 
    When the user creates an account
    
   classes: "govuk-input--width-4",
   inputmode: "numeric"
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
+
 <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    -

    + @@ -1288,26 +1304,28 @@

    When the user creates an account

    Open this - -
    <span class="govuk-visually-hidden">request a new security code (first time) – security code</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Request a new security code (first time) – Security code example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/resend-first-time/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-request-a-new-security-code-first-time-security-code-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-first-time-security-code-example-html" role="tab" aria-controls="request-a-new-security-code-first-time-security-code-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-first-time-security-code-example-nunjucks" role="tab" aria-controls="request-a-new-security-code-first-time-security-code-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#request-a-new-security-code-first-time-security-code-example-html" aria-controls="request-a-new-security-code-first-time-security-code-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-first-time-security-code-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-back-link&quot;</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-
    -

    <h1 class="govuk-heading-l">Request a new security code</h1>

    -

    <p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>

    -

    <details class="govuk-details" data-module="govuk-details"> + + request a new security code (first time) – security code + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <a href="#" class="govuk-back-link">Back</a>
+
+<h1 class="govuk-heading-l">Request a new security code</h1>
+
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+
+<details class="govuk-details" data-module="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       Change where the text message is sent
@@ -1318,11 +1336,13 @@ 
    When the user creates an account
    
       <label class="govuk-label" for="mobile-number">
         Mobile number
       </label>
-      <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
-    </div>
    
-
      </div>
-</details>
    
-
    <button class="govuk-button" data-module="govuk-button">
+      <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+    </div>
+
+  </div>
+</details>
+
+<button class="govuk-button" data-module="govuk-button">
   Request a new code
 </button>
    @@ -1333,12 +1353,17 @@

    When the user creates an account

    {% from "govuk/components/button/macro.njk" import govukButton %} {% from "govuk/components/input/macro.njk" import govukInput %} {% from "govuk/components/details/macro.njk" import govukDetails %} + + {{ govukBackLink({ text: "Back", href: "#" }) }} + <h1 class="govuk-heading-l">Request a new security code</h1> + <p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p> + {% set mobileNumberHtml %} {{ govukInput({ label: { @@ -1352,13 +1377,16 @@

    When the user creates an account

    classes: "govuk-input--width-20" }) }} {% endset %} + {{ govukDetails({ summaryText: "Change where the text message is sent", html: mobileNumberHtml }) }} + + {{ govukButton({text: "Request a new code"}) }}
    -

    + @@ -1378,26 +1406,28 @@

    When the user signs in

    Open this - -
    <span class="govuk-visually-hidden">request a new security code – security code</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Request a new security code – Security code example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/resend/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-request-a-new-security-code-security-code-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-security-code-example-html" role="tab" aria-controls="request-a-new-security-code-security-code-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#request-a-new-security-code-security-code-example-nunjucks" role="tab" aria-controls="request-a-new-security-code-security-code-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#request-a-new-security-code-security-code-example-html" aria-controls="request-a-new-security-code-security-code-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="request-a-new-security-code-security-code-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-back-link&quot;</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-
    -

    <h1 class="govuk-heading-l">Request a new security code</h1>

    -

    <p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>

    -

    <details class="govuk-details" data-module="govuk-details"> + + request a new security code – security code + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <a href="#" class="govuk-back-link">Back</a>
+
+<h1 class="govuk-heading-l">Request a new security code</h1>
+
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+
+<details class="govuk-details" data-module="govuk-details">
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       I do not have access to the phone
@@ -1406,8 +1436,9 @@ 
    When the user signs in
    
   <div class="govuk-details__text">
     <p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
   </div>
-</details>
    
-
    <button class="govuk-button" data-module="govuk-button">
+</details>
+
+<button class="govuk-button" data-module="govuk-button">
   Request a new code
 </button>
    @@ -1417,19 +1448,26 @@

    When the user signs in

    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/details/macro.njk" import govukDetails %}
+
+
 {{ govukBackLink({
   text: "Back",
   href: "#"
 }) }}
+
 <h1 class="govuk-heading-l">Request a new security code</h1>
+
 <p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+
+
 {{ govukDetails({
   summaryText: "I do not have access to the phone",
   html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
 }) }}
+
 {{ govukButton({text: "Request a new code"}) }}
    -

    + @@ -1451,45 +1489,51 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">error, incorrect security code – confirm a phone number</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error, incorrect security code – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/error-incorrect/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-incorrect-security-code-confirm-a-phone-number-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-html" role="tab" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-incorrect-security-code-confirm-a-phone-number-example-html" aria-controls="error-incorrect-security-code-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-incorrect-security-code-confirm-a-phone-number-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Check your phone<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    -

    <p class="govuk-body">We’ve sent you a text message with a security code.</p>

    -

    <div class="govuk-form-group govuk-form-group–error"> + + error, incorrect security code – confirm a phone number + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <h1 class="govuk-heading-l">Check your phone</h1>
+
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
+<div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="security-code">
     Security code
   </label>
   <p id="security-code-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a correct security code
   </p>
-  <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+  <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
-</button>
    
-
    <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    +</button> + +<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 <h1 class="govuk-heading-l">Check your phone</h1>
+
 <p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
 {{ govukInput({
   label: {
     text: "Security code"
@@ -1504,12 +1548,14 @@ 
    Error messages
    
   classes: "govuk-input--width-4",
   inputmode: "numeric"
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
+
 <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    -

    + @@ -1526,45 +1572,51 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">error, security code expired – confirm a phone number</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error, security code expired – Confirm a phone number example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/confirm-a-phone-number/error-expired/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-security-code-expired-confirm-a-phone-number-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-security-code-expired-confirm-a-phone-number-example-html" role="tab" aria-controls="error-security-code-expired-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-security-code-expired-confirm-a-phone-number-example-nunjucks" role="tab" aria-controls="error-security-code-expired-confirm-a-phone-number-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-security-code-expired-confirm-a-phone-number-example-html" aria-controls="error-security-code-expired-confirm-a-phone-number-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-security-code-expired-confirm-a-phone-number-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Check your phone<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    -

    <p class="govuk-body">We’ve sent you a text message with a security code.</p>

    -

    <div class="govuk-form-group govuk-form-group–error"> + + error, security code expired – confirm a phone number + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <h1 class="govuk-heading-l">Check your phone</h1>
+
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
+<div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="security-code">
     Security code
   </label>
   <p id="security-code-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
   </p>
-  <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
    
-
    <button class="govuk-button" data-module="govuk-button">
+  <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
   Continue
-</button>
    
-
    <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    +</button> + +<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 <h1 class="govuk-heading-l">Check your phone</h1>
+
 <p class="govuk-body">We’ve sent you a text message with a security code.</p>
+
 {{ govukInput({
   label: {
     text: "Security code"
@@ -1579,12 +1631,14 @@ 
    Error messages
    
   classes: "govuk-input--width-4",
   inputmode: "numeric"
 }) }}
+
 {{ govukButton({
   text: "Continue"
 }) }}
+
 <p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
    -

    + diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html index fc923b8e58..2cf7a4bc2c 100644 --- a/deploy/public/patterns/confirmation-pages/index.html +++ b/deploy/public/patterns/confirmation-pages/index.html @@ -1138,59 +1138,60 @@

    Open this - -
    <span class="govuk-visually-hidden">confirmation pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Confirmation pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/confirmation-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-confirmation-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-example-html" role="tab" aria-controls="confirmation-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-example-nunjucks" role="tab" aria-controls="confirmation-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#confirmation-pages-example-html" aria-controls="confirmation-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="confirmation-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + confirmation pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-panel govuk-panel–confirmation">
+        <div class="govuk-panel govuk-panel--confirmation">
           <h1 class="govuk-panel__title">
             Application complete
           </h1>
           <div class="govuk-panel__body">
             Your reference number<br><strong>HDJ2123F</strong>
           </div>
-        </div>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We have sent you a confirmation email.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>What happens next<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      We’ve sent your application to Hackney Electoral Register Office.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      They will contact you either to confirm your registration, or to ask for more information.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span>&gt;</span>What did you think of this service?<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> (takes 30 seconds)
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+        </div>
+
+        <p class="govuk-body">We have sent you a confirmation email.</p>
+
+        <h2 class="govuk-heading-m">What happens next</h2>
+
+        <p class="govuk-body">
+          We’ve sent your application to Hackney Electoral Register Office.
+        </p>
+        <p class="govuk-body">
+          They will contact you either to confirm your registration, or to ask for more information.
+        </p>
+
+        <p class="govuk-body">
+          <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
+        </p>
+      </div>
+    </div>
+  </main>
 </div>
    Nunjucks
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% from "govuk/components/panel/macro.njk" import govukPanel %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1198,14 +1199,18 @@ 
    
         titleText: "Application complete",
         html: "Your reference number<br><strong>HDJ2123F</strong>"
       }) }}
+
       <p class="govuk-body">We have sent you a confirmation email.</p>
+
       <h2 class="govuk-heading-m">What happens next</h2>
+
       <p class="govuk-body">
         We’ve sent your application to Hackney Electoral Register Office.
       </p>
       <p class="govuk-body">
         They will contact you either to confirm your registration, or to ask for more information.
       </p>
+
       <p class="govuk-body">
         <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
       </p>
@@ -1213,7 +1218,7 @@ 
    
   </div>
 {% endblock %}
    -

    + @@ -1236,59 +1241,60 @@

    How it works

    Open this - -
    <span class="govuk-visually-hidden">confirmation pages second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Confirmation pages second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/confirmation-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-confirmation-pages-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-second-example-html" role="tab" aria-controls="confirmation-pages-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#confirmation-pages-second-example-nunjucks" role="tab" aria-controls="confirmation-pages-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#confirmation-pages-second-example-html" aria-controls="confirmation-pages-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="confirmation-pages-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + confirmation pages second + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <div class="govuk-panel govuk-panel–confirmation">
+        <div class="govuk-panel govuk-panel--confirmation">
           <h1 class="govuk-panel__title">
             Application complete
           </h1>
           <div class="govuk-panel__body">
             Your reference number<br><strong>HDJ2123F</strong>
           </div>
-        </div>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We have sent you a confirmation email.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>What happens next<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      We’ve sent your application to Hackney Electoral Register Office.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      They will contact you either to confirm your registration, or to ask for more information.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span>&gt;</span>What did you think of this service?<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> (takes 30 seconds)
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+        </div>
+
+        <p class="govuk-body">We have sent you a confirmation email.</p>
+
+        <h2 class="govuk-heading-m">What happens next</h2>
+
+        <p class="govuk-body">
+          We’ve sent your application to Hackney Electoral Register Office.
+        </p>
+        <p class="govuk-body">
+          They will contact you either to confirm your registration, or to ask for more information.
+        </p>
+
+        <p class="govuk-body">
+          <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
+        </p>
+      </div>
+    </div>
+  </main>
 </div>
    Nunjucks
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% from "govuk/components/panel/macro.njk" import govukPanel %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1296,14 +1302,18 @@ 
    How it works
    
         titleText: "Application complete",
         html: "Your reference number<br><strong>HDJ2123F</strong>"
       }) }}
+
       <p class="govuk-body">We have sent you a confirmation email.</p>
+
       <h2 class="govuk-heading-m">What happens next</h2>
+
       <p class="govuk-body">
         We’ve sent your application to Hackney Electoral Register Office.
       </p>
       <p class="govuk-body">
         They will contact you either to confirm your registration, or to ask for more information.
       </p>
+
       <p class="govuk-body">
         <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
       </p>
@@ -1311,7 +1321,7 @@ 
    How it works
    
   </div>    
 {% endblock %}
    -

    + diff --git a/deploy/public/patterns/contact-a-department-or-service-team/index.html b/deploy/public/patterns/contact-a-department-or-service-team/index.html index 178b72bb12..b3cb92cc22 100644 --- a/deploy/public/patterns/contact-a-department-or-service-team/index.html +++ b/deploy/public/patterns/contact-a-department-or-service-team/index.html @@ -1144,24 +1144,24 @@

    Open this - -
    <span class="govuk-visually-hidden">contact a department or service team</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Contact a department or service team example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/contact-a-department-or-service-team/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#contact-a-department-or-service-team-example-html" role="tab" aria-controls="contact-a-department-or-service-team-example-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#contact-a-department-or-service-team-example-html" aria-controls="contact-a-department-or-service-team-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="contact-a-department-or-service-team-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Get help with your application<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
    -

    <ul class="govuk-list"> + + contact a department or service team + example in a new tab + +

    + + + +
    HTML
    +
    +
    + 
    <h2 class="govuk-heading-m">Get help with your application</h2>
+
+<ul class="govuk-list">
   <li>Telephone: 020 7946 0101</li>
   <li>Monday to Friday, 9am to 5pm (except public holidays)</li>
 </ul>
@@ -1169,7 +1169,7 @@ 
    
   <a class="govuk-link" href="#">Find out about call charges</a>
 </p>
    -

    + @@ -1183,26 +1183,28 @@

    How it works

    Open this - -
    <span class="govuk-visually-hidden">all contact information</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="All contact information example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/contact-a-department-or-service-team/all-contact-information/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#all-contact-information-example-html" role="tab" aria-controls="all-contact-information-example-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#all-contact-information-example-html" aria-controls="all-contact-information-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="all-contact-information-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Get help with your application<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
    -

    <h3 class="govuk-heading-s">Telephone</h3>

    -

    <p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>

    -

    <ul class="govuk-list"> + + all contact information + example in a new tab + +

    + + + +
    HTML
    +
    +
    + 
    <h2 class="govuk-heading-m">Get help with your application</h2>
+
+<h3 class="govuk-heading-s">Telephone</h3>
+
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+
+<ul class="govuk-list">
   <li>Telephone: 020 7946 0101</li>
   <li>Textphone: 020 7946 0102</li>
   <li>Monday to Friday, 8am to 6pm</li>
@@ -1212,30 +1214,39 @@ 
    How it works
    
 </ul>
 <p class="govuk-body">
   <a class="govuk-link" href="#">Find out about call charges</a>
-</p>
    
-
    <h3 class="govuk-heading-s">Email</h3>
    
-
    <ul class="govuk-list">
-  <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+
+<h3 class="govuk-heading-s">Email</h3>
+
+<ul class="govuk-list">
+  <li><a class="govuk-link" href="#">name@example.com</a></li>
   <li>We aim to respond within 2 working days</li>
-</ul>
    
-
    <h3 class="govuk-heading-s">Webchat</h3>
    
-
    <ul class="govuk-list">
+</ul>
+
+<h3 class="govuk-heading-s">Webchat</h3>
+
+<ul class="govuk-list">
   <li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
   <li>Current waiting time is 17 minutes</li>
-</ul>
    
-
    <h3 class="govuk-heading-s">Address</h3>
    
-
    <p class="govuk-body">
+</ul>
+
+<h3 class="govuk-heading-s">Address</h3>
+
+<p class="govuk-body">
   49 to 53 Cherry Street<br>
   London<br>
   AB1 2DC
-</p>
    
-
    <h3 class="govuk-heading-s">Social media</h3>
    
-
    <p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
    
-
    <p class="govuk-body">
+</p>
+
+<h3 class="govuk-heading-s">Social media</h3>
+
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+
+<p class="govuk-body">
   Twitter: @GOVUK
 </p>
    -

    + @@ -1250,7 +1261,7 @@

    Social media

  • do not include a link to the social media sites you’re using - read more about this in GOV.UK’s external linking policy
  • tell users not to share personal information with you
    • -

    Write telephone numbers in the GOV.UK style

    +

    Write telephone numbers in the GOV.UK style

    See the GOV.UK style for writing telephone numbers.

    Explain any charges

    Tell users if they might have to pay to use any of your contact channels.

    @@ -1260,24 +1271,24 @@

    Explain any charges

    Open this - -
    <span class="govuk-visually-hidden">contact a department or service team second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Contact a department or service team second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/contact-a-department-or-service-team/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#contact-a-department-or-service-team-second-example-html" role="tab" aria-controls="contact-a-department-or-service-team-second-example-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#contact-a-department-or-service-team-second-example-html" aria-controls="contact-a-department-or-service-team-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="contact-a-department-or-service-team-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>Get help with your application<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
    -

    <ul class="govuk-list"> + + contact a department or service team second + example in a new tab + +

    + + + +
    HTML
    +
    +
    + 
    <h2 class="govuk-heading-m">Get help with your application</h2>
+
+<ul class="govuk-list">
   <li>Telephone: 020 7946 0101</li>
   <li>Monday to Friday, 9am to 5pm (except public holidays)</li>
 </ul>
@@ -1285,7 +1296,7 @@ 
    Explain any charges
    
   <a class="govuk-link" href="#">Find out about call charges</a>
 </p>
    -

    + @@ -1294,7 +1305,7 @@

    Give opening hours

    Follow the GOV.UK style guide format for time ranges and date ranges.

    Explain any exceptions, like bank holidays, or days of the week when your opening hours are different.

    For example, ‘Monday to Friday, 9am to midday and 2pm to 4:30pm (closed on bank holidays)’ or ‘24-hour service’.

    -

    Tell users how long they’ll have to wait

    +

    Tell users how long they’ll have to wait

    Tell users when you’ll respond to them. This helps users choose which contact channel to use.

    For example, tell users how long it’ll usually take to:

    -

    Questions we’d like to answer through research

    +

    Questions we’d like to answer through research

    For one-off services, we’ve suggested placing the equality and diversity questions between the ‘check your answers’ and confirmation pages.

    This is based on where the ‘Do you want to create an account?’ question is placed in the ‘Get support if you’re clinically extremely vulnerable to coronavirus’ service - but we’d like to confirm whether this placement works for the equality questions too.

    We’d also appreciate any the following questions:

    diff --git a/deploy/public/patterns/names/index.html b/deploy/public/patterns/names/index.html index 5c1cfcf037..a65b1defc3 100644 --- a/deploy/public/patterns/names/index.html +++ b/deploy/public/patterns/names/index.html @@ -1136,24 +1136,23 @@

    Open this - -
    <span class="govuk-visually-hidden">names</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Names example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/names/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-names-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#names-example-html" role="tab" aria-controls="names-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#names-example-nunjucks" role="tab" aria-controls="names-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#names-example-html" aria-controls="names-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="names-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="full-name"> + + names + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="full-name">
     Full name
   </label>
   <input class="govuk-input" id="full-name" name="full-name" type="text" spellcheck="false" autocomplete="name">
@@ -1163,6 +1162,7 @@ 
    
       
    Nunjucks
    
     
          
    
         
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Full name"
@@ -1173,7 +1173,7 @@ 
    
   spellcheck: false
 }) }}
    
       
    
-    
    
+
    @@ -1188,24 +1188,23 @@

    How it works

    Open this - -
    <span class="govuk-visually-hidden">names second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Names second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/names/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-names-second-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#names-second-example-open-html" role="tab" aria-controls="names-second-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#names-second-example-open-nunjucks" role="tab" aria-controls="names-second-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#names-second-example-open-html" aria-controls="names-second-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="names-second-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="full-name"> + + names second + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="full-name">
     Full name
   </label>
   <input class="govuk-input" id="full-name" name="full-name" type="text" spellcheck="false" autocomplete="name">
@@ -1215,6 +1214,7 @@ 
    How it works
    
       
    Nunjucks
    
     
          
    
         
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Full name"
@@ -1225,7 +1225,7 @@ 
    How it works
    
   spellcheck: false
 }) }}
    
       
    
-    
    
+
    @@ -1270,7 +1270,7 @@

    Use the autocomplete attr

    If you are working in production you’ll need to do this to meet WCAG 2.1 Level AA.

    You will not normally need to use the autocomplete attribute in prototypes, as users will not generally be using their own devices.

    -

    Do not spellcheck user’s names

    +

    Do not spellcheck user’s names

    Sometimes, browsers will spellcheck the information a user enters into a text input. To make sure user’s names will not be spellchecked, set the spellcheck attribute to false as shown in this example.

    @@ -1292,6 +1292,7 @@

    Do not spellcheck user’s names

    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Full name"
@@ -1307,7 +1308,7 @@ 
    Do not spellcheck user’s names
    
 
 
 
-
    Avoid asking for a person’s title
    
+
    Avoid asking for a person’s title
    
 
    Avoid asking users for their title.
    
 
    It’s extra work for them and you’re asking them to potentially reveal their gender and marital status, which they may not want to do.
    
 
    It’s also hard to predict the range of titles your users will have. If you have to ask for someone’s title, use an optional text input not a select.
    
@@ -1324,36 +1325,36 @@ 
    Error messages
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">name input with errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Name input with errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/names/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-name-input-with-errors-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#name-input-with-errors-example-open-html" role="tab" aria-controls="name-input-with-errors-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#name-input-with-errors-example-open-nunjucks" role="tab" aria-controls="name-input-with-errors-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#name-input-with-errors-example-open-html" aria-controls="name-input-with-errors-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="name-input-with-errors-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
    
-
      <label class="govuk-label" for="full-name">
+
+          name input with errors
+          example in a new tab
+        
+      
    
+      
+
    + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="full-name">
     Full name
   </label>
   <p id="full-name-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter your full name
   </p>
-  <input class="govuk-input govuk-input–error" id="full-name" name="full-name" type="text" spellcheck="false" aria-describedby="full-name-error" autocomplete="name">
+  <input class="govuk-input govuk-input--error" id="full-name" name="full-name" type="text" spellcheck="false" aria-describedby="full-name-error" autocomplete="name">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Full name"
@@ -1367,7 +1368,7 @@ 
    Error messages
    
   spellcheck: false
 }) }}
    -

    +
    diff --git a/deploy/public/patterns/national-insurance-numbers/index.html b/deploy/public/patterns/national-insurance-numbers/index.html index c2355ed79e..25952d7871 100644 --- a/deploy/public/patterns/national-insurance-numbers/index.html +++ b/deploy/public/patterns/national-insurance-numbers/index.html @@ -1138,36 +1138,36 @@

    Open this - -
    <span class="govuk-visually-hidden">national insurance numbers</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="National Insurance numbers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/national-insurance-numbers/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-national-insurance-numbers-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-example-html" role="tab" aria-controls="national-insurance-numbers-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-example-nunjucks" role="tab" aria-controls="national-insurance-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#national-insurance-numbers-example-html" aria-controls="national-insurance-numbers-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="national-insurance-numbers-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="national-insurance-number"> + + national insurance numbers + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="national-insurance-number">
     National Insurance number
   </label>
   <div id="national-insurance-number-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-  <input class="govuk-input govuk-input–width-10" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" aria-describedby="national-insurance-number-hint">
+  <input class="govuk-input govuk-input--width-10" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" aria-describedby="national-insurance-number-hint">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "National Insurance number"
@@ -1181,7 +1181,7 @@ 
    
   spellcheck: false
 }) }}
    -

    + @@ -1207,36 +1207,36 @@

    How it works

    Open this - -
    <span class="govuk-visually-hidden">national insurance numbers second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="National Insurance numbers second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/national-insurance-numbers/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-national-insurance-numbers-second-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-second-example-open-html" role="tab" aria-controls="national-insurance-numbers-second-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-numbers-second-example-open-nunjucks" role="tab" aria-controls="national-insurance-numbers-second-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#national-insurance-numbers-second-example-open-html" aria-controls="national-insurance-numbers-second-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="national-insurance-numbers-second-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="national-insurance-number"> + + national insurance numbers second + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="national-insurance-number">
     National Insurance number
   </label>
   <div id="national-insurance-number-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-  <input class="govuk-input govuk-input–width-10" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" aria-describedby="national-insurance-number-hint">
+  <input class="govuk-input govuk-input--width-10" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" aria-describedby="national-insurance-number-hint">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "National Insurance number"
@@ -1250,7 +1250,7 @@ 
    How it works
    
   spellcheck: false
 }) }}
    -

    + @@ -1262,24 +1262,23 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">national insurance number input with errors</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="National insurance number input with errors example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/national-insurance-numbers/error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-national-insurance-number-input-with-errors-example-open"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-number-input-with-errors-example-open-html" role="tab" aria-controls="national-insurance-number-input-with-errors-example-open-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#national-insurance-number-input-with-errors-example-open-nunjucks" role="tab" aria-controls="national-insurance-number-input-with-errors-example-open-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#national-insurance-number-input-with-errors-example-open-html" aria-controls="national-insurance-number-input-with-errors-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="national-insurance-number-input-with-errors-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="national-insurance-number"> + + national insurance number input with errors + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="national-insurance-number">
     National Insurance number
   </label>
   <div id="national-insurance-number-hint" class="govuk-hint">
@@ -1288,13 +1287,14 @@ 
    Error messages
    
   <p id="national-insurance-number-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a National Insurance number in the correct format
   </p>
-  <input class="govuk-input govuk-input–width-10 govuk-input–error" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" value="12345678" aria-describedby="national-insurance-number-hint national-insurance-number-error">
+  <input class="govuk-input govuk-input--width-10 govuk-input--error" id="national-insurance-number" name="national-insurance-number" type="text" spellcheck="false" value="12345678" aria-describedby="national-insurance-number-hint national-insurance-number-error">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "National Insurance number"
@@ -1312,7 +1312,7 @@ 
    Error messages
    
   spellcheck: false
 }) }}
    -

    + diff --git a/deploy/public/patterns/page-not-found-pages/index.html b/deploy/public/patterns/page-not-found-pages/index.html index 2087f52a39..c54b6f4bc1 100644 --- a/deploy/public/patterns/page-not-found-pages/index.html +++ b/deploy/public/patterns/page-not-found-pages/index.html @@ -1144,24 +1144,23 @@

    Open this - -
    <span class="govuk-visually-hidden">page not found pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Page not found pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/page-not-found-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-page-not-found-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-example-html" role="tab" aria-controls="page-not-found-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-example-nunjucks" role="tab" aria-controls="page-not-found-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#page-not-found-pages-example-html" aria-controls="page-not-found-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="page-not-found-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + page not found pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Page not found</h1>
@@ -1183,6 +1182,7 @@ 
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1200,7 +1200,7 @@ 
    
   </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1239,24 +1239,23 @@

    How it works

    Open this - -
    <span class="govuk-visually-hidden">page not found pages second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Page not found pages second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/page-not-found-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-page-not-found-pages-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-second-example-html" role="tab" aria-controls="page-not-found-pages-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#page-not-found-pages-second-example-nunjucks" role="tab" aria-controls="page-not-found-pages-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#page-not-found-pages-second-example-html" aria-controls="page-not-found-pages-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="page-not-found-pages-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + page not found pages second + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Page not found</h1>
@@ -1278,6 +1277,7 @@ 
    How it works
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1295,7 +1295,7 @@ 
    How it works
    
   </div>
 {% endblock %}
    
       
    
-    
    
+
    diff --git a/deploy/public/patterns/problem-with-the-service-pages/index.html b/deploy/public/patterns/problem-with-the-service-pages/index.html index 686f52f03e..1a286a95d3 100644 --- a/deploy/public/patterns/problem-with-the-service-pages/index.html +++ b/deploy/public/patterns/problem-with-the-service-pages/index.html @@ -1145,24 +1145,23 @@

    Open this - -
    <span class="govuk-visually-hidden">service has a specific page that includes numbers and opening times</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Service has a specific page that includes numbers and opening times example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/problem-with-the-service-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-service-has-a-specific-page-that-includes-numbers-and-opening-times-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-example-html" role="tab" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-example-nunjucks" role="tab" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-example-html" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="service-has-a-specific-page-that-includes-numbers-and-opening-times-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + service has a specific page that includes numbers and opening times + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1180,6 +1179,7 @@ 
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1193,7 +1193,7 @@ 
    
   </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1230,24 +1230,23 @@

    Ser
    Open this - -
    <span class="govuk-visually-hidden">service has a specific page that includes numbers and opening times second</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Service has a specific page that includes numbers and opening times second example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/problem-with-the-service-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-html" role="tab" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-nunjucks" role="tab" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-html" aria-controls="service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="service-has-a-specific-page-that-includes-numbers-and-opening-times-second-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + service has a specific page that includes numbers and opening times second + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1265,6 +1264,7 @@ 
    Ser
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1278,7 +1278,7 @@ 
    Ser
   </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1289,24 +1289,23 @@

    Open this - -
    <span class="govuk-visually-hidden">service has offline support but no specific page that includes numbers and opening times</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Service has offline support but no specific page that includes numbers and opening times example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/problem-with-the-service-pages/offline-support/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-html" role="tab" aria-controls="service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-nunjucks" role="tab" aria-controls="service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-html" aria-controls="service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="service-has-offline-support-but-no-specific-page-that-includes-numbers-and-opening-times-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + service has offline support but no specific page that includes numbers and opening times + example in a new tab + + + + + +

    +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1345,6 +1344,7 @@ 
    Nunjucks
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1379,7 +1379,7 @@ 
    A link to another service
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">a link to another service – there is a problem with the service pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="A link to another service – There is a problem with the service pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/problem-with-the-service-pages/link-to-another-service/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-a-link-to-another-service-there-is-a-problem-with-the-service-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-html" role="tab" aria-controls="a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-nunjucks" role="tab" aria-controls="a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-html" aria-controls="a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="a-link-to-another-service-there-is-a-problem-with-the-service-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main">
+
+          a link to another service – there is a problem with the service pages
+          example in a new tab
+        
+      
    
+      
+
    + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1427,6 +1426,7 @@ 
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1442,7 +1442,7 @@ 
   </div>
 {% endblock %}
    
       
    
-    
    
+
    diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html index e9cadbd272..24d007cf60 100644 --- a/deploy/public/patterns/question-pages/index.html +++ b/deploy/public/patterns/question-pages/index.html @@ -1137,73 +1137,73 @@

    Open this - -
    <span class="govuk-visually-hidden">question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#question-pages-example-html" role="tab" aria-controls="question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#question-pages-example-nunjucks" role="tab" aria-controls="question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#question-pages-example-html" aria-controls="question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + question pages + example in a new tab + +

    + +

    + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <form action="/form-handler" method="post" novalidate>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__legend govuk-fieldset__legend--l&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__heading&quot;</span>&gt;</span>
-              Where do you live?
-            <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-radios&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;england&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span>&gt;</span>
-                England
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;where-do-you-live-2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;scotland&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;where-do-you-live-2&quot;</span>&gt;</span>
-                Scotland
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;where-do-you-live-3&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;wales&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;where-do-you-live-3&quot;</span>&gt;</span>
-                Wales
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;where-do-you-live-4&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;where-do-you-live&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;northern-ireland&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;where-do-you-live-4&quot;</span>&gt;</span>
-                Northern Ireland
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+        <form action="/form-handler" method="post" novalidate>
+
+          <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset">
+              <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+                <h1 class="govuk-fieldset__heading">
+                  Where do you live?
+                </h1>
+              </legend>
+              <div class="govuk-radios" data-module="govuk-radios">
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
+                  <label class="govuk-label govuk-radios__label" for="where-do-you-live">
+                    England
+                  </label>
+                </div>
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
+                  <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
+                    Scotland
+                  </label>
+                </div>
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
+                  <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
+                    Wales
+                  </label>
+                </div>
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
+                  <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
+                    Northern Ireland
+                  </label>
+                </div>
+              </div>
+
+            </fieldset>
+          </div>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1212,15 +1212,18 @@ 

    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
       <form action="/form-handler" method="post" novalidate>
+
         {{ govukRadios({
           idPrefix: "where-do-you-live",
           name: "where-do-you-live",
@@ -1250,6 +1253,7 @@ 
    
             }
           ]
         }) }}
+
         {{ govukButton({
           text: "Continue"
         }) }}
@@ -1258,7 +1262,7 @@ 
    
   </div>
 {% endblock %}

    -

    + @@ -1304,76 +1308,76 @@

    Start by asking one question per
    Open this - -
    <span class="govuk-visually-hidden">date of birth – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Date of birth – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/date-of-birth/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-date-of-birth-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-of-birth-question-pages-example-html" role="tab" aria-controls="date-of-birth-question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#date-of-birth-question-pages-example-nunjucks" role="tab" aria-controls="date-of-birth-question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#date-of-birth-question-pages-example-html" aria-controls="date-of-birth-question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="date-of-birth-question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + date of birth – question pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <form action="/form-handler" method="post" novalidate>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">&quot;dob-hint&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__legend govuk-fieldset__legend--l&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__heading&quot;</span>&gt;</span>
-              What is your date of birth?
-            <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dob-hint&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-hint&quot;</span>&gt;</span>
-            For example, 31 3 1980
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dob&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;dob-day&quot;</span>&gt;</span>
-                  Day
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dob-day&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dob-day&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;bday-day&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;dob-month&quot;</span>&gt;</span>
-                  Month
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dob-month&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dob-month&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;bday-month&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;dob-year&quot;</span>&gt;</span>
-                  Year
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-4&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dob-year&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;dob-year&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;bday-year&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+        <form action="/form-handler" method="post" novalidate>
+
+          <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
+              <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+                <h1 class="govuk-fieldset__heading">
+                  What is your date of birth?
+                </h1>
+              </legend>
+              <div id="dob-hint" class="govuk-hint">
+                For example, 31 3 1980
+              </div>
+              <div class="govuk-date-input" id="dob">
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="dob-day">
+                      Day
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
+                  </div>
+                </div>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="dob-month">
+                      Month
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
+                  </div>
+                </div>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="dob-year">
+                      Year
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
+                  </div>
+                </div>
+              </div>
+
+            </fieldset>
+          </div>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1382,11 +1386,13 @@

    Start by asking one question per 
    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1422,6 +1428,7 @@ 
    Start by asking one question per
             }
           ]
         }) }}
+
         {{ govukButton({
           text: "Continue"
         }) }}
@@ -1430,7 +1437,7 @@ 
    Start by asking one question per
   </div>
 {% endblock %}
    -

    + @@ -1441,43 +1448,43 @@

    Start by asking one question per
    Open this - -
    <span class="govuk-visually-hidden">postcode – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Postcode – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/postcode/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-postcode-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#postcode-question-pages-example-html" role="tab" aria-controls="postcode-question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#postcode-question-pages-example-nunjucks" role="tab" aria-controls="postcode-question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#postcode-question-pages-example-html" aria-controls="postcode-question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="postcode-question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + postcode – question pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <form action="/form-handler" method="post" novalidate>
           <div class="govuk-form-group">
-            <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
+            <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
                 What is your home postcode?
               </label>
             </h1>
-            <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
-          </div>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+            <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+          </div>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1486,11 +1493,13 @@

    Start by asking one question per 
    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1506,6 +1515,7 @@ 
    Start by asking one question per
         name: "postcode",
         autocomplete: "postal-code"
       }) }}
+
       {{ govukButton({
         text: "Continue"
       }) }}
@@ -1514,7 +1524,7 @@ 
    Start by asking one question per
 </div>
 {% endblock %}
    -

    + @@ -1528,22 +1538,21 @@

    Start by asking one question per
    Open this - -
    <span class="govuk-visually-hidden">section headings – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Section headings – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/section-headings/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<div class="app-tabs__container js-tabs__container js-tabs__container--no-tabs" id="section-headings-question-pages-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-caption-l&quot;</span>&gt;</span>About you<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-
    -

    <h1 class="govuk-heading-l"> + + section headings – question pages + example in a new tab + +

    + + +
    +
    + 
    <span class="govuk-caption-l">About you</span>
+<h1 class="govuk-heading-l">
   What is your home address?
 </h1>
    -

    + @@ -1563,80 +1572,80 @@

    Asking complex questio
    Open this - -
    <span class="govuk-visually-hidden">explanatory text – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Explanatory text – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/explanatory-text/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-explanatory-text-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#explanatory-text-question-pages-example-html" role="tab" aria-controls="explanatory-text-question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#explanatory-text-question-pages-example-nunjucks" role="tab" aria-controls="explanatory-text-question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#explanatory-text-question-pages-example-html" aria-controls="explanatory-text-question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="explanatory-text-question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + explanatory text – question pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>
-      Interview needs
-    <span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span>&gt;</span>health condition or disability<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      However, if you need flexibility for other reasons you can tell us about it here.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      For example, you have commitments like caring responsibilites or employment.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>
-      Contact your provider if you’re concerned about the interview process.
-    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__legend govuk-fieldset__legend--m&quot;</span>&gt;</span>
-            Do you have any interview needs?
-          <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-radios&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;interview-needs&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;interview-needs&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;yes&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;interview-needs&quot;</span>&gt;</span>
-                Yes
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-radios__input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;interview-needs-2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;interview-needs&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;no&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-radios__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;interview-needs-2&quot;</span>&gt;</span>
-                No
-              <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+      <div class="govuk-grid-column-two-thirds">
+
+        <h1 class="govuk-heading-l">
+          Interview needs
+        </h1>
+
+        <p class="govuk-body">
+          Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
+        </p>
+
+        <p class="govuk-body">
+          However, if you need flexibility for other reasons you can tell us about it here.
+        </p>
+
+        <p class="govuk-body">
+          For example, you have commitments like caring responsibilites or employment.
+        </p>
+
+        <p class="govuk-body">
+          Contact your provider if you’re concerned about the interview process.
+        </p>
+
+        <form action="/form-handler" method="post" novalidate>
+
+          <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset">
+              <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+                Do you have any interview needs?
+              </legend>
+              <div class="govuk-radios" data-module="govuk-radios">
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
+                  <label class="govuk-label govuk-radios__label" for="interview-needs">
+                    Yes
+                  </label>
+                </div>
+                <div class="govuk-radios__item">
+                  <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
+                  <label class="govuk-label govuk-radios__label" for="interview-needs-2">
+                    No
+                  </label>
+                </div>
+              </div>
+
+            </fieldset>
+          </div>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1645,30 +1654,39 @@

    Asking complex questio 
    {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+
 {% block beforeContent %}
   {{ govukBackLink({
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
+
       <h1 class="govuk-heading-l">
         Interview needs
       </h1>
+
       <p class="govuk-body">
         Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
       </p>
+
       <p class="govuk-body">
         However, if you need flexibility for other reasons you can tell us about it here.
       </p>
+
       <p class="govuk-body">
         For example, you have commitments like caring responsibilites or employment.
       </p>
+
       <p class="govuk-body">
         Contact your provider if you’re concerned about the interview process.
       </p>
+
       <form action="/form-handler" method="post" novalidate>
+
         {{ govukRadios({
           idPrefix: "interview-needs",
           name: "interview-needs",
@@ -1690,6 +1708,7 @@ 
    Asking complex questio
             }
           ]
         }) }}
+
         {{ govukButton({
           text: "Continue"
         }) }}
@@ -1698,7 +1717,7 @@ 
    Asking complex questio
   </div>
 {% endblock %}
    -

    + @@ -1713,87 +1732,87 @@

    Asking multiple questions on a page
    Open this - -
    <span class="govuk-visually-hidden">passport – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Passport – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/passport/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-passport-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#passport-question-pages-example-html" role="tab" aria-controls="passport-question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#passport-question-pages-example-nunjucks" role="tab" aria-controls="passport-question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#passport-question-pages-example-html" aria-controls="passport-question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="passport-question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <a href="#" class="govuk-back-link">Back</a>

    -

    <main class="govuk-main-wrapper " id="main-content" role="main"> + + passport – question pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper " id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
-        <h1 class="govuk-heading-l">Passport details</h1>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-label--m&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;passport-number&quot;</span>&gt;</span>
-          Passport number
-        <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-number-hint&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-hint&quot;</span>&gt;</span>
-          For example, 502135326
-        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-input--width-10&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;passport-number&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;passport-number&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">&quot;passport-number-hint&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;group&quot;</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">&quot;expiry-hint&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-fieldset__legend govuk-fieldset__legend--m&quot;</span>&gt;</span>
-            Expiry date
-          <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;expiry-hint&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-hint&quot;</span>&gt;</span>
-            For example, 31 3 1980
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;expiry&quot;</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;expiry-day&quot;</span>&gt;</span>
-                  Day
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;expiry-day&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;expiry-day&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;expiry-month&quot;</span>&gt;</span>
-                  Month
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-2&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;expiry-month&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;expiry-month&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-date-input__item&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-label govuk-date-input__label&quot;</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;expiry-year&quot;</span>&gt;</span>
-                  Year
-                <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
-                <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-input govuk-date-input__input govuk-input--width-4&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;expiry-year&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;expiry-year&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">&quot;numeric&quot;</span>&gt;</span>
-              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-          <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-        <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-        Continue
-      <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-
-    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+        <h1 class="govuk-heading-l">Passport details</h1>
+
+        <form action="/form-handler" method="post" novalidate>
+
+          <div class="govuk-form-group">
+            <label class="govuk-label govuk-label--m" for="passport-number">
+              Passport number
+            </label>
+            <div id="passport-number-hint" class="govuk-hint">
+              For example, 502135326
+            </div>
+            <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
+          </div>
+
+          <div class="govuk-form-group">
+            <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
+              <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+                Expiry date
+              </legend>
+              <div id="expiry-hint" class="govuk-hint">
+                For example, 31 3 1980
+              </div>
+              <div class="govuk-date-input" id="expiry">
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="expiry-day">
+                      Day
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
+                  </div>
+                </div>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="expiry-month">
+                      Month
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
+                  </div>
+                </div>
+                <div class="govuk-date-input__item">
+                  <div class="govuk-form-group">
+                    <label class="govuk-label govuk-date-input__label" for="expiry-year">
+                      Year
+                    </label>
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
+                  </div>
+                </div>
+              </div>
+
+            </fieldset>
+          </div>
+
+          <button class="govuk-button" data-module="govuk-button">
+            Continue
+          </button>
+
+        </form>
+      </div>
+    </div>
+  </main>
 </div>
    @@ -1803,16 +1822,20 @@

    Asking multiple questions on a page {% from "govuk/components/input/macro.njk" import govukInput %} {% from "govuk/components/date-input/macro.njk" import govukDateInput %} {% from "govuk/components/button/macro.njk" import govukButton %} + {% block beforeContent %} {{ govukBackLink({ text: "Back" }) }} {% endblock %} + {% block content %} <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds"> <h1 class="govuk-heading-l">Passport details</h1> + <form action="/form-handler" method="post" novalidate> + {{ govukInput({ label: { text: "Passport number", @@ -1825,6 +1848,7 @@

    Asking multiple questions on a page id: "passport-number", name: "passport-number" }) }} + {{ govukDateInput({ id: "expiry", namePrefix: "expiry", @@ -1838,15 +1862,17 @@

    Asking multiple questions on a page text: "For example, 31 3 1980" } }) }} + {{ govukButton({ text: "Continue" }) }} + </form> </div> </div> {% endblock %} -

    + @@ -1865,24 +1891,23 @@

    Using progress indicators

    Open this - -
    <span class="govuk-visually-hidden">progress indicator – question pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Progress indicator – Question pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/question-pages/progress/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-progress-indicator-question-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#progress-indicator-question-pages-example-html" role="tab" aria-controls="progress-indicator-question-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#progress-indicator-question-pages-example-nunjucks" role="tab" aria-controls="progress-indicator-question-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#progress-indicator-question-pages-example-html" aria-controls="progress-indicator-question-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="progress-indicator-question-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-caption-l&quot;</span>&gt;</span>Question 3 of 9<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-
    -

    <h1 class="govuk-heading-l"> + + progress indicator – question pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <span class="govuk-caption-l">Question 3 of 9</span>
+<h1 class="govuk-heading-l">
   Your details
 </h1>
    @@ -1894,7 +1919,7 @@

    Using progress indicators

    Your details </h1>
    -

    + diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html index 97de234117..39038a1033 100644 --- a/deploy/public/patterns/service-unavailable-pages/index.html +++ b/deploy/public/patterns/service-unavailable-pages/index.html @@ -1145,24 +1145,23 @@

    Open this - -
    <span class="govuk-visually-hidden">service unavailable</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Service unavailable example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-service-unavailable-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-unavailable-example-html" role="tab" aria-controls="service-unavailable-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#service-unavailable-example-nunjucks" role="tab" aria-controls="service-unavailable-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#service-unavailable-example-html" aria-controls="service-unavailable-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="service-unavailable-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + service unavailable + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1181,6 +1180,7 @@ 
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1195,7 +1195,7 @@ 
    
   </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1231,24 +1231,23 @@

    General page

    Open this - -
    <span class="govuk-visually-hidden">general page</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="General page example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/general/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-general-page-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#general-page-example-html" role="tab" aria-controls="general-page-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#general-page-example-nunjucks" role="tab" aria-controls="general-page-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#general-page-example-html" aria-controls="general-page-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="general-page-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + general page + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1270,6 +1269,7 @@ 
    General page
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -1287,7 +1287,7 @@ 
    General page
    
   </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1298,24 +1298,23 @@

    When you know when a ser
    Open this - -
    <span class="govuk-visually-hidden">when you know when a service will be available</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="When you know when a service will be available example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/available-at-known-date/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-when-you-know-when-a-service-will-be-available-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#when-you-know-when-a-service-will-be-available-example-html" role="tab" aria-controls="when-you-know-when-a-service-will-be-available-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#when-you-know-when-a-service-will-be-available-example-nunjucks" role="tab" aria-controls="when-you-know-when-a-service-will-be-available-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#when-you-know-when-a-service-will-be-available-example-html" aria-controls="when-you-know-when-a-service-will-be-available-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="when-you-know-when-a-service-will-be-available-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + when you know when a service will be available + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1337,6 +1336,7 @@ 
    When you know when a ser
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1354,7 +1354,7 @@ 
    When you know when a ser
 </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1365,24 +1365,23 @@
    Open this - -
    <span class="govuk-visually-hidden">a link to another service – service unavailable pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="A link to another service – Service unavailable pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/link-to-another-service/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-a-link-to-another-service-service-unavailable-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-service-unavailable-pages-example-html" role="tab" aria-controls="a-link-to-another-service-service-unavailable-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-service-unavailable-pages-example-nunjucks" role="tab" aria-controls="a-link-to-another-service-service-unavailable-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#a-link-to-another-service-service-unavailable-pages-example-html" aria-controls="a-link-to-another-service-service-unavailable-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="a-link-to-another-service-service-unavailable-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + a link to another service – service unavailable pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1404,6 +1403,7 @@ 
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1421,7 +1421,7 @@ 
 </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1434,24 +1434,23 @@

    After a service closes

    Open this - -
    <span class="govuk-visually-hidden">after a service closes</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="After a service closes example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/after-service-closes/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-after-a-service-closes-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#after-a-service-closes-example-html" role="tab" aria-controls="after-a-service-closes-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#after-a-service-closes-example-nunjucks" role="tab" aria-controls="after-a-service-closes-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#after-a-service-closes-example-html" aria-controls="after-a-service-closes-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="after-a-service-closes-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + after a service closes + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1464,7 +1463,7 @@ 
    After a service closes
    
         <p class="govuk-body">
           You can use the tax credits service to:
         </p>
-        <ul class="govuk-list govuk-list–bullet">
+        <ul class="govuk-list govuk-list--bullet">
           <li>find out more about your payments</li>
           <li>see who is on your claim</li>
           <li>make changes to your claim</li>
@@ -1479,6 +1478,7 @@ 
    After a service closes
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1502,7 +1502,7 @@ 
    After a service closes
    
 </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1514,24 +1514,23 @@

    Before a service opens

    Open this - -
    <span class="govuk-visually-hidden">before a service opens</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Before a service opens example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/before-service-opens/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-before-a-service-opens-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#before-a-service-opens-example-html" role="tab" aria-controls="before-a-service-opens-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#before-a-service-opens-example-nunjucks" role="tab" aria-controls="before-a-service-opens-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#before-a-service-opens-example-html" aria-controls="before-a-service-opens-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="before-a-service-opens-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + before a service opens + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1544,7 +1543,7 @@ 
    Before a service opens
    
         <p class="govuk-body">
           You can <a class="govuk-link" href="#">use the tax credits service</a> to:
         </p>
-        <ul class="govuk-list govuk-list–bullet">
+        <ul class="govuk-list govuk-list--bullet">
           <li>find out more about your payments</li>
           <li>see who is on your claim</li>
           <li>make changes to your claim</li>
@@ -1558,6 +1557,7 @@ 
    Before a service opens
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1580,7 +1580,7 @@ 
    Before a service opens
    
 </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1592,24 +1592,23 @@

    Nothing has replaced the service

    Open this - -
    <span class="govuk-visually-hidden">nothing has replaced the service</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Nothing has replaced the service example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/no-replacement-service/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-nothing-has-replaced-the-service-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#nothing-has-replaced-the-service-example-html" role="tab" aria-controls="nothing-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#nothing-has-replaced-the-service-example-nunjucks" role="tab" aria-controls="nothing-has-replaced-the-service-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#nothing-has-replaced-the-service-example-html" aria-controls="nothing-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="nothing-has-replaced-the-service-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + nothing has replaced the service + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1634,6 +1633,7 @@ 
    Nothing has replaced the service
    
       
    Nunjucks
    
     
          
    
         
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1654,7 +1654,7 @@ 
    Nothing has replaced the service
    
 </div>
 {% endblock %}
    
       
    
-    
    
+
    @@ -1665,24 +1665,23 @@

    Something has replaced the service Open this - -
    <span class="govuk-visually-hidden">something has replaced the service</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Something has replaced the service example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/service-replaced/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-something-has-replaced-the-service-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#something-has-replaced-the-service-example-html" role="tab" aria-controls="something-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#something-has-replaced-the-service-example-nunjucks" role="tab" aria-controls="something-has-replaced-the-service-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#something-has-replaced-the-service-example-html" aria-controls="something-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="something-has-replaced-the-service-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    -

    <main class="govuk-main-wrapper govuk-main-wrapper–l" id="main-content" role="main"> + + something has replaced the service + example in a new tab + + + + + +

    +
    HTML
    +
    +
    + 
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l" id="main-content" role="main">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
         <h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1691,7 +1690,7 @@ 
    Something has replaced the service</a> if you need to speak to someone about your tax credits.
         </p>
         <p class="govuk-body">You can:</p>
-        <ul class="govuk-list govuk-list–bullet">
+        <ul class="govuk-list govuk-list--bullet">
           <li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
           <li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
           <li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1705,6 +1704,7 @@ 
    Something has replaced the serviceNunjucks
    {% set mainClasses = "govuk-main-wrapper--l" %}
+
 {% block content %}
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
@@ -1723,7 +1723,7 @@ 
    Something has replaced the service
    -

    +
    diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html index a75c3ef99c..2a118eac6a 100644 --- a/deploy/public/patterns/start-using-a-service/index.html +++ b/deploy/public/patterns/start-using-a-service/index.html @@ -1149,7 +1149,7 @@

    How it works

    Eligibility

    Avoid using the start point to provide complex eligibility information. Instead, ask questions inside the service to find out whether the user is eligible.

    Read guidance on designing how GOV.UK content and transactions work together.

    -

    Choosing a format for a start point on GOV.UK

    +

    Choosing a format for a start point on GOV.UK

    The options available depend on whether the start point will be published as ‘mainstream’ or ‘Whitehall’ content.

    Mainstream content is content aimed at the general public — or at meeting business needs that are not sector-specific.

    The content team at GDS is responsible for creating mainstream start points on GOV.UK, as with other mainstream content. They’ll work with you to make sure the journey from GOV.UK into the service works as well as possible. It’s a good idea to talk to your organisation’s content team during alpha — if necessary, they can put you in touch with the team at GDS.

    @@ -1169,7 +1169,7 @@

    Mainstream start points

    Creating a start point using Whitehall Publisher

    For non-mainstream services, publishers in departments with access to the ‘Whitehall’ app can create a simple start page using the ‘detailed guide’ format.

    Use this Markdown to create a button within a detailed guide:

    -
    {button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button}
+
    {button start}[Button text goes here](https://servicename.service.gov.uk/first-page-within-service){/button}
 
    
 
       
diff --git a/deploy/public/patterns/step-by-step-navigation/index.html b/deploy/public/patterns/step-by-step-navigation/index.html
index 1eaa7ec430..3662e3359c 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1163,10 +1163,10 @@ 
    How it works
    
 
    Step by step navigation is displayed in 2 ways.
    
 
      
 
    1. On the right hand sidebar of content pages that are part of the step by step navigation.
      
- A screenshot showing an example of the step by step as a sidebar
+A screenshot showing an example of the step by step as a sidebar
 
      2. 
 
    2. As a standalone page.
      
- A screenshot showing an example of the step by step navigation pattern
+A screenshot showing an example of the step by step navigation pattern
 
      3. 
 
    
 
    You can use the following examples in the GOV.UK Prototype Kit to prototype a step by step:
    
@@ -1198,7 +1198,7 @@ 
    Order steps according to user needs
 
    Steps and tasks should be listed in the order users need to complete them.
    
 
    If there is not a set order, they should be listed in an order that helps the user.
    
 
    For example, ‘Agree a contract and salary’ is listed as step 4 in ‘Employ someone: step by step’ although it can be completed earlier.
    
-
    Use both ‘and’ and ‘or’
    
+
    Use both ‘and’ and ‘or’
    
 
    Use ‘and’ to show when you can or must complete steps at the same time. You can use ‘and’ for more than 2 steps.
    
 
    Use ‘or’ to show when there’s a choice between 2 steps, or when a task must be completed in a different way based the user’s circumstances or eligibility.
    
 A screenshot showing an example of the step by step navigation pattern with an 'and' step
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 442f83d688..5b5ce99c20 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,26 +1207,26 @@ 
    Marking tasks as completed
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">have you completed this section – task list pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Have you completed this section – Task list pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/task-list-pages/have-you-completed-this-section/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-have-you-completed-this-section-task-list-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-task-list-pages-example-html" role="tab" aria-controls="have-you-completed-this-section-task-list-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-task-list-pages-example-nunjucks" role="tab" aria-controls="have-you-completed-this-section-task-list-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#have-you-completed-this-section-task-list-pages-example-html" aria-controls="have-you-completed-this-section-task-list-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="have-you-completed-this-section-task-list-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>
-
    
-
      <div class="govuk-form-group">
+
+          have you completed this section – task list pages
+          example in a new tab
+        
+      
    
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <form action="/form-handler" method="post" novalidate>
+
+  <div class="govuk-form-group">
     <fieldset class="govuk-fieldset">
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
         Have you completed this section?
       </legend>
       <div class="govuk-radios" data-module="govuk-radios">
@@ -1242,21 +1242,25 @@ 
    Marking tasks as completed
    
             No, I’ll come back to it later
           </label>
         </div>
-      </div>
    
-
    <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-
    
-
      </div>
    
-
      <button class="govuk-button" data-module="govuk-button">
+      </div>
+
+    </fieldset>
+  </div>
+
+  <button class="govuk-button" data-module="govuk-button">
     Continue
-  </button>
    
-
    </form>
    
+  </button>
+
+</form>
    Nunjucks
    {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
 <form action="/form-handler" method="post" novalidate>
+
   {{ govukRadios({
     idPrefix: "have-you-completed-this-section",
     name: "have-you-completed-this-section",
@@ -1278,12 +1282,14 @@ 
    Marking tasks as completed
    
       }
     ]
   }) }}
+
   {{ govukButton({
     text: "Continue"
   }) }}
+
 </form>
    -

    + @@ -1296,26 +1302,26 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">have you completed this section error – task list pages</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Have you completed this section error – Task list pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/task-list-pages/have-you-completed-this-section-error/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-have-you-completed-this-section-error-task-list-pages-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-error-task-list-pages-example-html" role="tab" aria-controls="have-you-completed-this-section-error-task-list-pages-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#have-you-completed-this-section-error-task-list-pages-example-nunjucks" role="tab" aria-controls="have-you-completed-this-section-error-task-list-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#have-you-completed-this-section-error-task-list-pages-example-html" aria-controls="have-you-completed-this-section-error-task-list-pages-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="have-you-completed-this-section-error-task-list-pages-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;/form-handler&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;post&quot;</span> <span class="hljs-attr">novalidate</span>&gt;</span>
-
    -

    <div class="govuk-form-group govuk-form-group–error"> + + have you completed this section error – task list pages + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <form action="/form-handler" method="post" novalidate>
+
+  <div class="govuk-form-group govuk-form-group--error">
     <fieldset class="govuk-fieldset" aria-describedby="have-you-completed-this-section-error-error">
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
         Have you completed this section?
       </legend>
       <p id="have-you-completed-this-section-error-error" class="govuk-error-message">
@@ -1334,21 +1340,25 @@ 
    Error messages
    
             No, I’ll come back to it later
           </label>
         </div>
-      </div>
    
-
    <span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
-
    
-
      </div>
    
-
      <button class="govuk-button" data-module="govuk-button">
+      </div>
+
+    </fieldset>
+  </div>
+
+  <button class="govuk-button" data-module="govuk-button">
     Continue
-  </button>
    
-
    </form>
    + </button> + +</form>
    Nunjucks
    {% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
+
 <form action="/form-handler" method="post" novalidate>
+
   {{ govukRadios({
     idPrefix: "have-you-completed-this-section-error",
     name: "have-you-completed-this-section-error",
@@ -1373,12 +1383,14 @@ 
    Error messages
    
       }
     ]
   }) }}
+
   {{ govukButton({
     text: "Continue"
   }) }}
+
 </form>
    -

    + diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html index d857c8495f..5bf341298b 100644 --- a/deploy/public/patterns/telephone-numbers/index.html +++ b/deploy/public/patterns/telephone-numbers/index.html @@ -1144,33 +1144,33 @@

    Open this - -
    <span class="govuk-visually-hidden">default – telephone numbers</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – Telephone numbers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/telephone-numbers/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-telephone-numbers-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-telephone-numbers-example-html" role="tab" aria-controls="default-telephone-numbers-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-telephone-numbers-example-nunjucks" role="tab" aria-controls="default-telephone-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-telephone-numbers-example-html" aria-controls="default-telephone-numbers-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-telephone-numbers-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="telephone-number"> + + default – telephone numbers + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="telephone-number">
     UK telephone number
   </label>
-  <input class="govuk-input govuk-input–width-20" id="telephone-number" name="telephone-number" type="tel" autocomplete="tel">
+  <input class="govuk-input govuk-input--width-20" id="telephone-number" name="telephone-number" type="tel" autocomplete="tel">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "UK telephone number"
@@ -1182,7 +1182,7 @@ 
    
   classes: "govuk-input--width-20"
 }) }}
    -

    + @@ -1206,36 +1206,36 @@

    Error messages

    Open this - -
    <span class="govuk-visually-hidden">error, empty field – telephone numbers</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Error, empty field – Telephone numbers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/telephone-numbers/error-empty-field/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-error-empty-field-telephone-numbers-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-empty-field-telephone-numbers-example-html" role="tab" aria-controls="error-empty-field-telephone-numbers-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#error-empty-field-telephone-numbers-example-nunjucks" role="tab" aria-controls="error-empty-field-telephone-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#error-empty-field-telephone-numbers-example-html" aria-controls="error-empty-field-telephone-numbers-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="error-empty-field-telephone-numbers-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group govuk-form-group--error&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="telephone-number"> + + error, empty field – telephone numbers + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group govuk-form-group--error">
+  <label class="govuk-label" for="telephone-number">
     UK telephone number
   </label>
   <p id="telephone-number-error" class="govuk-error-message">
     <span class="govuk-visually-hidden">Error:</span> Enter a UK telephone number
   </p>
-  <input class="govuk-input govuk-input–width-20 govuk-input–error" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-error" autocomplete="tel">
+  <input class="govuk-input govuk-input--width-20 govuk-input--error" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-error" autocomplete="tel">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "UK telephone number"
@@ -1250,7 +1250,7 @@ 
    Error messages
    
   classes: "govuk-input--width-20"
 }) }}
    -

    + @@ -1267,36 +1267,36 @@

    Make it clear what
    Open this - -
    <span class="govuk-visually-hidden">international – telephone numbers</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="International – Telephone numbers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/patterns/telephone-numbers/international/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-international-telephone-numbers-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#international-telephone-numbers-example-html" role="tab" aria-controls="international-telephone-numbers-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#international-telephone-numbers-example-nunjucks" role="tab" aria-controls="international-telephone-numbers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#international-telephone-numbers-example-html" aria-controls="international-telephone-numbers-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="international-telephone-numbers-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    -

    <label class="govuk-label" for="telephone-number"> + + international – telephone numbers + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <div class="govuk-form-group">
+  <label class="govuk-label" for="telephone-number">
     Telephone number
   </label>
   <div id="telephone-number-hint" class="govuk-hint">
     For international numbers include the country code
   </div>
-  <input class="govuk-input govuk-input–width-20" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-hint" autocomplete="tel">
+  <input class="govuk-input govuk-input--width-20" id="telephone-number" name="telephone-number" type="tel" aria-describedby="telephone-number-hint" autocomplete="tel">
 </div>
    Nunjucks
    {% from "govuk/components/input/macro.njk" import govukInput %}
+
 {{ govukInput({
   label: {
     text: "Telephone number"
@@ -1311,7 +1311,7 @@ 
    Make it clear what
   classes: "govuk-input--width-20"
 }) }}
    -

    + @@ -1327,13 +1327,13 @@

    Explain why you need a telephon

    Tell users why you might contact them and when.

    It’s possible to mark up telephone numbers as links, like this:

    -
    <a href="tel:+442079476330">020 7947 6330</a>
+
    <a href="tel:+442079476330">020 7947 6330</a>
 
    
 
    However, doing this will style telephone numbers as links, which is confusing on devices that do not support telephone calls.
    
 
    It might also not be necessary - some modern mobile browsers automatically detect telephone numbers and display them as links anyway.
    
 
    If you do need to mark up your telephone numbers as links, for example, to support a device that cannot automatically detect them, make sure they do not display as links on devices that cannot make calls.
    
 
    When you look at your service’s user journey, remember that telephone numbers as links might behave in unexpected ways for the user. For example, unless the user sets a default app to handle tel: links, some browsers and operating systems will automatically start a setup process.
    
-
    Write telephone numbers in the GOV.UK style
    
+
    Write telephone numbers in the GOV.UK style
    
 
    See the GOV.UK style for writing telephone numbers.
    
 
    Avoid input masking
    
 
    Avoid input masking because it makes it harder for users to:
    
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index 3a6b1a88d1..5d5eee87d0 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1023,213 +1023,212 @@ 
    Main colours
    
 use govuk-colour("red") rather than $govuk-error-colour.
    
 
-  
-
    <tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m ">
-    Text
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#0b0c0c"></span>
-      <code>$govuk-text-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#0b0c0c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#505a5f"></span>
-      <code>$govuk-secondary-text-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#505a5f</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Links
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#1d70b8"></span>
-      <code>$govuk-link-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#1d70b8</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#003078"></span>
-      <code>$govuk-link-hover-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#003078</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#4c2c92"></span>
-      <code>$govuk-link-visited-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#4c2c92</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#0b0c0c"></span>
-      <code>$govuk-link-active-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#0b0c0c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Border
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#b1b4b6"></span>
-      <code>$govuk-border-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#b1b4b6</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#0b0c0c"></span>
-      <code>$govuk-input-border-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#0b0c0c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Focus state
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#ffdd00"></span>
-      <code>$govuk-focus-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#ffdd00</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      Only use this colour to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.
-    </td>
-  </tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#0b0c0c"></span>
-      <code>$govuk-focus-text-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#0b0c0c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Error state
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#d4351c"></span>
-      <code>$govuk-error-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#d4351c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      Use for error messages
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Success state
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#00703c"></span>
-      <code>$govuk-success-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#00703c</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      Use for success messages
-    </td>
-  </tr>
-<tr>
-  <td colspan="3">
-    <h3 class="govuk-heading-m govuk-!-padding-top-6">
-    Brand colour
-    </h3>
-  </td>
-</tr>
-  <tr class="app-colour-list-row">
-    <th class="app-colour-list-column app-colour-list-column--name" scope="row">
-      <span class="app-swatch " style="background-color:#1d70b8"></span>
-      <code>$govuk-brand-colour</code>
-    </th>
-    <td class="app-colour-list-column app-colour-list-column--colour">
-      <code>#1d70b8</code>
-    </td>
-    <td class="app-colour-list-column app-colour-list-column--notes">
-      
-    </td>
-  </tr>
-
    
+
+    
+      
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
+    
+      
+    
+      
+        
+        
+        
+      
    
   
    
+        
    
+        Text
+        
    
+      
    
+          
+          $govuk-text-colour
+        
+          #0b0c0c
+        
+
+        
    
+          
+          $govuk-secondary-text-colour
+        
+          #505a5f
+        
+
+        
    
+        
    
+        Links
+        
    
+      
    
+          
+          $govuk-link-colour
+        
+          #1d70b8
+        
+
+        
    
+          
+          $govuk-link-hover-colour
+        
+          #003078
+        
+
+        
    
+          
+          $govuk-link-visited-colour
+        
+          #4c2c92
+        
+
+        
    
+          
+          $govuk-link-active-colour
+        
+          #0b0c0c
+        
+
+        
    
+        
    
+        Border
+        
    
+      
    
+          
+          $govuk-border-colour
+        
+          #b1b4b6
+        
+
+        
    
+          
+          $govuk-input-border-colour
+        
+          #0b0c0c
+        
+
+        
    
+        
    
+        Focus state
+        
    
+      
    
+          
+          $govuk-focus-colour
+        
+          #ffdd00
+        
+          Only use this colour to indicate which element is focused on. For example, when a user tabs to an element with their keyboard.
+        
    
+          
+          $govuk-focus-text-colour
+        
+          #0b0c0c
+        
+
+        
    
+        
    
+        Error state
+        
    
+      
    
+          
+          $govuk-error-colour
+        
+          #d4351c
+        
+          Use for error messages
+        
    
+        
    
+        Success state
+        
    
+      
    
+          
+          $govuk-success-colour
+        
+          #00703c
+        
+          Use for success messages
+        
    
+        
    
+        Brand colour
+        
    
+      
    
+          
+          $govuk-brand-colour
+        
+          #1d70b8
+        
+
+        
    
       
 
    
 
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index 66d1ff3635..f4c4a01992 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,14 +1014,13 @@ 
    Photography
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">photography – images</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Photography – Images example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/images/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-
    
+
+          photography – images
+          example in a new tab
+            
+      
    
+      
+    
 
 
 
@@ -1034,14 +1033,13 @@ 
    Illustrations or representative
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">illustrations or representative – images</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Illustrations or representative – Images example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/images/representative/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-
    
+
+          illustrations or representative – images
+          example in a new tab
+            
+      
    
+      
+    
 
 
 
@@ -1069,25 +1067,24 @@ 
    Alternative text
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">alt text – images</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Alt text – Images example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/images/alt-text/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#alt-text-images-example-open-html" role="tab" aria-controls="alt-text-images-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#alt-text-images-example-open-html" aria-controls="alt-text-images-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="alt-text-images-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;larry-the-cat.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;Larry the cat, Chief Mouser to the Cabinet Office, sitting on a meeting table wearing a Union Jack bowtie.&quot;</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          alt text – images
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <img src="larry-the-cat.jpg" alt="Larry the cat, Chief Mouser to the Cabinet Office, sitting on a meeting table wearing a Union Jack bowtie.">
    
+      
    
+    
    
 
 
 
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index fe4b1c9364..468753d4af 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,36 +1205,37 @@ 
    Two-thirds
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">common two-thirds – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Common two-thirds – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/layout/common-two-thirds/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#common-two-thirds-layout-example-open-html" role="tab" aria-controls="common-two-thirds-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#common-two-thirds-layout-example-open-html" aria-controls="common-two-thirds-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="common-two-thirds-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <a href="#" class="govuk-back-link">Back</a>
    
-
      <main class="govuk-main-wrapper">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Two-thirds column<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>This is a paragraph inside a two-thirds wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+
+          common two-thirds – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Two-thirds column</h1>
+        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
+      </div>
+    </div>
+
+  </main>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1245,95 +1246,97 @@ 
    Two-thirds and one-third
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">common two-thirds / one-third – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Common two-thirds / one-third – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/layout/common-two-thirds-one-third/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#common-two-thirds-one-third-layout-example-open-html" role="tab" aria-controls="common-two-thirds-one-third-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#common-two-thirds-one-third-layout-example-open-html" aria-controls="common-two-thirds-one-third-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="common-two-thirds-one-third-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <a href="#" class="govuk-back-link">Back</a>
    
-
      <main class="govuk-main-wrapper">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Two-thirds column<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>This is a paragraph inside a two-thirds wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-one-third&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>One-third column<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>This is a paragraph inside a one-third wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+
+          common two-thirds / one-third – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Two-thirds column</h1>
+        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
+      </div>
+
+      <div class="govuk-grid-column-one-third">
+        <h2 class="govuk-heading-m">One-third column</h2>
+        <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
+      </div>
+    </div>
+
+  </main>
 </div>
    
       
    
-    
    
+    
 
 
 
 
 
-
    Row 1: Two-thirds 
    Row 2: Two-thirds and one-third
    
+
    Row 1: Two-thirds 
    Row 2: Two-thirds and one-third
    
 
    
     
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">common two-thirds with two rows – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Common two-thirds with two Rows – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/layout/common-two-thirds-two-thirds-one-third/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#common-two-thirds-with-two-rows-layout-example-open-html" role="tab" aria-controls="common-two-thirds-with-two-rows-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#common-two-thirds-with-two-rows-layout-example-open-html" aria-controls="common-two-thirds-with-two-rows-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="common-two-thirds-with-two-rows-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <a href="#" class="govuk-back-link">Back</a>
    
-
      <main class="govuk-main-wrapper">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Two-thirds column<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>Two-thirds column<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body-l&quot;</span>&gt;</span>This is a lead paragraph inside a two-thirds wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>This is a paragraph inside a two-thirds wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-one-third&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-m&quot;</span>&gt;</span>One-third column<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>This is a paragraph inside a one-third wide column<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+
+          common two-thirds with two rows – layout
+          example in a new tab
+        
+      
    
+      
+    
    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Two-thirds column</h1>
+      </div>
+    </div>
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-heading-l">Two-thirds column</h2>
+        <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
+        <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
+      </div>
+
+      <div class="govuk-grid-column-one-third">
+        <h3 class="govuk-heading-m">One-third column</h3>
+        <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
+
+      </div>
+    </div>
+
+  </main>
 </div>
    
       
    
-    
    
+    
    
 
 
 
@@ -1358,35 +1361,36 @@ 
    Exploded view of page wrappers
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">page wrapper – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Page wrapper – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/layout/layout-wrappers/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#page-wrapper-layout-example-open-html" role="tab" aria-controls="page-wrapper-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#page-wrapper-layout-example-open-html" aria-controls="page-wrapper-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="page-wrapper-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <a href="#" class="govuk-back-link">Back</a>
    
-
      <main class="govuk-main-wrapper">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Page title<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+
+          page wrapper – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-width-container">
+  <a href="#" class="govuk-back-link">Back</a>
+
+  <main class="govuk-main-wrapper">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Page title</h1>
+      </div>
+    </div>
+
+  </main>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1397,34 +1401,34 @@ 
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">page wrapper without content after the header – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Page wrapper without content after the header – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/layout/layout-wrappers-l/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#page-wrapper-without-content-after-the-header-layout-example-open-html" role="tab" aria-controls="page-wrapper-without-content-after-the-header-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#page-wrapper-without-content-after-the-header-layout-example-open-html" aria-controls="page-wrapper-without-content-after-the-header-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="page-wrapper-without-content-after-the-header-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-width-container&quot;</span>&gt;</span>
-
    
-
      <main class="govuk-main-wrapper govuk-main-wrapper–l">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Page title<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </main>
+
+          page wrapper without content after the header – layout
+          example in a new tab
+        
+      
+      
+    
+      
    
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-width-container">
+  <main class="govuk-main-wrapper govuk-main-wrapper--l">
+
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-two-thirds">
+        <h1 class="govuk-heading-xl">Page title</h1>
+      </div>
+    </div>
+
+  </main>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1443,29 +1447,28 @@ 
    Full width
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">full width – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Full width – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/layout/full-width/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#full-width-layout-example-open-html" role="tab" aria-controls="full-width-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#full-width-layout-example-open-html" aria-controls="full-width-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="full-width-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-full">
+
+          full width – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
     <p>govuk-grid-column-full</p>
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1476,29 +1479,28 @@ 
    One-half
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">one-half – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="One-half – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/layout/one-half/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#one-half-layout-example-open-html" role="tab" aria-controls="one-half-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#one-half-layout-example-open-html" aria-controls="one-half-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="one-half-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-one-half">
+
+          one-half – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-half">
     <p>govuk-grid-column-one-half</p>
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1509,62 +1511,60 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">one-third – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="One-third – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/layout/one-third/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#one-third-layout-example-open-html" role="tab" aria-controls="one-third-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#one-third-layout-example-open-html" aria-controls="one-third-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="one-third-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-one-third">
+
+          one-third – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-third">
     <p>govuk-grid-column-one-third</p>
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
 
-
    Two-thirds
    
+
    Two-thirds
    
 
 
 
 
@@ -1575,29 +1575,28 @@ 
    One-quarter
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">one-quarter – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="One-quarter – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/layout/one-quarter/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#one-quarter-layout-example-open-html" role="tab" aria-controls="one-quarter-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#one-quarter-layout-example-open-html" aria-controls="one-quarter-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="one-quarter-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-one-quarter">
+
+          one-quarter – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-quarter">
     <p>govuk-grid-column-one-quarter</p>
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1608,29 +1607,28 @@ 
    Three-quarters
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">three-quarters – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Three-quarters – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/layout/three-quarters/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#three-quarters-layout-example-open-html" role="tab" aria-controls="three-quarters-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#three-quarters-layout-example-open-html" aria-controls="three-quarters-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="three-quarters-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-three-quarters">
+
+          three-quarters – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-three-quarters">
     <p>govuk-grid-column-three-quarters</p>
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1641,60 +1639,64 @@ 
    Example combinations
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">combinations – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Combinations – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/styles/layout/combinations/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#combinations-layout-example-open-html" role="tab" aria-controls="combinations-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#combinations-layout-example-open-html" aria-controls="combinations-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="combinations-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-full">
+
+          combinations – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
     <p>govuk-grid-column-full</p>
   </div>
-</div>
    
-
    <div class="govuk-grid-row">
+</div>
+
+<div class="govuk-grid-row">
   <div class="govuk-grid-column-one-half">
     <p>govuk-grid-column-one-half</p>
   </div>
   <div class="govuk-grid-column-one-half">
     <p>govuk-grid-column-one-half</p>
   </div>
-</div>
    
-
    <div class="govuk-grid-row">
+</div>
+
+<div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <p>govuk-grid-column-two-thirds</p>
   </div>
   <div class="govuk-grid-column-one-third">
     <p>govuk-grid-column-one-third</p>
   </div>
-</div>
    
-
    <div class="govuk-grid-row">
+</div>
+
+<div class="govuk-grid-row">
   <div class="govuk-grid-column-one-third">
     <p>govuk-grid-column-one-third</p>
   </div>
   <div class="govuk-grid-column-two-thirds">
     <p>govuk-grid-column-two-thirds</p>
   </div>
-</div>
    
-
    <div class="govuk-grid-row">
+</div>
+
+<div class="govuk-grid-row">
   <div class="govuk-grid-column-three-quarters">
     <p>govuk-grid-column-three-quarters</p>
   </div>
   <div class="govuk-grid-column-one-quarter">
     <p>govuk-grid-column-one-quarter</p>
   </div>
-</div>
    
-
    <div class="govuk-grid-row">
+</div>
+
+<div class="govuk-grid-row">
   <div class="govuk-grid-column-one-quarter">
     <p>govuk-grid-column-one-quarter</p>
   </div>
@@ -1703,7 +1705,7 @@ 
    Example combinations
    
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1715,24 +1717,23 @@ 
    Desktop specific grid classes
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">desktop grid classes – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Desktop grid classes – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/layout/desktop/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#desktop-grid-classes-layout-example-open-html" role="tab" aria-controls="desktop-grid-classes-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#desktop-grid-classes-layout-example-open-html" aria-controls="desktop-grid-classes-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="desktop-grid-classes-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-two-thirds-from-desktop">
+
+          desktop grid classes – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds-from-desktop">
     <p>govuk-grid-column-two-thirds-from-desktop</p>
   </div>
   <div class="govuk-grid-column-one-third-from-desktop">
@@ -1740,7 +1741,7 @@ 
    Desktop specific grid classes
    
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1751,24 +1752,23 @@ 
    Desktop specific grid classes
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">desktop and tablet grid classes – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Desktop and tablet grid classes – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/layout/tablet-desktop/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#desktop-and-tablet-grid-classes-layout-example-open-html" role="tab" aria-controls="desktop-and-tablet-grid-classes-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#desktop-and-tablet-grid-classes-layout-example-open-html" aria-controls="desktop-and-tablet-grid-classes-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="desktop-and-tablet-grid-classes-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop">
+
+          desktop and tablet grid classes – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-one-half govuk-grid-column-two-thirds-from-desktop">
     <p>govuk-grid-column-one-half<br><br>govuk-grid-column-two-thirds-from-desktop</p>
   </div>
   <div class="govuk-grid-column-one-half govuk-grid-column-one-third-from-desktop">
@@ -1776,7 +1776,7 @@ 
    Desktop specific grid classes
    
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1787,24 +1787,23 @@ 
    Nested grids
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">nested – layout</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Nested – Layout example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/layout/nested/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#nested-layout-example-open-html" role="tab" aria-controls="nested-layout-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#nested-layout-example-open-html" aria-controls="nested-layout-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="nested-layout-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-
    
-
      <div class="govuk-grid-column-two-thirds">
+
+          nested – layout
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-grid-row">
+  <div class="govuk-grid-column-two-thirds">
     <p>govuk-grid-column-two-thirds</p>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-one-half">
@@ -1817,7 +1816,7 @@ 
    Nested grids
    
   </div>
 </div>
    
       
    
-    
    
+    
 
 
 
@@ -1832,60 +1831,64 @@ 
    Width override classes
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">overriding input width – spacing</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Overriding input width – Spacing example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/styles/layout/width-overrides/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#overriding-input-width-spacing-example-open-html" role="tab" aria-controls="overriding-input-width-spacing-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#overriding-input-width-spacing-example-open-html" aria-controls="overriding-input-width-spacing-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="overriding-input-width-spacing-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-form-group&quot;</span>&gt;</span>
-
    
-
      <label class="govuk-label" for="full">
+
+          overriding input width – spacing
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-form-group">
+  <label class="govuk-label" for="full">
     Full width
   </label>
   <input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="three-quarters">
     Three-quarters width
   </label>
   <input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="two-thirds">
     Two-thirds width
   </label>
   <input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-half">
     One-half width
   </label>
   <input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-third">
     One-third width
   </label>
   <input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
    
-
    <div class="govuk-form-group">
+</div>
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="one-quarter">
     One-quarter width
   </label>
   <input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
 </div>
    
       
    
-    
    
+    
 
 
 
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ed41997643..9b323c460b 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,64 +1023,74 @@ 
    Default
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">default – page template</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Default – Page template example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/page-template/default/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-default-page-template-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-page-template-example-html" role="tab" aria-controls="default-page-template-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-page-template-example-nunjucks" role="tab" aria-controls="default-page-template-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#default-page-template-example-html" aria-controls="default-page-template-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-page-template-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
-
    
-
    <html lang="en" class="govuk-template ">
    
-
    <head>
+
+          default – page template
+          example in a new tab
+        
+      
    
+      
+    
+    
+    
+      
    HTML
    
+    
    
+      
    
+        
    <!DOCTYPE html>
+<html lang="en" class="govuk-template ">
+
+<head>
   <meta charset="utf-8">
   <title>GOV.UK - The best place to find government services and information</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="#0b0c0c">
    
-
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
-
      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+  <meta name="theme-color" content="#0b0c0c">
+
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
   <link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
   <link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
    
-
      <!–[if !IE 8]><!–>
+  <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+
+  <!--[if !IE 8]><!-->
   <link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
-  <!–<![endif]–>
    
-
      <!–[if IE 8]>
+  <!--<![endif]-->
+
+  <!--[if IE 8]>
     <link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
-  <![endif]–>
    
-
      <!–[if lt IE 9]>
+  <![endif]-->
+
+  <!--[if lt IE 9]>
     <script src="/html5-shiv/html5shiv.js"></script>
-  <![endif]–>
    
-
    </head>
    
-
    <body class="govuk-template__body ">
+  <![endif]-->
+
+</head>
+
+<body class="govuk-template__body ">
   <script>
-    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
    
-
      </script>
    
-
      <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
    
-
      <header class="govuk-header " role="banner" data-module="govuk-header">
+    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+
+  </script>
+
+  <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+
+  <header class="govuk-header " role="banner" data-module="govuk-header">
     <div class="govuk-header__container govuk-width-container">
       <div class="govuk-header__logo">
-        <a href="/" class="govuk-header__link govuk-header__link–homepage">
+        <a href="/" class="govuk-header__link govuk-header__link--homepage">
           <span class="govuk-header__logotype">
-            <!–[if gt IE 8]><!–>
-            <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+            <!--[if gt IE 8]><!-->
+            <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
               <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
             </svg>
-            <!–<![endif]–>
-            <!–[if IE 8]>
+            <!--<![endif]-->
+            <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
             <span class="govuk-header__logotype-text">
               GOV.UK
             </span>
@@ -1088,37 +1098,42 @@ 
    Default
    
         </a>
       </div>
     </div>
-  </header>
    
-
      <div class="govuk-width-container ">
+  </header>
+
+  <div class="govuk-width-container ">
     <main class="govuk-main-wrapper " id="main-content" role="main">
       <h1 class="govuk-heading-xl">Default page template</h1>
     </main>
-  </div>
    
-
      <footer class="govuk-footer " role="contentinfo">
+  </div>
+
+  <footer class="govuk-footer " role="contentinfo">
     <div class="govuk-width-container ">
       <div class="govuk-footer__meta">
-        <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-        All content is available under the
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-      <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </footer>
    
-
      <script src="/govuk-frontend/all.js"></script>
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+
+          <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
+            <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+          </svg>
+          <span class="govuk-footer__licence-description">
+            All content is available under the
+            <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
+          </span>
+        </div>
+        <div class="govuk-footer__meta-item">
+          <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+  <script src="/govuk-frontend/all.js"></script>
   <script>
-    window.GOVUKFrontend.initAll()
    
-
      </script>
-</body>
    
-
    </html>
    
+    window.GOVUKFrontend.initAll()
+
+  </script>
+</body>
+
+</html>
    Nunjucks
    @@ -1127,26 +1142,30 @@

    Default

    <!--[if !IE 8]><!--> <link href="/govuk-frontend/govuk/all.css" rel="stylesheet"> <!--<![endif]--> + {# For Internet Explorer 8, you need to compile specific stylesheet #} - {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #} + {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #} <!--[if IE 8]> <link href="/govuk-frontend/all-ie8.css" rel="stylesheet"> <![endif]--> - {# For older browsers to allow them to recognise HTML5 elements such as &lt;header&gt; #} + + {# For older browsers to allow them to recognise HTML5 elements such as `<header>` #} <!--[if lt IE 9]> <script src="/html5-shiv/html5shiv.js"></script> <![endif]--> {% endblock %} + {% block content %} <h1 class="govuk-heading-xl">Default page template</h1> {% endblock %} + {% block bodyEnd %} {# Run JavaScript at end of the <body>, to avoid blocking the initial render. #} <script src="/govuk-frontend/all.js"></script> <script>window.GOVUKFrontend.initAll()</script> {% endblock %}     -

    + @@ -1162,90 +1181,100 @@

    Customised page template

    Open this - -
    <span class="govuk-visually-hidden">customised – page template</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Customised – Page template example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/styles/page-template/custom/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-customised-page-template-example"></span>
-<ul class="app-tabs" role="tablist">
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#customised-page-template-example-html" role="tab" aria-controls="customised-page-template-example-html" data-track="tab-html">HTML</a></li>
-  <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#customised-page-template-example-nunjucks" role="tab" aria-controls="customised-page-template-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#customised-page-template-example-html" aria-controls="customised-page-template-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="customised-page-template-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span>
-
    -

    <html lang="en" class="govuk-template app-html-class">

    -

    <head> + + customised – page template + example in a new tab + +

    + + + + +
    HTML
    +
    +
    + 
    <!DOCTYPE html>
+<html lang="en" class="govuk-template app-html-class">
+
+<head>
   <meta charset="utf-8">
   <title>GOV.UK - Customised page template</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="blue">
    
-
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
-
      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+  <meta name="theme-color" content="blue">
+
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
   <link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
   <link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
   <link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
    
-
      <!–[if !IE 8]><!–>
+  <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+
+  <!--[if !IE 8]><!-->
   <link href="/govuk-frontend/all.css" rel="stylesheet">
-  <!–<![endif]–>
    
-
      <!–[if IE 8]>
+  <!--<![endif]-->
+
+  <!--[if IE 8]>
     <link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
-  <![endif]–>
    
-
      <!–[if lt IE 9]>
+  <![endif]-->
+
+  <!--[if lt IE 9]>
     <script src="/html5-shiv/html5shiv.js"></script>
-  <![endif]–>
    
-
      <meta property="og:image" content="&lt;YOUR-DOMAIN&gt;/images/govuk-opengraph-image.png">
-</head>
    
-
    <body class="govuk-template__body app-body-class" data-test="My value" data-other="report:details">
+  <![endif]-->
+
+  <meta property="og:image" content="&lt;YOUR-DOMAIN&gt;/images/govuk-opengraph-image.png">
+</head>
+
+<body class="govuk-template__body app-body-class" data-test="My value" data-other="report:details">
   <script>
-    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
    
-
      </script>
+    document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+
+  </script>
   <div class="govuk-cookie-banner " data-nosnippet role="region" aria-label="Cookies on [name of service]">
-    <div class="govuk-cookie-banner__message govuk-width-container">
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-row&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-grid-column-two-thirds&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__heading govuk-heading-m&quot;</span>&gt;</span>Cookies on [name of service]<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
-
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-cookie-banner__content&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We use some essential cookies to make this service work.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>We&#x27;d also like to use analytics cookies so we can understand how you use the service and make improvements.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
-  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button-group&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;accept&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Accept analytics cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;reject&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;cookies&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-button&quot;</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">&quot;govuk-button&quot;</span>&gt;</span>
-      Reject analytics cookies
-    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span>&gt;</span>View cookies<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </div>
    
-
      <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
    
-
      <header class="govuk-header " role="banner" data-module="govuk-header">
+    <div class="govuk-cookie-banner__message govuk-width-container">
+
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          <h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on [name of service]</h2>
+
+          <div class="govuk-cookie-banner__content">
+            <p class="govuk-body">We use some essential cookies to make this service work.</p>
+            <p class="govuk-body">We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="govuk-button-group">
+        <button value="accept" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+          Accept analytics cookies
+        </button>
+        <button value="reject" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+          Reject analytics cookies
+        </button>
+        <a class="govuk-link" href="#">View cookies</a>
+      </div>
+    </div>
+  </div>
+
+  <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+
+  <header class="govuk-header " role="banner" data-module="govuk-header">
     <div class="govuk-header__container app-width-container">
       <div class="govuk-header__logo">
-        <a href="#" class="govuk-header__link govuk-header__link–homepage">
+        <a href="#" class="govuk-header__link govuk-header__link--homepage">
           <span class="govuk-header__logotype">
-            <!–[if gt IE 8]><!–>
-            <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+            <!--[if gt IE 8]><!-->
+            <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
               <path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
             </svg>
-            <!–<![endif]–>
-            <!–[if IE 8]>
+            <!--<![endif]-->
+            <!--[if IE 8]>
           <img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
-          <![endif]–>
+          <![endif]-->
             <span class="govuk-header__logotype-text">
               GOV.UK
             </span>
@@ -1257,30 +1286,31 @@ 
    Customised page template
    
           Service name
         </a>
         <nav aria-label="Menu" class="govuk-header__navigation ">
-          <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;navigation&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-list&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item govuk-header__navigation-item--active&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#1&quot;</span>&gt;</span>
-            Navigation item 1
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#2&quot;</span>&gt;</span>
-            Navigation item 2
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__navigation-item&quot;</span>&gt;</span>
-          <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-header__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#3&quot;</span>&gt;</span>
-            Navigation item 3
-          <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </header>
    
-
      <div class="govuk-width-container app-width-container">
+          <button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide menu" hidden>Menu</button>
+
+          <ul id="navigation" class="govuk-header__navigation-list">
+            <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
+              <a class="govuk-header__link" href="#1">
+                Navigation item 1
+              </a>
+            </li>
+            <li class="govuk-header__navigation-item">
+              <a class="govuk-header__link" href="#2">
+                Navigation item 2
+              </a>
+            </li>
+            <li class="govuk-header__navigation-item">
+              <a class="govuk-header__link" href="#3">
+                Navigation item 3
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+
+  <div class="govuk-width-container app-width-container">
     <div class="govuk-phase-banner">
       <p class="govuk-phase-banner__content">
         <strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1290,18 +1320,19 @@ 
    Customised page template
    
           This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.
         </span>
       </p>
-    </div>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-back-link&quot;</span>&gt;</span>Back<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+    </div>
 
-<span class="hljs-tag">&lt;<span class="hljs-name">main</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-main-wrapper app-main-class&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;main-content&quot;</span> <span class="hljs-attr">role</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>Customised page template<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">main</span>&gt;</span>
-
    
-
      </div>
    
-
      <footer class="govuk-footer " role="contentinfo">
+    <a href="#" class="govuk-back-link">Back</a>
+
+    <main class="govuk-main-wrapper app-main-class" id="main-content" role="main">
+      <h1 class="govuk-heading-xl">Customised page template</h1>
+    </main>
+  </div>
+
+  <footer class="govuk-footer " role="contentinfo">
     <div class="govuk-width-container ">
       <div class="govuk-footer__meta">
-        <div class="govuk-footer__meta-item govuk-footer__meta-item–grow">
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
           <h2 class="govuk-visually-hidden">Support links</h2>
           <ul class="govuk-footer__inline-list">
             <li class="govuk-footer__inline-list-item">
@@ -1324,36 +1355,40 @@ 
    Customised page template
    
                 Terms and conditions
               </a>
             </li>
-          </ul>
    
-
    <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-logo&quot;</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">&quot;http://www.w3.org/2000/svg&quot;</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">&quot;0 0 483.2 195.7&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;17&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;41&quot;</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">&quot;currentColor&quot;</span> <span class="hljs-attr">d</span>=<span class="hljs-string">&quot;M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145&quot;</span> /&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__licence-description&quot;</span>&gt;</span>
-        All content is available under the
-        <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;license&quot;</span>&gt;</span>Open Government Licence v3.0<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>, except where otherwise stated
-      <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__meta-item&quot;</span>&gt;</span>
-      <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-footer__link govuk-footer__copyright-logo&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/&quot;</span>&gt;</span>© Crown copyright<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
      </footer>
    
-
      <script src="/govuk-frontend/all.js"></script>
-</body>
    
-
    </html>
    + </ul> + + <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41"> + <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" /> + </svg> + <span class="govuk-footer__licence-description"> + All content is available under the + <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated + </span> + </div> + <div class="govuk-footer__meta-item"> + <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a> + </div> + </div> + </div> + </footer> + + <script src="/govuk-frontend/all.js"></script> +</body> + +</html>
    Nunjucks
    {# Example that changes every setting in the template #}
+
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
 {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
 {% from "govuk/components/header/macro.njk" import govukHeader %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "govuk/components/footer/macro.njk" import govukFooter %}
+
 {% set htmlClasses = "app-html-class" %}
 {% set htmlLang = "en" %}
 {% set assetPath = "" %}
@@ -1365,32 +1400,38 @@ 
    Customised page template
    
   'data-other': 'report:details'
 } %}
 {% set containerClasses = "app-width-container" %}
+
 {% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+
 {% block headIcons %}
     {{ super() }}
 {% endblock %}
+
 {% block head %}
   <!--[if !IE 8]><!-->
     <link href="/govuk-frontend/all.css" rel="stylesheet">
   <!--<![endif]-->
+
   {# For Internet Explorer 8, you need to compile specific stylesheet #}
-  {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+  {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
   <!--[if IE 8]>
     <link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
   <![endif]-->
-  {# For older browsers to allow them to recognise HTML5 elements such as &lt;header&gt; #}
+
+  {# For older browsers to allow them to recognise HTML5 elements such as `<header>` #}
   <!--[if lt IE 9]>
     <script src="/html5-shiv/html5shiv.js"></script>
   <![endif]-->
 {% endblock %}
+
 {% block bodyStart %}
   {{ govukCookieBanner({
     ariaLabel: "Cookies on [name of service]",
     messages: [
       {
         headingText: "Cookies on [name of service]",
-        html: "<p class=&quot;govuk-body&quot;>We use some essential cookies to make this service work.</p>
-               <p class=&quot;govuk-body&quot;>We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>",
+        html: "<p class=\"govuk-body\">We use some essential cookies to make this service work.</p>
+               <p class=\"govuk-body\">We'd also like to use analytics cookies so we can understand how you use the service and make improvements.</p>",
         actions: [
           {
             text: "Accept analytics cookies",
@@ -1413,12 +1454,14 @@ 
    Customised page template
    
     ]
   }) }}
 {% endblock %}
+
 {% block skipLink %}
   {{ govukSkipLink({
     href: "#main-content",
     text: "Skip to main content"
   }) }}
 {% endblock %}
+
 {% block header %}
   {{ govukHeader({
     homepageUrl: "#",
@@ -1442,10 +1485,13 @@ 
    Customised page template
    
     ]
   }) }}
 {% endblock %}
+
 {% set mainClasses = "app-main-class" %}
+
 {% block main %}
   {{ super() }}
 {% endblock %}
+
 {% block beforeContent %}
   {{ govukPhaseBanner({
     tag: {
@@ -1458,9 +1504,11 @@ 
    Customised page template
    
     text: "Back"
   }) }}
 {% endblock %}
+
 {% block content %}
   <h1 class="govuk-heading-xl">Customised page template</h1>
 {% endblock %}
+
 {% block footer %}
   {{ govukFooter({
     meta: {
@@ -1485,11 +1533,12 @@ 
    Customised page template
    
     }
   }) }}
 {% endblock %}
+
 {% block bodyEnd %}
   <script src="/govuk-frontend/all.js"></script>
 {% endblock %}
    -

    + @@ -1498,18 +1547,18 @@

    Changing template content

    If you’re using Nunjucks, you can change the template’s content using options.

    How you set an option depends on whether it’s a ‘variable’ option or a ‘block’ option.

    To set a ‘variable’ option, use set to pass in a single value or string. For example, to add a class to the <body> element using the bodyClasses option:

    -
    {% set bodyClasses = "EXAMPLE-CLASS" %}
+
    {% set bodyClasses = "EXAMPLE-CLASS" %}
 
    
 
    By default, the template contains a skip link, header and footer, all of which require ‘blocks’ to change.
    
 
    To set a ‘block’ option, use block to pass in a multiline value or HTML markup. For example, to add a block of HTML before the closing  element in the page template using the bodyEnd option:
    
-
    {% block bodyEnd %}
+
    {% block bodyEnd %}
   <div>
      <p>Example text</p>
   </div>
 {% endblock %}
 
    
 
    To change the components that are included in the page template by default, set their equivalent blocks. For example:
    
-
    {% block header %}
+
    {% block header %}
   {{ govukHeader ({
     homepageUrl: "/custom-url"
   }) }}
@@ -1527,192 +1576,192 @@ 
    Options
    
   
   
 
-
    <tr class="govuk-table__row">
-  <td class="govuk-table__cell">assetPath</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">
-    Specify a path to the <a href="https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#font-and-image-assets">GOV.UK Frontend assets</a> (icons, images, font files).
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">assetUrl</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Set the domain for assets where an absolute URL is required, for example the Open Graph image.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">beforeContent</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Add content that needs to appear outside <code>&lt;main&gt;</code> element.
-    <br>
-    For example: The <a class="govuk-link" href="/components/back-link/">back link</a> component, <a class="govuk-link" href="/components/breadcrumbs/">breadcrumbs</a> component,
-    <a class="govuk-link" href="/components/phase-banner/">phase banner</a> component.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">bodyAttributes</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Add attributes to the <code>&lt;body&gt;</code> element. Add each attribute and its value in the <code>bodyAttributes</code> object.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">bodyClasses</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Add a class to the <code>&lt;body&gt;</code> element.</td>
-</tr>
-
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">bodyEnd</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Add content just before the closing <code>&lt;/body&gt;</code> element.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">bodyStart</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Add content after the opening <code>&lt;body&gt;</code> element.
-    <br>
-    For example: The <a class="govuk-link" href="/components/cookie-banner/">cookie banner</a> component.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">containerClasses</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Add a class to the container. This is useful if you want to make the page wrapper a fixed width.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">content</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Add content that needs to appear centered in the <code>&lt;main&gt;</code> element.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">cspNonce</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">
-    Add a <code>nonce</code> attribute to the script for your Content Security Policy (CSP). Provide a nonce that hostile actors cannot guess, as otherwise they can easily find a way around your CSP. However, you should use this attribute only if you’re not able to <a class="govuk-link" href="https://frontend.design-system.service.gov.uk/importing-css-assets-and-javascript/#if-your-javascript-is-not-working-properly">include the hash for the inline scripts in your service’s CSP</a>.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">footer</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the default <a class="govuk-link" href="/components/footer/">footer</a> component.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">head</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Add additional items inside the <code>&lt;head&gt;</code> element.
-    <br>
-    For example: <code>&lt;meta name="description" content="My page description"&gt;</code>
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">header</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the default <a class="govuk-link" href="/components/header/">header</a> component.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">headIcons</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the default icons used for GOV.UK branded pages.
-    <br>
-    For example: <code>&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;</code>
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">htmlClasses</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Add a class to the <code>&lt;html&gt;</code> element.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">htmlLang</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Set the language of the whole document. If your <code>&lt;title&gt;</code> and <code>&lt;main&gt;</code> element are in a different language to the rest of the page, use <code>htmlLang</code> to set the language of the rest of the page.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">main</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the main section of the page, which by default wraps the <code>&lt;main&gt;</code> element, <code>beforeContent</code> block and <code>content</code> block.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">mainClasses</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Add a class to the <code>&lt;main&gt;</code> element. </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">mainLang</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">
-    Set the language of the <code>&lt;main&gt;</code> element if it's different to <code>htmlLang</code>.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">opengraphImageUrl</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">Set the URL for the Open Graph image meta tag. The URL must be absolute, including the protocol and domain name.</td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">pageTitle</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the default page title (<code>&lt;title&gt;</code> element).
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">pageTitleLang</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">
-    Set the language of the <code>&lt;title&gt;</code> element if it's different to <code>htmlLang</code>.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">skipLink</td>
-  <td class="govuk-table__cell">Block</td>
-  <td class="govuk-table__cell">
-    Override the default <a class="govuk-link" href="/components/skip-link/">skip link</a> component.
-  </td>
-</tr>
-
-<tr class="govuk-table__row">
-  <td class="govuk-table__cell">themeColor</td>
-  <td class="govuk-table__cell">Variable</td>
-  <td class="govuk-table__cell">
-    Set the <a href="https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android">toolbar colour on some devices</a>.
-  </td>
-</tr>
-
    
+    
+      assetPath
+      Variable
+      
+        Specify a path to the GOV.UK Frontend assets (icons, images, font files).
+      
+    
+
+    
+      assetUrl
+      Variable
+      Set the domain for assets where an absolute URL is required, for example the Open Graph image.
+    
+
+    
+      beforeContent
+      Block
+      
+        Add content that needs to appear outside <main> element.
+        
    
+        For example: The back link component, breadcrumbs component,
+        phase banner component.
+      
+    
+
+    
+      bodyAttributes
+      Variable
+      Add attributes to the <body> element. Add each attribute and its value in the bodyAttributes object.
+    
+
+    
+      bodyClasses
+      Variable
+      Add a class to the <body> element.
+    
+
+
+    
+      bodyEnd
+      Block
+      
+        Add content just before the closing </body> element.
+      
+    
+
+    
+      bodyStart
+      Block
+      
+        Add content after the opening <body> element.
+        
    
+        For example: The cookie banner component.
+      
+    
+
+    
+      containerClasses
+      Variable
+      Add a class to the container. This is useful if you want to make the page wrapper a fixed width.
+    
+
+    
+      content
+      Block
+      
+        Add content that needs to appear centered in the <main> element.
+      
+    
+
+    
+      cspNonce
+      Variable
+      
+        Add a nonce attribute to the script for your Content Security Policy (CSP). Provide a nonce that hostile actors cannot guess, as otherwise they can easily find a way around your CSP. However, you should use this attribute only if you’re not able to include the hash for the inline scripts in your service’s CSP.
+      
+    
+
+    
+      footer
+      Block
+      
+        Override the default footer component.
+      
+    
+
+    
+      head
+      Block
+      
+        Add additional items inside the <head> element.
+        
    
+        For example: <meta name="description" content="My page description">
+      
+    
+
+    
+      header
+      Block
+      
+        Override the default header component.
+      
+    
+
+    
+      headIcons
+      Block
+      
+        Override the default icons used for GOV.UK branded pages.
+        
    
+        For example: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+      
+    
+
+    
+      htmlClasses
+      Variable
+      Add a class to the <html> element.
+    
+
+    
+      htmlLang
+      Variable
+      Set the language of the whole document. If your <title> and <main> element are in a different language to the rest of the page, use htmlLang to set the language of the rest of the page.
+    
+
+    
+      main
+      Block
+      
+        Override the main section of the page, which by default wraps the <main> element, beforeContent block and content block.
+      
+    
+
+    
+      mainClasses
+      Variable
+      Add a class to the <main> element. 
+    
+
+    
+      mainLang
+      Variable
+      
+        Set the language of the <main> element if it's different to htmlLang.
+      
+    
+
+    
+      opengraphImageUrl
+      Variable
+      Set the URL for the Open Graph image meta tag. The URL must be absolute, including the protocol and domain name.
+    
+
+    
+      pageTitle
+      Block
+      
+        Override the default page title (<title> element).
+      
+    
+
+    
+      pageTitleLang
+      Variable
+      
+        Set the language of the <title> element if it's different to htmlLang.
+      
+    
+
+    
+      skipLink
+      Block
+      
+        Override the default skip link component.
+      
+    
+
+    
+      themeColor
+      Variable
+      
+        Set the toolbar colour on some devices.
+      
+    
+
   
 
 
@@ -1722,14 +1771,13 @@ 
    Exploded view of the pag
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">block areas – page template</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Block areas – Page template example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/page-template/block-areas/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-
    
+
+          block areas – page template
+          example in a new tab
+            
+      
    
+      
+    
 
 
 
diff --git a/deploy/public/styles/spacing/index.html b/deploy/public/styles/spacing/index.html
index ebd4d39c27..1e6be6b257 100644
--- a/deploy/public/styles/spacing/index.html
+++ b/deploy/public/styles/spacing/index.html
@@ -1223,20 +1223,20 @@ 
    Applying spacing in your own CSS
    
 
    Using the responsive spacing helper
    
 
    To use the responsive spacing scale, include the govuk-responsive-margin or govuk-responsive-padding mixins.
    
 
    For example, to apply spacing unit 6 for 30px padding on large screens and 20px on small screens, use:
    
-
    @include govuk-responsive-padding(6);
+
    @include govuk-responsive-padding(6);
 
    
 
    You can also add an argument to apply margin or padding in a single direction.
    
 
    For example, to apply spacing unit 6 for a 30px bottom margin on large screens and a 20px bottom margin on small screens, use:
    
-
    @include govuk-responsive-margin(6, "bottom");
+
    @include govuk-responsive-margin(6, "bottom");
 
    
 
    Using the static spacing helper
    
 
    For the static spacing scale, use the govuk-spacing function.
    
 
    For example, to apply spacing unit 6 for 30px top padding on all screens, use:
    
-
    padding-top: govuk-spacing(6);
+
    padding-top: govuk-spacing(6);
 
    
 
    For negative spacing, use a negative spacing unit number.
    
 
    For example, to apply spacing unit -3 for a negative 15px top margin all screens, use:
    
-
    margin-top: govuk-spacing(-3);
+
    margin-top: govuk-spacing(-3);
 
    
 
    Overriding spacing
    
 
    Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the spacing override classes for this.
    
@@ -1263,24 +1263,23 @@ 
    Examples
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">padding scale – spacing</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Padding scale – Spacing example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/spacing/spacing-scale-padding/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#padding-scale-spacing-example-html" role="tab" aria-controls="padding-scale-spacing-example-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#padding-scale-spacing-example-html" aria-controls="padding-scale-spacing-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="padding-scale-spacing-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-!-padding-bottom-9&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-
    
-
    <div class="govuk-!-padding-bottom-8"></div>
+
+          padding scale – spacing
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <div class="govuk-!-padding-bottom-9"></div>
+<div class="govuk-!-padding-bottom-8"></div>
 <div class="govuk-!-padding-bottom-7"></div>
 <div class="govuk-!-padding-bottom-6"></div>
 <div class="govuk-!-padding-bottom-5"></div>
@@ -1289,7 +1288,7 @@ 
    Examples
    
 <div class="govuk-!-padding-bottom-2"></div>
 <div class="govuk-!-padding-bottom-1"></div>
    
       
    
-    
    
+    
 
 
 
@@ -1305,24 +1304,23 @@ 
    Examples
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">margin scale – spacing</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Margin scale – Spacing example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/styles/spacing/spacing-scale-margin/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#margin-scale-spacing-example-html" role="tab" aria-controls="margin-scale-spacing-example-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#margin-scale-spacing-example-html" aria-controls="margin-scale-spacing-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="margin-scale-spacing-example-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body govuk-!-margin-bottom-9&quot;</span>&gt;</span>A paragraph with a margin-bottom override (spacing unit 9).<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
    
-
    <p class="govuk-body govuk-!-margin-bottom-8">A paragraph with a margin-bottom override (spacing unit 8).</p>
+
+          margin scale – spacing
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body govuk-!-margin-bottom-9">A paragraph with a margin-bottom override (spacing unit 9).</p>
+<p class="govuk-body govuk-!-margin-bottom-8">A paragraph with a margin-bottom override (spacing unit 8).</p>
 <p class="govuk-body govuk-!-margin-bottom-7">A paragraph with a margin-bottom override (spacing unit 7).</p>
 <p class="govuk-body govuk-!-margin-bottom-6">A paragraph with a margin-bottom override (spacing unit 6).</p>
 <p class="govuk-body govuk-!-margin-bottom-5">A paragraph with a margin-bottom override (spacing unit 5).</p>
@@ -1332,7 +1330,7 @@ 
    Examples
    
 <p class="govuk-body govuk-!-margin-bottom-1">A paragraph with a margin-bottom override (spacing unit 1).</p>
 <p class="govuk-body govuk-!-margin-bottom-0">A paragraph with a margin-bottom override (spacing unit 0).</p>
    
       
    
-    
    
+    
 
 
 
diff --git a/deploy/public/styles/typography/index.html b/deploy/public/styles/typography/index.html
index 088d68ab5d..5e7f02cb05 100644
--- a/deploy/public/styles/typography/index.html
+++ b/deploy/public/styles/typography/index.html
@@ -1219,27 +1219,26 @@ 
    Headings
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">headings – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Headings – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/typography/headings/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#headings-typography-example-open-html" role="tab" aria-controls="headings-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#headings-typography-example-open-html" aria-controls="headings-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="headings-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>govuk-heading-l<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    
-
    <h2 class="govuk-heading-m">govuk-heading-m</h2>
+
+          headings – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <h1 class="govuk-heading-l">govuk-heading-l</h1>
+<h2 class="govuk-heading-m">govuk-heading-m</h2>
 <h3 class="govuk-heading-s">govuk-heading-s</h3>
    
       
    
-    
    
+    
 
 
 
@@ -1250,28 +1249,27 @@ 
    Headings
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">headings for pages with long form content – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Headings for pages with long form content – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/typography/headings-xl/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#headings-for-pages-with-long-form-content-typography-example-open-html" role="tab" aria-controls="headings-for-pages-with-long-form-content-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#headings-for-pages-with-long-form-content-typography-example-open-html" aria-controls="headings-for-pages-with-long-form-content-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="headings-for-pages-with-long-form-content-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-xl&quot;</span>&gt;</span>govuk-heading-xl<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
-
    
-
    <h2 class="govuk-heading-l">govuk-heading-l</h2>
+
+          headings for pages with long form content – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <h1 class="govuk-heading-xl">govuk-heading-xl</h1>
+<h2 class="govuk-heading-l">govuk-heading-l</h2>
 <h3 class="govuk-heading-m">govuk-heading-m</h3>
 <h3 class="govuk-heading-s">govuk-heading-s</h3>
    
       
    
-    
    
+    
 
 
 
@@ -1283,30 +1281,31 @@ 
    Headings with captions
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">headings with captions – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Headings with captions – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/typography/captions/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#headings-with-captions-typography-example-open-html" role="tab" aria-controls="headings-with-captions-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#headings-with-captions-typography-example-open-html" aria-controls="headings-with-captions-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="headings-with-captions-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-caption-xl&quot;</span>&gt;</span>govuk-caption-xl<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-
    
-
    <h1 class="govuk-heading-xl">govuk-heading-xl</h1>
    
-
    <span class="govuk-caption-l">govuk-caption-l</span>
-<h1 class="govuk-heading-l">govuk-heading-l</h1>
    
-
    <span class="govuk-caption-m">govuk-caption-m</span>
+
+          headings with captions – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <span class="govuk-caption-xl">govuk-caption-xl</span>
+<h1 class="govuk-heading-xl">govuk-heading-xl</h1>
+
+<span class="govuk-caption-l">govuk-caption-l</span>
+<h1 class="govuk-heading-l">govuk-heading-l</h1>
+
+<span class="govuk-caption-m">govuk-caption-m</span>
 <h1 class="govuk-heading-m">govuk-heading-m</h1>
    
       
    
-    
    
+    
 
 
 
@@ -1317,28 +1316,27 @@ 
    Headings with captions
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">headings with captions nested – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Headings with captions nested – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--l" src="/styles/typography/captions-inside/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#headings-with-captions-nested-typography-example-open-html" role="tab" aria-controls="headings-with-captions-nested-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#headings-with-captions-nested-typography-example-open-html" aria-controls="headings-with-captions-nested-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="headings-with-captions-nested-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-heading-l&quot;</span>&gt;</span>
-
    
-
      <span class="govuk-caption-l">govuk-caption-l</span>
+
+          headings with captions nested – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <h1 class="govuk-heading-l">
+  <span class="govuk-caption-l">govuk-caption-l</span>
   govuk-heading-l
 </h1>
    
       
    
-    
    
+    
 
 
 
@@ -1351,25 +1349,24 @@ 
    Body
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">body – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Body – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/body/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#body-typography-example-open-html" role="tab" aria-controls="body-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#body-typography-example-open-html" aria-controls="body-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="body-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>govuk-body<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          body – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body">govuk-body</p>
    
+      
    
+    
    
 
 
 
@@ -1382,25 +1379,24 @@ 
    Lead paragraph
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">lead – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Lead – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/lead/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#lead-typography-example-open-html" role="tab" aria-controls="lead-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#lead-typography-example-open-html" aria-controls="lead-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="lead-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body-l&quot;</span>&gt;</span>govuk-body-l<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          lead – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body-l">govuk-body-l</p>
    
+      
    
+    
    
 
 
 
@@ -1413,25 +1409,24 @@ 
    Body small
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">body small – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Body small – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/small/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#body-small-typography-example-open-html" role="tab" aria-controls="body-small-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#body-small-typography-example-open-html" aria-controls="body-small-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="body-small-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body-s&quot;</span>&gt;</span>govuk-body-s<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          body small – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body-s">govuk-body-s</p>
    
+      
    
+    
    
 
 
 
@@ -1455,24 +1450,23 @@ 
    Font size
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">font size – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Font size – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/styles/typography/font-size/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#font-size-typography-example-open-html" role="tab" aria-controls="font-size-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#font-size-typography-example-open-html" aria-controls="font-size-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="font-size-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body govuk-!-font-size-80&quot;</span>&gt;</span>govuk-!-font-size-80<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
    
-
    <p class="govuk-body govuk-!-font-size-48">govuk-!-font-size-48</p>
+
+          font size – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body govuk-!-font-size-80">govuk-!-font-size-80</p>
+<p class="govuk-body govuk-!-font-size-48">govuk-!-font-size-48</p>
 <p class="govuk-body govuk-!-font-size-36">govuk-!-font-size-36</p>
 <p class="govuk-body govuk-!-font-size-27">govuk-!-font-size-27</p>
 <p class="govuk-body govuk-!-font-size-24">govuk-!-font-size-24</p>
@@ -1480,7 +1474,7 @@ 
    Font size
    
 <p class="govuk-body govuk-!-font-size-16">govuk-!-font-size-16</p>
 <p class="govuk-body govuk-!-font-size-14">govuk-!-font-size-14</p>
    
       
    
-    
    
+    
 
 
 
@@ -1492,26 +1486,25 @@ 
    Font weight
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">font weight – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Font weight – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/font-weight/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#font-weight-typography-example-open-html" role="tab" aria-controls="font-weight-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#font-weight-typography-example-open-html" aria-controls="font-weight-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="font-weight-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body govuk-!-font-weight-regular&quot;</span>&gt;</span>govuk-!-font-weight-regular<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
    
-
    <p class="govuk-body govuk-!-font-weight-bold">govuk-!-font-weight-bold</p>
    
+
+          font weight – typography
+          example in a new tab
+        
       
-    
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body govuk-!-font-weight-regular">govuk-!-font-weight-regular</p>
+<p class="govuk-body govuk-!-font-weight-bold">govuk-!-font-weight-bold</p>
    
+      
    
+    
    
 
 
 
@@ -1527,25 +1520,24 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">links – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Links – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#links-typography-example-open-html" role="tab" aria-controls="links-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#links-typography-example-open-html" aria-controls="links-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="links-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>Jump to <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span>&gt;</span>HTML example<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          links – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body">Jump to <a href="#" class="govuk-link">HTML example</a>.</p>
    
+      
    
+    
    
 
 
 
@@ -1556,25 +1548,24 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">links with no visited state – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Links with no visited state – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-no-visited-state/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#links-with-no-visited-state-typography-example-open-html" role="tab" aria-controls="links-with-no-visited-state-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#links-with-no-visited-state-typography-example-open-html" aria-controls="links-with-no-visited-state-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="links-with-no-visited-state-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link govuk-link--no-visited-state&quot;</span>&gt;</span>link text (with no visited state)<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          links with no visited state – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <a href="#" class="govuk-link govuk-link--no-visited-state">link text (with no visited state)</a>
    
+      
    
+    
    
 
 
 
@@ -1590,25 +1581,24 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">links that open in a new tab  – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Links that open in a new tab  – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-opening-in-new-tab/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#links-that-open-in-a-new-tab-typography-example-open-html" role="tab" aria-controls="links-that-open-in-a-new-tab-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#links-that-open-in-a-new-tab-typography-example-open-html" aria-controls="links-that-open-in-a-new-tab-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="links-that-open-in-a-new-tab-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link&quot;</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;noreferrer noopener&quot;</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_blank&quot;</span>&gt;</span>link text (opens in new tab)<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          links that open in a new tab  – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <a href="#" class="govuk-link" rel="noreferrer noopener" target="_blank">link text (opens in new tab)</a>
    
+      
    
+    
    
 
 
 
@@ -1626,25 +1616,24 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">links on dark backgrounds – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Links on dark backgrounds – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-on-dark-background/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#links-on-dark-backgrounds-typography-example-open-html" role="tab" aria-controls="links-on-dark-backgrounds-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#links-on-dark-backgrounds-typography-example-open-html" aria-controls="links-on-dark-backgrounds-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="links-on-dark-backgrounds-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link govuk-link--inverse&quot;</span>&gt;</span>link text (on dark background)<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          links on dark backgrounds – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <a href="#" class="govuk-link govuk-link--inverse">link text (on dark background)</a>
    
+      
    
+    
    
 
 
 
@@ -1658,25 +1647,24 @@ 
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">links without underlines – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Links without underlines – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/styles/typography/link-no-underline/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#links-without-underlines-typography-example-open-html" role="tab" aria-controls="links-without-underlines-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#links-without-underlines-typography-example-open-html" aria-controls="links-without-underlines-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="links-without-underlines-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;#&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-link govuk-link--no-underline&quot;</span>&gt;</span>link text (with no underline)<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
-  </div>
-</div>
-
    
+
+          links without underlines – typography
+          example in a new tab
+            
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <a href="#" class="govuk-link govuk-link--no-underline">link text (with no underline)</a>
    
+      
    
+    
    
 
 
 
@@ -1688,24 +1676,23 @@ 
    Lists
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">lists – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Lists – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/typography/list/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#lists-typography-example-open-html" role="tab" aria-controls="lists-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#lists-typography-example-open-html" aria-controls="lists-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="lists-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-list&quot;</span>&gt;</span>
-
    
-
      <li>
+
+          lists – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <ul class="govuk-list">
+  <li>
     <a class="govuk-link" href="#">Benefits calculators</a>
   </li>
   <li>
@@ -1719,7 +1706,7 @@ 
    Lists
    
   </li>
 </ul>
    
       
    
-    
    
+    
 
 
 
@@ -1731,30 +1718,29 @@ 
    Bulleted lists
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">bulleted lists – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Bulleted lists – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/typography/list-bullet/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#bulleted-lists-typography-example-open-html" role="tab" aria-controls="bulleted-lists-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#bulleted-lists-typography-example-open-html" aria-controls="bulleted-lists-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="bulleted-lists-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You can buy:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
    
-
    <ul class="govuk-list govuk-list–bullet">
+
+          bulleted lists – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body">You can buy:</p>
+<ul class="govuk-list govuk-list--bullet">
   <li>apples</li>
   <li>oranges</li>
   <li>pears</li>
 </ul>
    
       
    
-    
    
+    
 
 
 
@@ -1767,29 +1753,28 @@ 
    Numbered lists
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">numbered lists – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Numbered lists – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/typography/list-number/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#numbered-lists-typography-example-open-html" role="tab" aria-controls="numbered-lists-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#numbered-lists-typography-example-open-html" aria-controls="numbered-lists-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="numbered-lists-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-list govuk-list--number&quot;</span>&gt;</span>
-
    
-
      <li>Delivery address.</li>
+
+          numbered lists – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <ol class="govuk-list govuk-list--number">
+  <li>Delivery address.</li>
   <li>Payment.</li>
   <li>Confirmation.</li>
 </ol>
    
       
    
-    
    
+    
 
 
 
@@ -1801,24 +1786,23 @@ 
    Adding extra spacing between li
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">spaced lists – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Spaced lists – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--s" src="/styles/typography/list-spaced/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#spaced-lists-typography-example-open-html" role="tab" aria-controls="spaced-lists-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#spaced-lists-typography-example-open-html" aria-controls="spaced-lists-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="spaced-lists-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-body&quot;</span>&gt;</span>You will have to apply the reverse charge if you supply any of these services:<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
-
    
-
    <ul class="govuk-list govuk-list–bullet govuk-list–spaced">
+
+          spaced lists – typography
+          example in a new tab
+        
+      
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <p class="govuk-body">You will have to apply the reverse charge if you supply any of these services:</p>
+<ul class="govuk-list govuk-list--bullet govuk-list--spaced">
   <li>
     constructing, altering, repairing, extending, demolishing or dismantling buildings or structures (whether permanent or not), including offshore installation services
   </li>
@@ -1842,7 +1826,7 @@ 
    Adding extra spacing between li
   </li>
 </ul>
    
       
    
-    
    
+    
 
 
 
@@ -1855,28 +1839,27 @@ 
    Section break
    
       
    
         
           Open this
-          
-
    <span class="govuk-visually-hidden">section break – typography</span>
-      example in a new tab
-    </a>
-  </div>
-  <iframe title="Section break – Typography example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--m" src="/styles/typography/section-break/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-  <ul class="app-tabs" role="tablist">
-    <li class="app-tabs__item js-tabs__item" role="presentation">
-      <a href="#section-break-typography-example-open-html" role="tab" aria-controls="section-break-typography-example-open-html" data-track="tab-html">HTML</a>
-    </li>
-  </ul>
-  <div class="app-tabs__heading js-tabs__heading"><a href="#section-break-typography-example-open-html" aria-controls="section-break-typography-example-open-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="section-break-typography-example-open-html" role="tabpanel">
-  <div class="app-example__code">
-    <pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">hr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;govuk-section-break govuk-section-break--xl govuk-section-break--visible&quot;</span>&gt;</span>
-
    
-
    <hr class="govuk-section-break govuk-section-break–l govuk-section-break–visible">
-<hr class="govuk-section-break govuk-section-break–m govuk-section-break–visible">
-<hr class="govuk-section-break govuk-section-break–visible">
    
+
+          section break – typography
+          example in a new tab
+        
       
-    
    
+      
+    
+      
+      
    HTML
    
+    
    
+      
    
+        
    <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
+<hr class="govuk-section-break govuk-section-break--l govuk-section-break--visible">
+<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
+<hr class="govuk-section-break govuk-section-break--visible">
    
+      
    
+