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:
@@ -977,7 +977,7 @@ How this website has
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=
- </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.
|
+
+
+
+ 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=
+ Both the guidance and any content included in examples must follow the GOV.UK content style guide.
- <p class=
- </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. |
+
+
+
+ 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=
- </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 @@
+
+
+
+
+
+
+
+
<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 @@
-
<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><button></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><button></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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | integer |
+
+ Heading level, from 1 to 6. Default is 2.
+ |
+
+
+
+ | string |
+
+ Classes to add to the accordion.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the accordion.
+ |
+
+
+
+ | array |
+
+ Required.
+ An array of sections within the accordion.
+ See items.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The title of each section. If heading.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Text content for summary line. If summary.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML content of each section, which is hidden when the section is closed.
+ |
+
+
+
+ | boolean |
+
+ 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">"govuk/components/accordion/macro.njk"</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 @@
]
}) }}
-
+
+
+
<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 @@
-
<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><button></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><button></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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | integer |
+
+ Heading level, from 1 to 6. Default is 2.
+ |
+
+
+
+ | string |
+
+ Classes to add to the accordion.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the accordion.
+ |
+
+
+
+ | array |
+
+ Required.
+ An array of sections within the accordion.
+ See items.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The title of each section. If heading.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Text content for summary line. If summary.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML content of each section, which is hidden when the section is closed.
+ |
+
+
+
+ | boolean |
+
+ 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">"govuk/components/accordion/macro.njk"</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 @@
]
}) }}
-
+
Adding a summary line
+
+
+
+
+
+
+
+
<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
-
<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><button></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><button></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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | integer |
+
+ Heading level, from 1 to 6. Default is 2.
+ |
+
+
+
+ | string |
+
+ Classes to add to the accordion.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the accordion.
+ |
+
+
+
+ | array |
+
+ Required.
+ An array of sections within the accordion.
+ See items.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The title of each section. If heading.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Text content for summary line. If summary.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text content of each section, which is hidden when the section is closed. If content.html is supplied, this is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML content of each section, which is hidden when the section is closed.
+ |
+
+
+
+ | boolean |
+
+ 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 "govuk/components/accordion/macro.njk" 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
]
}) }}
-
+
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 @@
+
+
+
+
+
+
+
+
<a href="#" class="govuk-back-link">Back</a>
+
+
+
+
+
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-back-link-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 ">
- Text to use within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored. Defaults to 'Back'.
- </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 within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored. Defaults to 'Back'.
- </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 value of the link's <code>href</code> attribute.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">classes</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- Classes to add to the anchor 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 anchor 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Text to use within the back link component. If html is provided, the text option will be ignored. Defaults to 'Back'.
+ |
+
+
+
+ | string |
+
+ HTML to use within the back link component. If html is provided, the text option will be ignored. Defaults to 'Back'.
+ |
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute.
+ |
+
+
+
+ | string |
+
+ Classes to add to the anchor tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor 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">"govuk/components/back-link/macro.njk"</span> <span class="hljs-keyword">import</span> govukBackLink %}
-
-
{{ govukBackLink({
+
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
How it works
+
+
+
+
+
+
+
+
<a href="#" class="govuk-back-link">Back</a>
+
+
+
+
+
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-back-link-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 ">
- Text to use within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored. Defaults to 'Back'.
- </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 within the back link component. If <code>html</code> is provided, the <code>text</code> option will be ignored. Defaults to 'Back'.
- </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 value of the link's <code>href</code> attribute.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">classes</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- Classes to add to the anchor 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 anchor 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Text to use within the back link component. If html is provided, the text option will be ignored. Defaults to 'Back'.
+ |
+
+
+
+ | string |
+
+ HTML to use within the back link component. If html is provided, the text option will be ignored. Defaults to 'Back'.
+ |
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute.
+ |
+
+
+
+ | string |
+
+ Classes to add to the anchor tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor 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">"govuk/components/back-link/macro.njk"</span> <span class="hljs-keyword">import</span> govukBackLink %}
-
-
{{ govukBackLink({
+
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
+
+
+
+
+
+
+
+
<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 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of breadcrumbs item objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ Classes to add to the breadcrumbs container.
+ |
+
+
+
+ | boolean |
+
+ When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the breadcrumbs container.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/breadcrumbs/macro.njk"</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 @@
]
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of breadcrumbs item objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ Classes to add to the breadcrumbs container.
+ |
+
+
+
+ | boolean |
+
+ When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the breadcrumbs container.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/breadcrumbs/macro.njk"</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
]
}) }}
-
+
Collapsing breadcrumbs on mobi
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of breadcrumbs item objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ Classes to add to the breadcrumbs container.
+ |
+
+
+
+ | boolean |
+
+ When true, the breadcrumbs will collapse to the first and last item only on tablet breakpoint and below.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the breadcrumbs container.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Link for the breadcrumbs item. If not specified, breadcrumbs item is a normal list item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/breadcrumbs/macro.njk"</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
]
}) }}
-
+
+
+
+
+
+
+
-
@@ -1314,159 +1315,160 @@
+
+
+
+
+
+
-
@@ -1479,163 +1481,164 @@
+
+
+
+
+
+
-
@@ -1648,160 +1651,161 @@
+
+
+
+
+
+
-
@@ -1814,160 +1818,161 @@
+
+
+
+
+
+
-
@@ -1984,160 +1989,161 @@
+
+
+
+
+
+
-
@@ -2149,170 +2155,173 @@
+
+
+
+
+
+
-
@@ -2323,165 +2332,168 @@
+
+
+
+
+
+
-
@@ -2502,160 +2514,161 @@
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.
+
+
+
+
+
+
<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>
-
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the character count.
+ |
+
+
+
+ | object |
+
+ Options for the count message.
+ See countMessage.
+ |
+
+
+
+
+
+ Options for countMessage
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the count message.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/character-count/macro.njk"</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
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the character count.
+ |
+
+
+
+ | object |
+
+ Options for the count message.
+ See countMessage.
+ |
+
+
+
+
+
+ Options for countMessage
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the count message.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/character-count/macro.njk"</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
}
}) }}
-
+
Avoid narrow limits
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the character count.
+ |
+
+
+
+ | object |
+
+ Options for the count message.
+ See countMessage.
+ |
+
+
+
+
+
+ Options for countMessage
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the count message.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/character-count/macro.njk"</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
}
}) }}
-
+
Error messages
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the character count.
+ |
+
+
+
+ | object |
+
+ Options for the count message.
+ See countMessage.
+ |
+
+
+
+
+
+ Options for countMessage
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the count message.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/character-count/macro.njk"</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
}
}) }}
-
+
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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 @@
]
}) }}
-
+
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
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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.
+
+
+
+
+
+
<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>
-
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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’
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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’
]
}) }}
-
+
Add an option for ‘none’
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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 'None of these' 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for all checkbox items.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of checkbox items objects.
+ See items.
+ |
+
+
+
+ | array |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the checkboxes container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
+ |
+
+
+
+ | string |
+
+ Specific name for the checkbox item. If omitted, then component global name string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the checkbox input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each checkbox item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each checkbox item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate checkbox items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
+ |
+
+
+
+ | boolean |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | string |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | string |
+
+ If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
+ |
+
+
+
+ | boolean |
+
+ If true, checkbox will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the checkbox input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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’
]
}) }}
-
+
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
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
</form>
+
+</form>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-cookie-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-server-side-implementation-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-server-side-implementation-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-server-side-implementation-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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>
-
+
Option 2: If yo
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted additional cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
</form>
+
+</form>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-server-side-implementation-with-confirmation-cookie-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-server-side-implementation-with-confirmation-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-server-side-implementation-with-confirmation-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-confirmation-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-server-side-implementation-with-confirmation-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-confirmation-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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>
-
+
Help users ke
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__message govuk-width-container"</span> <span class="hljs-attr">hidden</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted additional cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__message govuk-width-container"</span> <span class="hljs-attr">hidden</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve rejected additional cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
</form>
+
+</form>
-
<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">
-
+
+
+
+
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-server-side-implementation-with-multiple-messages-and-question-visible-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-multiple-messages-and-question-visible-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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>
-
+
Help users ke
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"POST"</span>></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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__message govuk-width-container"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted additional cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__message govuk-width-container"</span> <span class="hljs-attr">hidden</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve rejected additional cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">draggable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
</form>
+
+</form>
-
<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">
-
+
+
+
+
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-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-server-side-implementation-with-multiple-messages-and-confirmation-visible-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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>
-
+
Show
+
+
+
+
+
+
+
+
<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 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" 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="Client-side implementation – Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/client-side/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-client-side-implementation-cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
- <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#client-side-implementation-cookie-banner-example-html" role="tab" aria-controls="client-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="#client-side-implementation-cookie-banner-example-nunjucks" role="tab" aria-controls="client-side-implementation-cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
- <div class="app-tabs__heading js-tabs__heading"><a href="#client-side-implementation-cookie-banner-example-html" aria-controls="client-side-implementation-cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="client-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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner "</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Cookies on [name of service]"</span>></span>
-
-
<div class="govuk-cookie-banner__message govuk-width-container">
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve rejected analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
</div>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-client-side-implementation-cookie-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-client-side-implementation-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-client-side-implementation-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-client-side-implementation-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-client-side-implementation-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-client-side-implementation-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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: [
@@ -3211,7 +3235,7 @@ Show
]
}) }}
-
+
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
+
+
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner "</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Cookies on [name of service]"</span>></span>
-
-
<div class="govuk-cookie-banner__message govuk-width-container" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert">
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve rejected analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
</div>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-accepted-replacement-message-cookie-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-accepted-replacement-message-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-accepted-replacement-message-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-accepted-replacement-message-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-accepted-replacement-message-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-accepted-replacement-message-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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
-
+
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
+
+
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner "</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Cookies on [name of service]"</span>></span>
-
-
<div class="govuk-cookie-banner__message govuk-width-container" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert" hidden>
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve accepted analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
-
<div class="govuk-cookie-banner__message govuk-width-container" role="alert">
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>You’ve rejected analytics cookies. You can <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>change your cookie settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> at any time.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Hide cookie message
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
</div>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-rejected-replacement-message-cookie-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-rejected-replacement-message-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-rejected-replacement-message-cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-rejected-replacement-message-cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-rejected-replacement-message-cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-rejected-replacement-message-cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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
-
+
What to cover in your cookie banner
Keep the text as short as possible while making sure it’s an accurate description of how you use cookies. For example, if you use more than one ‘functional’ cookie and there’s not enough space to mention what each of them does, you could ask for permission to set cookies so ‘you can use as many of the service’s features as possible’.
See the cookies page for more advice on writing about cookies.
-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.
+
+
+
+
+
+
<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 second 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-second-example"></span>
-<ul class="app-tabs" role="tablist">
- <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-cookie-banner-second-example-html" role="tab" aria-controls="default-cookie-banner-second-example-html" data-track="tab-html">HTML</a></li>
- <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#default-cookie-banner-second-example-nunjucks" role="tab" aria-controls="default-cookie-banner-second-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
- <div class="app-tabs__heading js-tabs__heading"><a href="#default-cookie-banner-second-example-html" aria-controls="default-cookie-banner-second-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="default-cookie-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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner "</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Cookies on [name of service]"</span>></span>
-
-
<div class="govuk-cookie-banner__message govuk-width-container">
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
</div>
-
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-default-cookie-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-cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-default-cookie-banner-second-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-default-cookie-banner-second-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-default-cookie-banner-second-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-default-cookie-banner-second-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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: [
@@ -4252,12 +4290,12 @@ If you’re usin
]
}) }}
-
+
-If you’re using more than one type of non-essential cookie
+If you’re using more than one type of non-essential cookie
You can use this example text for a service that set:
- essential cookies
@@ -4269,273 +4307,275 @@ If you’re u
+
+
+
+
+
+
+
+
<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="button" name="cookies" class="govuk-button" data-module="govuk-button">
+ Accept additional cookies
+ </button>
+ <button value="reject" type="button" name="cookies" class="govuk-button" data-module="govuk-button">
+ Reject additional cookies
+ </button>
+ <a class="govuk-link" href="#">View cookies</a>
+ </div>
</div>
- <iframe title="Non-essential Cookies - Cookie Banner example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/components/cookie-banner/multiple-cookies/index.html" frameBorder="0" loading="lazy"></iframe>
-</div>
-<span id="options-non-essential-cookies---cookie-banner-example"></span>
-<ul class="app-tabs" role="tablist">
- <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#non-essential-cookies---cookie-banner-example-html" role="tab" aria-controls="non-essential-cookies---cookie-banner-example-html" data-track="tab-html">HTML</a></li>
- <li class="app-tabs__item js-tabs__item" role="presentation"><a href="#non-essential-cookies---cookie-banner-example-nunjucks" role="tab" aria-controls="non-essential-cookies---cookie-banner-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
-</ul>
- <div class="app-tabs__heading js-tabs__heading"><a href="#non-essential-cookies---cookie-banner-example-html" aria-controls="non-essential-cookies---cookie-banner-example-html" data-track="tab-html">HTML</a></div>
-<div class="app-tabs__container js-tabs__container" id="non-essential-cookies---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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner "</span> <span class="hljs-attr">data-nosnippet</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"region"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Cookies on [name of service]"</span>></span>
-
-
<div class="govuk-cookie-banner__message govuk-width-container">
-
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject additional cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
-
</div>
</div>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-non-essential-cookies---cookie-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-non-essential-cookies---cookie-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">ariaLabel</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The text for the <code>aria-label</code> which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set this option to <code>true</code>, the whole cookie banner is hidden, including all messages within the banner. You can use <code>hidden</code> for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the cookie 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 additional attributes that you want to add to the cookie banner. For example, data attributes.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">messages</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
- See <a href="#options-non-essential-cookies---cookie-banner-example--messages">messages</a>.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-non-essential-cookies---cookie-banner-example--messages">
- <caption class="govuk-table__caption govuk-heading-m ">Options for messages</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__header" scope="col">Description</th>
- </tr>
- </thead>
- <tbody class="govuk-table__body">
-
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingText</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading text that displays in the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">headingHtml</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The heading HTML to use within the message. You can use any string with this option. If you set <code>headingHtml</code>, <code>headingText</code> is ignored. If you are not passing HTML, use <code>headingText</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>
- The text for the main content within the message. 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">html</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- <strong>Required.</strong>
- The HTML for the main content within the message. You can use any string with this option. If you set <code>html</code>, <code>text</code> is not required and is ignored. If you are not passing HTML, use <code>text</code>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">actions</th>
- <td class="govuk-table__cell ">array</td>
- <td class="govuk-table__cell ">
- The buttons and links that you want to display in the message. <code>actions</code> defaults to <code>button</code> unless you set <code>href</code>, which renders the action as a link.
- See <a href="#options-non-essential-cookies---cookie-banner-example--actions">actions</a>.
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="govuk-table__header" scope="row">hidden</th>
- <td class="govuk-table__cell ">boolean</td>
- <td class="govuk-table__cell ">
- Defaults to <code>false</code>. If you set it to <code>true</code>, the message is hidden. You can use <code>hidden</code> for client-side implementations where the confirmation message HTML is present, but hidden on the page.
- </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 ">
- Set <code>role</code> to <code>alert</code> on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the message.
- </td>
- </tr>
- <tr class="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 additional attributes that you want to add to the message. For example, data attributes.
- </td>
- </tr>
- </tbody>
- </table>
- <table class="govuk-table app-options__table" id="options-non-essential-cookies---cookie-banner-example--actions">
- <caption class="govuk-table__caption govuk-heading-m ">Options for actions</caption>
- <thead class="govuk-table__head">
- <tr class="govuk-table__row">
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
- <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
- <th class="govuk-table__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 button or link text.
- </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 button. You can set <code>button</code> or <code>submit</code>. Set <code>button</code> and <code>href</code> to render a link styled as a button. If you set <code>href</code>, it overrides <code>submit</code>.
- </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 <code>href</code> for a link. Set <code>button</code> and <code>href</code> to render a link styled as a button.
- </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 ">
- The name attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </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 attribute for the button. Does not apply if you set <code>href</code>, which makes a link.
- </td>
- </tr>
- <tr class="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 additional classes that you want to add to the button or 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 ">
- The additional attributes that you want to add to the button or link. For example, data attributes.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The text for the aria-label which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set this option to true, the whole cookie banner is hidden, including all messages within the banner. You can use hidden for client-side implementations where the cookie banner HTML is present, but hidden until the cookie banner is shown using JavaScript.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the cookie banner.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the cookie banner. For example, data attributes.
+ |
+
+
+
+ | array |
+
+ Required.
+ The different messages you can pass into the cookie banner. For example, the cookie message and the confirmation message.
+ See messages.
+ |
+
+
+
+
+ Options for messages
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The heading text that displays in the message. You can use any string with this option. If you set headingHtml, headingText is ignored.
+ |
+
+
+
+ | string |
+
+ The heading HTML to use within the message. You can use any string with this option. If you set headingHtml, headingText is ignored. If you are not passing HTML, use headingText.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ The HTML for the main content within the message. You can use any string with this option. If you set html, text is not required and is ignored. If you are not passing HTML, use text.
+ |
+
+
+
+ | array |
+
+ The buttons and links that you want to display in the message. actions defaults to button unless you set href, which renders the action as a link.
+ See actions.
+ |
+
+
+
+ | boolean |
+
+ Defaults to false. If you set it to true, the message is hidden. You can use hidden for client-side implementations where the confirmation message HTML is present, but hidden on the page.
+ |
+
+
+
+ | string |
+
+ Set role to alert on confirmation messages to allow assistive tech to automatically read the message. You will also need to move focus to the confirmation message using JavaScript you have written yourself.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the message.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the message. For example, data attributes.
+ |
+
+
+
+
+ Options for actions
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The button or link text.
+ |
+
+
+
+ | string |
+
+ The type of button. You can set button or submit. Set button and href to render a link styled as a button. If you set href, it overrides submit.
+ |
+
+
+
+ | string |
+
+ The href for a link. Set button and href to render a link styled as a button.
+ |
+
+
+
+ | string |
+
+ The name attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The value attribute for the button. Does not apply if you set href, which makes a link.
+ |
+
+
+
+ | string |
+
+ The additional classes that you want to add to the button or link.
+ |
+
+
+
+ | object |
+
+ The additional attributes that you want to add to the button or link. 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">"govuk/components/cookie-banner/macro.njk"</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 %}
+
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -4564,7 +4604,7 @@ If you’re u
]
}) }}
-
+
+
+
+
+
+
+
-
@@ -1477,25 +1479,24 @@ 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.
@@ -2147,25 +2153,24 @@ Use the autocomplete
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ This is used for the main component and to compose the ID attribute for each item.
+ |
+
+
+
+ | string |
+
+ Optional prefix. This is used to prefix each item.name using -.
+ |
+
+
+
+ | array |
+
+ An array of input objects with name, value and classes.
+ See items.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | string |
+
+ Classes to add to the date-input container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the date-input container.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ |
+
+
+
+ | string |
+
+ Required.
+ Item-specific name attribute.
+ |
+
+
+
+ | string |
+
+ Item-specific label text. If provided, this will be used instead of name for item label text.
+ |
+
+
+
+ | string |
+
+ If provided, it will be used as the initial value of the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | string |
+
+ Classes to add to date input item.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the date input tag.
+ |
+
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/date-input/macro.njk"</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"
}
]
}) }}
-
+
Error messages
+
+
+
+
+
+
-
@@ -2860,25 +2870,24 @@ Error messages
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ This is used for the main component and to compose the ID attribute for each item.
+ |
+
+
+
+ | string |
+
+ Optional prefix. This is used to prefix each item.name using -.
+ |
+
+
+
+ | array |
+
+ An array of input objects with name, value and classes.
+ See items.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | string |
+
+ Classes to add to the date-input container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the date-input container.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ |
+
+
+
+ | string |
+
+ Required.
+ Item-specific name attribute.
+ |
+
+
+
+ | string |
+
+ Item-specific label text. If provided, this will be used instead of name for item label text.
+ |
+
+
+
+ | string |
+
+ If provided, it will be used as the initial value of the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | string |
+
+ Classes to add to date input item.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the date input tag.
+ |
+
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/date-input/macro.njk"</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"
}
]
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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><details></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><details></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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire details component in a call block.
+ |
+
+
+
+ | string |
+
+ ID to add to the details element.
+ |
+
+
+
+ | boolean |
+
+ If true, details element will be expanded.
+ |
+
+
+
+ | string |
+
+ Classes to add to the <details> element.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/details/macro.njk"</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."
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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><details></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><details></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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire details component in a call block.
+ |
+
+
+
+ | string |
+
+ ID to add to the details element.
+ |
+
+
+
+ | boolean |
+
+ If true, details element will be expanded.
+ |
+
+
+
+ | string |
+
+ Classes to add to the <details> element.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/details/macro.njk"</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."
}) }}
-
+
+
+
+
+
+
+
+
+
<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>
-
<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 'Error'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ ID attribute to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error message span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ 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">"govuk/components/date-input/macro.njk"</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"
}
]
}) }}
-
+
How it works
-
-
-
<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 'Error'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ ID attribute to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error message span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ 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">"govuk/components/error-message/macro.njk"</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"
}) }}
-
Legend
+
+
+
+
+
+
+
+
<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>
-
<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 'Error'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ ID attribute to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error message span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ 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">"govuk/components/checkboxes/macro.njk"</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
]
}) }}
-
+
Label
+
+
+
+
+
+
+
+
<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>
-
<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 'Error'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ ID attribute to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error message span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error message span tag.
+ |
+
+
+
+ | string |
+
+ 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">"govuk/components/input/macro.njk"</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
}
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/error-summary/macro.njk"</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 @@
]
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/error-summary/macro.njk"</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
]
}) }}
-
+
Linking from the error su
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/error-summary/macro.njk"</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
}
}) }}
-
+
Linking from the error su
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/date-input/macro.njk"</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"
}
]
})
}}
-
+
Linking from the error su
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/error-summary/macro.njk"</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
]
}) }}
-
+
Where to put the error summary
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group govuk-form-group--error"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"group"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-issued-error"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">legend</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset__legend govuk-fieldset__legend--l"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset__heading"</span>></span>
- When was your passport issued?
- <span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-issued-error"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-error-message"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-visually-hidden"</span>></span>Error:<span class="hljs-tag"></<span class="hljs-name">span</span>></span> Passport issue date must include a year
- <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-date-input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-issued"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-date-input__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-date-input__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-issued-day"</span>></span>
- Day
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-date-input__input govuk-input--width-2"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-issued-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-issued-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">"numeric"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-date-input__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-date-input__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-issued-month"</span>></span>
- Month
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-date-input__input govuk-input--width-2"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-issued-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-issued-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"12"</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">"numeric"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-date-input__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-date-input__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-issued-year"</span>></span>
- Year
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-issued-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-issued-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">inputmode</span>=<span class="hljs-string">"numeric"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Continue
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If titleHtml is set, this is not required. Text to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If titleText is set, this is not required. HTML to use for the heading of the error summary block. If titleHtml is provided, titleText will be ignored.
+ |
+
+
+
+ | string |
+
+ Text to use for the description of the errors. If you set descriptionHtml, the component will ignore descriptionText.
+ |
+
+
+
+ | string |
+
+ HTML to use for the description of the errors. If you set this option, the component will ignore descriptionText.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire error summary component in a call block.
+ |
+
+
+
+ | array |
+
+ Required.
+ The list of errors to include in the summary
+ See errorList.
+ |
+
+
+
+ | boolean |
+
+ Prevent moving focus to the error summary when the page loads.
+ |
+
+
+
+ | string |
+
+ Classes to add to the error-summary container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the error-summary container.
+ |
+
+
+
+
+ Options for errorList
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Href attribute for the error link item. If provided item will be an anchor.
+ |
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML for the error link item. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/back-link/macro.njk"</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 %}
-
+
When to use this component
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Options for the legend
+ See legend.
+ |
+
+
+
+ | string |
+
+ Classes to add to the fieldset container.
+ |
+
+
+
+ | string |
+
+ Optional ARIA role attribute.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the fieldset container.
+ |
+
+
+
+ | string |
+
+ HTML to use/render within the fieldset element.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a call block.
+ |
+
+
+
+
+ Options for legend
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the legend.
+ |
+
+
+
+ | boolean |
+
+ 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">"govuk/components/input/macro.njk"</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 %}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Options for the legend
+ See legend.
+ |
+
+
+
+ | string |
+
+ Classes to add to the fieldset container.
+ |
+
+
+
+ | string |
+
+ Optional ARIA role attribute.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the fieldset container.
+ |
+
+
+
+ | string |
+
+ HTML to use/render within the fieldset element.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a call block.
+ |
+
+
+
+
+ Options for legend
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the legend.
+ |
+
+
+
+ | boolean |
+
+ 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">"govuk/components/fieldset/macro.njk"</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
}
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the file upload component.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the file upload component.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/file-upload/macro.njk"</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 @@
}
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the file upload component.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the file upload component.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/file-upload/macro.njk"</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
}
}) }}
-
+
Error messages
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the file upload component.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the file upload component.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/file-upload/macro.njk"</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
}
}) }}
-
+
+
+
+
+
+
+
+
+
<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"><<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__licence-logo"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 483.2 195.7"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"17"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"41"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"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"</span> /></span>
- <span class="hljs-tag"></<span class="hljs-name">svg</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__licence-description"</span>></span>
- All content is available under the
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"license"</span>></span>Open Government Licence v3.0<span class="hljs-tag"></<span class="hljs-name">a</span>></span>, except where otherwise stated
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__meta-item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__link govuk-footer__copyright-logo"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"</span>></span>© Crown copyright<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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>
-
<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 'Support links'.
- </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, 'one-third'; 'two-thirds'; 'one-half'.
- </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><span></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><a></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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Object containing options for the meta navigation.
+ See meta.
+ |
+
+
+
+ | array |
+
+ Array of items for use in the navigation section of the footer.
+ See navigation.
+ |
+
+
+
+ | object |
+
+ Object containing options for the content licence.
+ See contentLicence.
+ |
+
+
+
+ | object |
+
+ Object containing options for the copyright notice.
+ See copyright.
+ |
+
+
+
+ | string |
+
+ Classes that can be added to the inner container, useful if you want to make the footer full width.
+ |
+
+
+
+ | string |
+
+ Classes to add to the footer component container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the footer component container.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ List item text in the meta section of the footer.
+ |
+
+
+
+ | string |
+
+ Required.
+ List item href attribute in the meta section of the footer.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor in the footer meta section.
+ |
+
+
+
+
+ Options for navigation
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ Title for a section.
+ |
+
+
+
+ | integer |
+
+ Amount of columns to display items in navigation section of the footer.
+ |
+
+
+
+ | string |
+
+ 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'.
+ |
+
+
+
+ | array |
+
+ Array of items to display in the list in navigation section of the footer.
+ See items.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ List item text in the navigation section of the footer.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the anchor in the footer navigation section.
+ |
+
+
+
+
+ Options for contentLicence
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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">"govuk/components/footer/macro.njk"</span> <span class="hljs-keyword">import</span> govukFooter %}
-
-
{{ govukFooter({}) }}
+
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
+
+{{ govukFooter({}) }}
-
+
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
+
+
+
+
+
+
+
+
<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
-
<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
- </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 'Important', 'Success', 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
+ |
+
+
+
+ | string |
+
+ 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>
-
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert.
+ |
+
+
+
+ | string |
+
+ The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
+ |
+
+
+
+ | boolean |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The classes that you want to add to the notification banner.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/notification-banner/macro.njk"</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
}) }}
-
+
Reacting to something the user
+
+
+
+
+
+
+
+
<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>
-
<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
- </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 'Important', 'Success', 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire notification banner component in a call block.
+ |
+
+
+
+ | string |
+
+ 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>
-
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Overrides the value of the role attribute for the notification banner. Defaults to region. If you set type to success, role defaults to alert.
+ |
+
+
+
+ | string |
+
+ The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
+ |
+
+
+
+ | boolean |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The classes that you want to add to the notification banner.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/notification-banner/macro.njk"</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'
}) }}
-
+
+
+
+
+
+
+
-
@@ -1457,33 +1458,32 @@ For smaller numbers of pages
+
+
+
+
+
+
-
@@ -1740,33 +1742,32 @@ Add link labels to describe pages
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"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-pagination govuk-pagination--block"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"navigation"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"results"</span>></span>
-
- <div class="govuk-pagination__prev">
+
+ pagination with text labels
+ example in a new tab
+
+
+
+
+
+
+
+
@@ -2023,26 +2026,25 @@ For larger numbers of pages
+
+
+
+
+
+
+
+
<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">⋯</li>
+ <li class="govuk-pagination__item govuk-pagination__item--ellipses">⋯</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">⋯</li>
+ <li class="govuk-pagination__item govuk-pagination__item--ellipses">⋯</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
-
<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 'results'.
- </td>
- </tr>
- <tr class="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'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 'Previous page', where 'page' 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'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 'Next page', where 'page' 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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ The array of link objects.
+ See items.
+ |
+
+
+
+ | object |
+
+ A link to the previous page, if there is a previous page.
+ See previous.
+ |
+
+
+
+ | object |
+
+ A link to the next page, if there is a next page.
+ See next.
+ |
+
+
+
+ | string |
+
+ The label for the navigation landmark that wraps the pagination. Defaults to 'results'.
+ |
+
+
+
+ | string |
+
+ The classes you want to add to the pagination nav parent.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The pagination item text - usually a page number.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The link's URL.
+ |
+
+
+
+ | boolean |
+
+ Set to true to indicate the current page the user is on.
+ |
+
+
+
+ | boolean |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for previous
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The previous page's URL.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for next
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The next page's URL.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/pagination/macro.njk"</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
]
}) }}
-
+
First and last pages
+
+
+
+
+
+
+
+
<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
-
<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 'results'.
- </td>
- </tr>
- <tr class="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'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 'Previous page', where 'page' 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'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 'Next page', where 'page' 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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ The array of link objects.
+ See items.
+ |
+
+
+
+ | object |
+
+ A link to the previous page, if there is a previous page.
+ See previous.
+ |
+
+
+
+ | object |
+
+ A link to the next page, if there is a next page.
+ See next.
+ |
+
+
+
+ | string |
+
+ The label for the navigation landmark that wraps the pagination. Defaults to 'results'.
+ |
+
+
+
+ | string |
+
+ The classes you want to add to the pagination nav parent.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The pagination item text - usually a page number.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The link's URL.
+ |
+
+
+
+ | boolean |
+
+ Set to true to indicate the current page the user is on.
+ |
+
+
+
+ | boolean |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for previous
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The previous page's URL.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for next
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The next page's URL.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/pagination/macro.njk"</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
]
}) }}
-
+
First and last pages
+
+
+
+
+
+
+
+
<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
-
<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 'results'.
- </td>
- </tr>
- <tr class="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'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 'Previous page', where 'page' 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'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 'Next page', where 'page' 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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ The array of link objects.
+ See items.
+ |
+
+
+
+ | object |
+
+ A link to the previous page, if there is a previous page.
+ See previous.
+ |
+
+
+
+ | object |
+
+ A link to the next page, if there is a next page.
+ See next.
+ |
+
+
+
+ | string |
+
+ The label for the navigation landmark that wraps the pagination. Defaults to 'results'.
+ |
+
+
+
+ | string |
+
+ The classes you want to add to the pagination nav parent.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the pagination nav parent.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The pagination item text - usually a page number.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ The link's URL.
+ |
+
+
+
+ | boolean |
+
+ Set to true to indicate the current page the user is on.
+ |
+
+
+
+ | boolean |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for previous
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the previous page. Defaults to 'Previous page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the previous page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The previous page's URL.
+ |
+
+
+
+ | object |
+
+ The HTML attributes (for example, data attributes) you want to add to the anchor.
+ |
+
+
+
+
+ Options for next
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ The link text to the next page. Defaults to 'Next page', where 'page' is visually hidden.
+ |
+
+
+
+ | string |
+
+ The optional label that goes underneath the link to the next page, providing further context for the user about where the link goes.
+ |
+
+
+
+ | string |
+
+ Required.
+ The next page's URL.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/pagination/macro.njk"</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
]
}) }}
-
+
+
+
+
+
+
+
+
+
<div class="govuk-panel govuk-panel--confirmation">
+ <h1 class="govuk-panel__title">
Application complete
</h1>
<div class="govuk-panel__body">
@@ -1158,112 +1157,114 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | integer |
+
+ Heading level, from 1 to 6. Default is 1.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a call block.
+ |
+
+
+
+ | string |
+
+ Classes to add to the panel container.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/panel/macro.njk"</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>"
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | integer |
+
+ Heading level, from 1 to 6. Default is 1.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | nunjucks-block |
+
+ Not strictly a parameter but Nunjucks code convention. Using a call block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire panel component in a call block.
+ |
+
+
+
+ | string |
+
+ Classes to add to the panel container.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/panel/macro.njk"</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>"
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the tag component.
+
+ See tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the phase banner container.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/phase-banner/macro.njk"</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.'
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the tag component.
+
+ See tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the phase banner container.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/phase-banner/macro.njk"</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.'
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the tag component.
+
+ See tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the phase banner container.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/phase-banner/macro.njk"</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.'
}) }}
-
+
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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 @@
]
}) }}
-
+
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
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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.
+
+
+
+
+
+
<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>
-
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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
]
}) }}
-
+
Radio items with hints
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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
]
}) }}
-
+
Radio items with a text divider
+
+
+
+
+
+
+
+
<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>
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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
]
}) }}
-
+
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.
+
+
+
+
+
+
<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"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"contact-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"contact"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"phone"</span> <span class="hljs-attr">data-aria-controls</span>=<span class="hljs-string">"conditional-contact-2"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"contact-2"</span>></span>
- Phone
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__conditional govuk-radios__conditional--hidden"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"conditional-contact-2"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"contact-by-phone"</span>></span>
- Phone number
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-one-third"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"contact-by-phone"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"contact-by-phone"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"tel"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"tel"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"contact-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"contact"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">data-aria-controls</span>=<span class="hljs-string">"conditional-contact-3"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"contact-3"</span>></span>
- Text message
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__conditional govuk-radios__conditional--hidden"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"conditional-contact-3"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-form-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"contact-by-text"</span>></span>
- Mobile phone number
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-input govuk-!-width-one-third"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"contact-by-text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"contact-by-text"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"tel"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"tel"</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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>
-
-
<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 'or'.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | object |
+
+ Options for the fieldset component (for example legend).
+
+ See fieldset.
+ |
+
+
+
+ | object |
+
+ Options for the hint component (for example text).
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name attribute for each radio item.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of radio items objects.
+ See items.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the radio container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
+ |
+
+
+
+ | string |
+
+ Required.
+ Value for the radio input.
+ |
+
+
+
+ | object |
+
+ Provide attributes and classes to each radio item label.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Provide hint to each radio item.
+
+ See hint.
+ |
+
+
+
+ | string |
+
+ Divider text to separate radio items, for example the text 'or'.
+ |
+
+
+
+ | boolean |
+
+ Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | string |
+
+ If true, content provided will be revealed when the item is checked.
+ |
+
+
+
+ | html |
+
+ Provide content for the conditional reveal.
+ |
+
+
+
+ | boolean |
+
+ If true, radio will be disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/radios/macro.njk"</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 @@
+
+
+
+
+
+
+
+
<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 @@
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ ID for each select box.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name property for the select.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of option items for the select.
+ See items.
+ |
+
+
+
+ | string |
+
+ Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Label text or HTML by specifying value for either text or html keys.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the select.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the select.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Value for the option item. Defaults to an empty string.
+ |
+
+
+
+ | string |
+
+ Required.
+ Text for the option item.
+ |
+
+
+
+ | boolean |
+
+ Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | boolean |
+
+ Sets the option item as disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the option.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/select/macro.njk"</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 @@
]
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ ID for each select box.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name property for the select.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of option items for the select.
+ See items.
+ |
+
+
+
+ | string |
+
+ Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Label text or HTML by specifying value for either text or html keys.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the select.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the select.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Value for the option item. Defaults to an empty string.
+ |
+
+
+
+ | string |
+
+ Required.
+ Text for the option item.
+ |
+
+
+
+ | boolean |
+
+ Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | boolean |
+
+ Sets the option item as disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the option.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/select/macro.njk"</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
]
}) }}
-
+
Select with hint
+
+
+
+
+
+
+
+
<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
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ ID for each select box.
+ |
+
+
+
+ | string |
+
+ Required.
+ Name property for the select.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of option items for the select.
+ See items.
+ |
+
+
+
+ | string |
+
+ Value for the option which should be selected. Use this as an alternative to setting the selected option on each individual item.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Label text or HTML by specifying value for either text or html keys.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the select.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the select.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Value for the option item. Defaults to an empty string.
+ |
+
+
+
+ | string |
+
+ Required.
+ Text for the option item.
+ |
+
+
+
+ | boolean |
+
+ Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
+ |
+
+
+
+ | boolean |
+
+ Sets the option item as disabled.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the option.
+ |
+
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/select/macro.njk"</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"
}
]
+
}) }}
-
+
+
+
+
+
+
+
+
+
<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>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-skip-link-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-skip-link-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 skip 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 skip 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">href</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The value of the skip link’s <code>href</code> attribute. Defaults to <code>#content</code> if you do not provide a 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 the skip 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 skip link.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text to use within the skip link component. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML to use within the skip link component. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ The value of the skip link’s href attribute. Defaults to #content if you do not provide a value.
+ |
+
+
+
+ | string |
+
+ Classes to add to the skip link.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the skip link.
+ |
+
+
+
+
+
-
<div class="app-example__code">
- <pre data-module="app-copy" tabindex="0"><code class="hljs js"><p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"govuk-body"</span>>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.</p>
-
-
{% 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"
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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>
-
<details class="govuk-details app-options" data-module="govuk-details" id="options-skip-link-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-skip-link-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 skip 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 skip 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">href</th>
- <td class="govuk-table__cell ">string</td>
- <td class="govuk-table__cell ">
- The value of the skip link’s <code>href</code> attribute. Defaults to <code>#content</code> if you do not provide a 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 the skip 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 skip link.
- </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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ If html is set, this is not required. Text to use within the skip link component. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Required.
+ If text is set, this is not required. HTML to use within the skip link component. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ The value of the skip link’s href attribute. Defaults to #content if you do not provide a value.
+ |
+
+
+
+ | string |
+
+ Classes to add to the skip link.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the skip link.
+ |
+
+
+
+
+
-
<div class="app-example__code">
- <pre data-module="app-copy" tabindex="0"><code class="hljs js"><p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"govuk-body"</span>>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.</p>
-
-
{% 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"
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of row item objects.
+ See rows.
+ |
+
+
+
+ | string |
+
+ Classes to add to the container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the row div.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+
+ |
+
+
+
+ | string |
+
+ Classes to add to the key wrapper.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the value wrapper.
+ |
+
+
+
+ | string |
+
+ Classes to add to the actions wrapper.
+ |
+
+
+
+ | array |
+
+ Array of action item objects.
+ See actions.items.
+ |
+
+
+
+
+ Options for actions.items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute for an action item.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the action item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/summary-list/macro.njk"</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 @@
]
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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>
-
<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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of row item objects.
+ See rows.
+ |
+
+
+
+ | string |
+
+ Classes to add to the container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the row div.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+
+ |
+
+
+
+ | string |
+
+ Classes to add to the key wrapper.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the value wrapper.
+ |
+
+
+
+ | string |
+
+ Classes to add to the actions wrapper.
+ |
+
+
+
+ | array |
+
+ Array of action item objects.
+ See actions.items.
+ |
+
+
+
+
+ Options for actions.items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute for an action item.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the action item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/summary-list/macro.njk"</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>'
}
}
]
}) }}
-
+
Adding actions to each row
+
+
+
+
+
+
+
+
<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
-
<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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of row item objects.
+ See rows.
+ |
+
+
+
+ | string |
+
+ Classes to add to the container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the row div.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+
+ |
+
+
+
+ | string |
+
+ Classes to add to the key wrapper.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the value wrapper.
+ |
+
+
+
+ | string |
+
+ Classes to add to the actions wrapper.
+ |
+
+
+
+ | array |
+
+ Array of action item objects.
+ See actions.items.
+ |
+
+
+
+
+ Options for actions.items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute for an action item.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the action item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/summary-list/macro.njk"</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
]
}) }}
-
+
Adding actions to each row
+
+
+
+
+
+
+
+
<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
-
<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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of row item objects.
+ See rows.
+ |
+
+
+
+ | string |
+
+ Classes to add to the container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the row div.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+
+ |
+
+
+
+ | string |
+
+ Classes to add to the key wrapper.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the value wrapper.
+ |
+
+
+
+ | string |
+
+ Classes to add to the actions wrapper.
+ |
+
+
+
+ | array |
+
+ Array of action item objects.
+ See actions.items.
+ |
+
+
+
+
+ Options for actions.items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute for an action item.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the action item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/summary-list/macro.njk"</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
]
}) }}
-
+
Removing the borders
+
+
+
+
+
+
+
+
<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>
-
<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'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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of row item objects.
+ See rows.
+ |
+
+
+
+ | string |
+
+ Classes to add to the container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the row div.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Required.
+
+ |
+
+
+
+ | string |
+
+ Classes to add to the key wrapper.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the value wrapper.
+ |
+
+
+
+ | string |
+
+ Classes to add to the actions wrapper.
+ |
+
+
+
+ | array |
+
+ Array of action item objects.
+ See actions.items.
+ |
+
+
+
+
+ Options for actions.items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The value of the link's href attribute for an action item.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the action item.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/summary-list/macro.njk"</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>'
}
}
]
}) }}
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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 @@
]
}) }}
-
+
Table captions
+
+
+
+
+
+
+
+
<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
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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
]
}) }}
-
+
+
+
<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 @@
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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 @@
]
}) }}
-
+
Numbers in a table
+
+
+
+
+
+
+
+
<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>
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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
]
}) }}
-
+
Custom column widths
+
+
+
+
+
+
+
+
<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
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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
]
}) }}
-
+
Custom column widths
+
+
+
+
+
+
+
+
<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
-
<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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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 "numeric".
- </td>
- </tr>
- <tr class="govuk-table__row">
- <th class="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
+
+
+
+
+
+
+
+
+
+
+
+ | array |
+
+ Required.
+ Array of table rows and cells.
+ See rows.
+ |
+
+
+
+ | array |
+
+ Array of table head cells.
+ See head.
+ |
+
+
+
+ | string |
+
+ Caption text
+ |
+
+
+
+ | string |
+
+ Classes for caption text size. Classes should correspond to the available typography heading classes.
+ |
+
+
+
+ | boolean |
+
+ If set to true, first cell in table row will be a TH instead of a TD.
+ |
+
+
+
+ | string |
+
+ Classes to add to the table container.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table container.
+ |
+
+
+
+
+ Options for rows
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table row cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the table cell.
+ |
+
+
+
+
+ Options for head
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ If html is set, this is not required. Text for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ If text is set, this is not required. HTML for table head cells. If html is provided, the text option will be ignored.
+ |
+
+
+
+ | string |
+
+ Specify format of a cell. Currently we only use "numeric".
+ |
+
+
+
+ | string |
+
+ Classes to add to the table head cell.
+ |
+
+
+
+ | integer |
+
+ Specify how many columns a cell extends.
+ |
+
+
+
+ | integer |
+
+ Specify how many rows a cell extends.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/table/macro.njk"</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
]
}) }}
-
+
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ This is used for the main component and to compose the ID attribute for each item.
+ |
+
+
+
+ | string |
+
+ String to prefix id for each tab item if no id is specified on each item.
+ |
+
+
+
+ | string |
+
+ Title for the tabs table of contents.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of tab items.
+ See items.
+ |
+
+
+
+ | string |
+
+ Classes to add to the tabs component.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the tabs component.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ Specific ID attribute for the tab item. If omitted, then idPrefix string is required instead.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text label of a tab item.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the tab.
+ |
+
+
+
+ | object |
+
+ Required.
+ Content for the panel
+ See panel.
+ |
+
+
+
+
+ Options for panel
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/tabs/macro.njk"</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 @@
]
}) }}
-
+
How it works
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ This is used for the main component and to compose the ID attribute for each item.
+ |
+
+
+
+ | string |
+
+ String to prefix id for each tab item if no id is specified on each item.
+ |
+
+
+
+ | string |
+
+ Title for the tabs table of contents.
+ |
+
+
+
+ | array |
+
+ Required.
+ Array of tab items.
+ See items.
+ |
+
+
+
+ | string |
+
+ Classes to add to the tabs component.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the tabs component.
+ |
+
+
+
+
+ Options for items
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ Specific ID attribute for the tab item. If omitted, then idPrefix string is required instead.
+ |
+
+
+
+ | string |
+
+ Required.
+ The text label of a tab item.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the tab.
+ |
+
+
+
+ | object |
+
+ Required.
+ Content for the panel
+ See panel.
+ |
+
+
+
+
+ Options for panel
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/tabs/macro.njk"</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
]
}) }}
-
+
+
+
+
+
+
+
+
+
<strong class="govuk-tag">
+ completed
</strong>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/tag/macro.njk"</span> <span class="hljs-keyword">import</span> govukTag -%}
-
-
{{ govukTag({
+
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{{ govukTag({
text: "completed"
}) }}
-
+
Showing one or two statuses
+
+
+
+
+
+
-
@@ -1519,24 +1521,23 @@ Showing multiple statuses
+
+
+
+
+
+
-
@@ -1800,24 +1804,23 @@ Additional colours
+
+
+
+
+
+
+
+
<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"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--green <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--green"</span>></span>
-
- New
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--turquoise <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--turquoise"</span>></span>
-
- Active
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--blue <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--blue"</span>></span>
-
- Pending
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--purple <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--purple"</span>></span>
-
- Received
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--pink <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--pink"</span>></span>
-
- Sent
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--red <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--red"</span>></span>
-
- Rejected
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--orange <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--orange"</span>></span>
-
- Declined
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
-<span class="hljs-tag"><<span class="hljs-name">tr</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">code</span>></span> govuk-tag--yellow <span class="hljs-tag"></<span class="hljs-name">code</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">td</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-table__cell"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">strong</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-tag govuk-tag--yellow"</span>></span>
-
- Delayed
-</strong>
-<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">tr</span>></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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/tag/macro.njk"</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>
-
+
+
+
+
+
+
+
+
+
<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 @@
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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"
}) }}
-
+
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
+
+
+
+
+
+
+
+
<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
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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.
+
+
+
+
+
+
<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
-
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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 @@
+
+
+
+
+
+
-
@@ -2946,53 +2960,57 @@
+
+
+
+
+
+
-
@@ -3446,24 +3471,23 @@ Hint text
+
+
+
+
+
+
+
+
<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
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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"
}) }}
-
+
Asking for whole numbers
+
+
+
+
+
+
-
@@ -4338,422 +4365,423 @@ Asking for decimal numbers
+
+
+
+
+
+
-
@@ -4776,426 +4804,427 @@ Prefixes and suffixes
+
+
+
+
+
+
+
+
<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>
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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
}) }}
-
+
Text inputs with a prefix
+
+
+
+
+
+
+
+
<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>
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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
}) }}
-
+
Text inputs with a suffix
+
+
+
+
+
+
+
+
<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>
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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
}) }}
-
+
Use the autocomplete attribute
-
-
-
<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 "postal-code" or "username". 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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the input.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the input, which is submitted with the form data.
+ |
+
+
+
+ | string |
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+
+
+
+ | string |
+
+ Optional value for inputmode.
+ |
+
+
+
+ | string |
+
+ Optional initial value of the input.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the prefix element.
+ See prefix.
+ |
+
+
+
+ | object |
+
+ Options for the suffix element.
+ See suffix.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the input.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | string |
+
+ Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the input.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the input.
+ |
+
+
+
+
+ Options for prefix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the prefix.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the prefix element.
+ |
+
+
+
+
+ Options for suffix
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Classes to add to the suffix element.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the suffix element.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/input/macro.njk"</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"
}) }}
-
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.
-
+
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 @@ 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.
+
+
+
+
+
+
<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
-
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the textarea.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/textarea/macro.njk"</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
+
+
+
+
+
+
+
+
<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>
-
<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
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Required.
+ The ID of the textarea.
+ |
+
+
+
+ | string |
+
+ Required.
+ The name of the textarea, which is submitted with the form data.
+ |
+
+
+
+ | boolean |
+
+ Optional field to enable or disable the spellcheck attribute on the textarea.
+ |
+
+
+
+ | string |
+
+ Optional number of textarea rows (default is 5 rows).
+ |
+
+
+
+ | string |
+
+ Optional initial value of the textarea.
+ |
+
+
+
+ | string |
+
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
+ |
+
+
+
+ | object |
+
+ Required.
+ Options for the label component.
+
+ See label.
+ |
+
+
+
+ | object |
+
+ Options for the hint component.
+
+ See hint.
+ |
+
+
+
+ | object |
+
+ 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.
+ |
+
+
+
+ | object |
+
+ Options for the form-group wrapper.
+ See formGroup.
+ |
+
+
+
+ | string |
+
+ Classes to add to the textarea.
+ |
+
+
+
+ | string |
+
+ Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the textarea.
+ |
+
+
+
+
+ Options for formGroup
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ Classes to add to the form group (for example to show error state for the whole group).
+ |
+
+
+
+
+ Options for label
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ The value of the for attribute, the ID of the input the label is associated with.
+ |
+
+
+
+ | boolean |
+
+ Whether the label also acts as the heading for the page.
+ |
+
+
+
+ | string |
+
+ Classes to add to the label tag.
+ |
+
+
+
+ | object |
+
+ HTML attributes (for example data attributes) to add to the label tag.
+ |
+
+
+
+
+ Options for hint
+
+
+
+
+
+
+
+
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ 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.
+ |
+
+
+
+ | string |
+
+ Optional ID attribute to add to the hint span tag.
+ |
+
+
+
+ | string |
+
+ Classes to add to the hint span tag.
+ |
+
+
+
+ | object |
+
+ 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">"govuk/components/textarea/macro.njk"</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
}
}) }}
-
+
To start using GOV.UK styles, components and patterns contained here, you’ll need to include GOV.UK Frontend in your project.
There are 2 ways to include GOV.UK Frontend in your project. You can either install it using node package manager (npm) or include the compiled files in your application.
Option 1: install using npm
@@ -1043,7 +1043,7 @@ Option 2: include compiled files
- customise the build, for example, overriding colours or enabling global styles
- use the component Nunjucks templates
-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
+
+
+
+
+
+
-
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
+
+
+
+
+
+
-
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><!DOCTYPE html></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><main></code> element.
- </p>
- <p>
- In the old GOV.UK Template there was no default <code><main></code> element.
- </p>
- <p>
- You can restructure your content so that it does not use a <code><main></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
+
+
+
+
+
+
+
+
<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>
{% 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
+
+
+
+
+
+
+
+
<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>
{% 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
+
+
+
+
+
+
+
+
<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
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+
{{ govukTextarea({
name: "address",
id: "address",
@@ -1418,7 +1430,7 @@ Textarea
}
}) }}
-
+
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
+
+
+
+
+
+
@@ -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:
@@ -1308,24 +1319,23 @@
+
+
+
+
+
+
+
+
<div class="govuk-inset-text">
+ <h2 class="govuk-heading-m">Talk to an advisor</h2>
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
@@ -1333,13 +1343,15 @@
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
- </p>
-</div>
+
</p>
+
+
</div>
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+
{% set contactInformation %}
<h2 class="govuk-heading-m">Talk to an advisor</h2>
<ul class="govuk-list">
@@ -1351,11 +1363,12 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
{% endset %}
+
{{ govukInsetText({
html: contactInformation
}) }}
-
+
@@ -1369,24 +1382,23 @@
+
+
+
+
+
+
+
diff --git a/deploy/public/patterns/cookies-page/index.html b/deploy/public/patterns/cookies-page/index.html
index 2b64c8579e..3b099c0e59 100644
--- a/deploy/public/patterns/cookies-page/index.html
+++ b/deploy/public/patterns/cookies-page/index.html
@@ -1200,29 +1200,28 @@ If a user fails to create an account they might not be able to use your service at all.
Make sure the account creation screen is solely about that task. Do not add any distracting content or links.
-Never use National Insurance numbers to verify a user’s identity
+Never use National Insurance numbers to verify a user’s identity
If you currently use National Insurance numbers to verify identity, find out how to protect your service against fraud.
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index e969cd7631..b87377b6da 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,25 +1151,24 @@ Asking for memorable dates
+
+
+
+
+
+
+
+
<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>
@@ -1183,7 +1182,7 @@ Asking for memorable dates
<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">
@@ -1191,7 +1190,7 @@ Asking for memorable dates
<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">
@@ -1199,17 +1198,19 @@ Asking for memorable dates
<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>
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+
{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
@@ -1225,7 +1226,7 @@ Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index dddbbb09f8..f6c7fffaae 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,24 +1137,23 @@ Start with the harmonised standards, keeping the categories of responses in the same order. Break them down into subcategories if necessary. For example if your service is aimed at a disabled people in particular, you may want to collect more detailed information about their disability. But make sure any categories you use map back to a ‘parent’ category in the harmonised standard.
See the full list of Government Statistical Service harmonised standards if you want to collect other types of equality information. For example, about income or employment status.
-Asking about date of birth (age)
+Asking about date of birth (age)
Use this approach to ask for the user’s date of birth.
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset" role="group" aria-describedby="date-of-birth-hint">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
What is your date of birth?
</h1>
@@ -1323,7 +1332,7 @@ Asking about date of birth (age)
<label class="govuk-label govuk-date-input__label" for="date-of-birth-day">
Day
</label>
- <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="date-of-birth-day" name="date-of-birth-day" type="text" autocomplete="bday-day" inputmode="numeric">
+ <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-of-birth-day" name="date-of-birth-day" type="text" autocomplete="bday-day" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
@@ -1331,7 +1340,7 @@ Asking about date of birth (age)
<label class="govuk-label govuk-date-input__label" for="date-of-birth-month">
Month
</label>
- <input class="govuk-input govuk-date-input__input govuk-input–width-2" id="date-of-birth-month" name="date-of-birth-month" type="text" autocomplete="bday-month" inputmode="numeric">
+ <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-of-birth-month" name="date-of-birth-month" type="text" autocomplete="bday-month" inputmode="numeric">
</div>
</div>
<div class="govuk-date-input__item">
@@ -1339,13 +1348,15 @@ Asking about date of birth (age)
<label class="govuk-label govuk-date-input__label" for="date-of-birth-year">
Year
</label>
- <input class="govuk-input govuk-date-input__input govuk-input–width-4" id="date-of-birth-year" name="date-of-birth-year" type="text" autocomplete="bday-year" inputmode="numeric">
+ <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="date-of-birth-year" name="date-of-birth-year" type="text" autocomplete="bday-year" inputmode="numeric">
</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>
@@ -1354,6 +1365,7 @@
Asking about date of birth (age)
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/button/macro.njk" import govukButton %}
+
{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
@@ -1385,11 +1397,12 @@ Asking about date of birth (age)
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
-
+
@@ -1401,25 +1414,24 @@ Asking about disability
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Do you have any physical or mental health conditions or illness lasting or expected to last 12 months or more?
</h1>
@@ -1444,10 +1456,12 @@ Asking about disability
Prefer not to say
</label>
</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>
@@ -1456,6 +1470,7 @@
Asking about disability
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
{{ govukRadios({
idPrefix: "disability",
name: "disability",
@@ -1484,11 +1499,12 @@ Asking about disability
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
-
+
Asking about disability
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset" aria-describedby="disability-hint">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Do any of your conditions or illnesses reduce your ability to carry out day to day activities?
</h1>
@@ -1551,10 +1566,12 @@ Asking about disability
Prefer not to say
</label>
</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>
@@ -1563,6 +1580,7 @@
Asking about disability
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
{{ govukRadios({
idPrefix: "disability",
name: "disability",
@@ -1598,11 +1616,12 @@ Asking about disability
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
-
+
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
What is your ethnic group?
</h1>
@@ -1677,10 +1695,12 @@ Asking about ethnic group
Prefer not to say
</label>
</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>
@@ -1689,6 +1709,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
@@ -1729,11 +1750,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
-
+
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which of the following best describes your White background?
</h1>
@@ -1792,26 +1813,28 @@ Asking about ethnic group
Any other White background
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-ethnicity-detail-4">
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnicity-detail-4">
<div class="govuk-form-group">
<label class="govuk-label" for="other-description">
How would you describe your background? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
- </div>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__divider"</span>></span>or<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ethnicity-detail-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ethnicity-detail"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"skip"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"ethnicity-detail-6"</span>></span>
- Prefer not to say
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- </fieldset>
-</div>
-<button class="govuk-button" data-module="govuk-button">
+ </div>
+
+ </div>
+ <div class="govuk-radios__divider">or</div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="ethnicity-detail-6" name="ethnicity-detail" type="radio" value="skip">
+ <label class="govuk-label govuk-radios__label" for="ethnicity-detail-6">
+ Prefer not to say
+ </label>
+ </div>
+ </div>
+
+ </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
@@ -1821,6 +1844,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
+
{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
@@ -1832,6 +1856,7 @@ Asking about ethnic group
}
}) }}
{% endset -%}
+
{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
@@ -1871,11 +1896,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which of the following best describes your Mixed or Multiple ethnic groups background?
</h1>
@@ -1938,26 +1963,28 @@ Asking about ethnic group
Any other Mixed or Multiple ethnic background
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-ethnicity-detail-4">
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnicity-detail-4">
<div class="govuk-form-group">
<label class="govuk-label" for="other-description">
How would you describe your background? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
- </div>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__divider"</span>></span>or<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ethnicity-detail-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ethnicity-detail"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"skip"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"ethnicity-detail-6"</span>></span>
- Prefer not to say
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- </fieldset>
-</div>
-<button class="govuk-button" data-module="govuk-button">
+ </div>
+
+ </div>
+ <div class="govuk-radios__divider">or</div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="ethnicity-detail-6" name="ethnicity-detail" type="radio" value="skip">
+ <label class="govuk-label govuk-radios__label" for="ethnicity-detail-6">
+ Prefer not to say
+ </label>
+ </div>
+ </div>
+
+ </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
@@ -1967,6 +1994,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
+
{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
@@ -1978,6 +2006,7 @@ Asking about ethnic group
}
}) }}
{% endset -%}
+
{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
@@ -2017,11 +2046,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which of the following best describes your Asian or Asian British background?
</h1>
@@ -2090,26 +2119,28 @@ Asking about ethnic group
Any other Asian background
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-ethnicity-detail-5">
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnicity-detail-5">
<div class="govuk-form-group">
<label class="govuk-label" for="other-description">
How would you describe your background? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
- </div>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__divider"</span>></span>or<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ethnicity-detail-7"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ethnicity-detail"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"skip"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"ethnicity-detail-7"</span>></span>
- Prefer not to say
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- </fieldset>
-</div>
-<button class="govuk-button" data-module="govuk-button">
+ </div>
+
+ </div>
+ <div class="govuk-radios__divider">or</div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="ethnicity-detail-7" name="ethnicity-detail" type="radio" value="skip">
+ <label class="govuk-label govuk-radios__label" for="ethnicity-detail-7">
+ Prefer not to say
+ </label>
+ </div>
+ </div>
+
+ </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
@@ -2119,6 +2150,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
+
{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
@@ -2130,6 +2162,7 @@ Asking about ethnic group
}
}) }}
{% endset -%}
+
{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
@@ -2173,11 +2206,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which of the following best describes your Black, African, Caribbean or Black British background?
</h1>
@@ -2234,26 +2267,28 @@ Asking about ethnic group
Any other Black, African or Caribbean background
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-ethnicity-detail-3">
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnicity-detail-3">
<div class="govuk-form-group">
<label class="govuk-label" for="other-description">
How would you describe your background? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
- </div>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__divider"</span>></span>or<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ethnicity-detail-5"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ethnicity-detail"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"skip"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"ethnicity-detail-5"</span>></span>
- Prefer not to say
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- </fieldset>
-</div>
-<button class="govuk-button" data-module="govuk-button">
+ </div>
+
+ </div>
+ <div class="govuk-radios__divider">or</div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="ethnicity-detail-5" name="ethnicity-detail" type="radio" value="skip">
+ <label class="govuk-label govuk-radios__label" for="ethnicity-detail-5">
+ Prefer not to say
+ </label>
+ </div>
+ </div>
+
+ </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
@@ -2263,6 +2298,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
+
{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
@@ -2274,6 +2310,7 @@ Asking about ethnic group
}
}) }}
{% endset -%}
+
{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
@@ -2309,11 +2346,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
+
+
+
+
+
+
+
+
<div class="govuk-form-group">
+ <fieldset class="govuk-fieldset">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Which of the following best describes your background?
</h1>
@@ -2364,26 +2401,28 @@ Asking about ethnic group
Any other ethnic group
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-ethnicity-detail-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-ethnicity-detail-2">
<div class="govuk-form-group">
<label class="govuk-label" for="other-description">
How would you describe your background? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
- </div>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__divider"</span>></span>or<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios__input"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ethnicity-detail-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ethnicity-detail"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"skip"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-label govuk-radios__label"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"ethnicity-detail-4"</span>></span>
- Prefer not to say
- <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- </fieldset>
-</div>
-<button class="govuk-button" data-module="govuk-button">
+ </div>
+
+ </div>
+ <div class="govuk-radios__divider">or</div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="ethnicity-detail-4" name="ethnicity-detail" type="radio" value="skip">
+ <label class="govuk-label govuk-radios__label" for="ethnicity-detail-4">
+ Prefer not to say
+ </label>
+ </div>
+ </div>
+
+ </fieldset>
+</div>
+
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
@@ -2393,6 +2432,7 @@
Asking about ethnic group
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
+
{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
@@ -2404,6 +2444,7 @@ Asking about ethnic group
}
}) }}
{% endset -%}
+
{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
@@ -2435,11 +2476,12 @@ Asking about ethnic group
}
]
}) }}
+
{{ govukButton({
text: "Continue"
}) }}
- user research by the Race Disparity Unit
- examples of ways to ask about ethnic groups from a number of different government services
-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 @@ 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
{% 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
+
+
+
+
+
+
+
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 @@ 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.
-
+
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.
On the right hand sidebar of content pages that are part of the step by step navigation.
- 
+
As a standalone page.
- 
+
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.
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
+
+
+
+
+
+
+
+
<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"></<span class="hljs-name">fieldset</span>></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>
{% 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
+
+
+
+
+
+
+
+
<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"></<span class="hljs-name">fieldset</span>></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>
{% 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 @@ Tell users why you might contact them and when.
Do not display telephone numbers as links on devices that cannot make calls
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 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
+
+
@@ -1034,14 +1033,13 @@
-
+
@@ -1162,90 +1181,100 @@ Customised page template
+
+
+
+
+
+
+
+
<!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">
-
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+
+
<link href="/govuk-frontend/all.css" rel="stylesheet">
-
-
-
+
+
- <meta property="og:image" content="<YOUR-DOMAIN>/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="<YOUR-DOMAIN>/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"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-row"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-two-thirds"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__heading govuk-heading-m"</span>></span>Cookies on [name of service]<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-cookie-banner__content"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We use some essential cookies to make this service work.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></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"></<span class="hljs-name">p</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button-group"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"accept"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Accept analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"reject"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"cookies"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-button"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-button"</span>></span>
- Reject analytics cookies
- <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>View cookies<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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">
-
- <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">
+
+ <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>
-
-
<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"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"navigation"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__navigation-list"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__navigation-item govuk-header__navigation-item--active"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#1"</span>></span>
- Navigation item 1
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__navigation-item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#2"</span>></span>
- Navigation item 2
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__navigation-item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-header__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#3"</span>></span>
- Navigation item 3
- <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-back-link"</span>></span>Back<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ </div>
-<span class="hljs-tag"><<span class="hljs-name">main</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-main-wrapper app-main-class"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"main-content"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"main"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Customised page template<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">main</span>></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"><<span class="hljs-name">svg</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">focusable</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__licence-logo"</span> <span class="hljs-attr">xmlns</span>=<span class="hljs-string">"http://www.w3.org/2000/svg"</span> <span class="hljs-attr">viewBox</span>=<span class="hljs-string">"0 0 483.2 195.7"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"17"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"41"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">fill</span>=<span class="hljs-string">"currentColor"</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"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"</span> /></span>
- <span class="hljs-tag"></<span class="hljs-name">svg</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__licence-description"</span>></span>
- All content is available under the
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__link"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"license"</span>></span>Open Government Licence v3.0<span class="hljs-tag"></<span class="hljs-name">a</span>></span>, except where otherwise stated
- <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__meta-item"</span>></span>
- <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-footer__link govuk-footer__copyright-logo"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"</span>></span>© Crown copyright<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
- <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
-<span class="hljs-tag"></<span class="hljs-name">div</span>></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>
{# 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 <header> #}
+
+ {# 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="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>",
+ 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