diff --git a/deploy/public/components/accordion/index.html b/deploy/public/components/accordion/index.html
index cae88f310d..e8986d9980 100644
--- a/deploy/public/components/accordion/index.html
+++ b/deploy/public/components/accordion/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
accordion
example in a new tab
@@ -1208,8 +1207,6 @@
-
-
@@ -1217,8 +1214,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1227,7 +1223,6 @@
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
@@ -1238,7 +1233,6 @@
-
id
string
@@ -1289,7 +1283,6 @@
-
heading.text
string
@@ -1346,13 +1339,11 @@
-
-
+
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-default",
items: [
@@ -1445,8 +1436,7 @@ Section heading buttons
- Open this
-
+ Open this
accordion second
example in a new tab
@@ -1515,8 +1505,6 @@ Section heading buttons
-
-
@@ -1524,8 +1512,7 @@ Section heading buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1534,7 +1521,6 @@
Section heading buttons
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
@@ -1545,7 +1531,6 @@ Section heading buttons
-
id
string
@@ -1596,7 +1581,6 @@ Section heading buttons
-
heading.text
string
@@ -1653,13 +1637,11 @@ Section heading buttons
-
-
+
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-default",
items: [
@@ -1714,8 +1696,7 @@ Adding a summary line
- Open this
-
+ Open this
accordion with summary sections
example in a new tab
@@ -1863,8 +1844,6 @@ Adding a summary line
-
-
@@ -1872,8 +1851,7 @@ Adding a summary line
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1882,7 +1860,6 @@
Adding a summary line
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
@@ -1893,7 +1870,6 @@ Adding a summary line
-
id
string
@@ -1944,7 +1920,6 @@ Adding a summary line
-
heading.text
string
@@ -2001,13 +1976,11 @@ Adding a summary line
-
-
+
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-with-summary-sections",
items: [
diff --git a/deploy/public/components/accordion/with-summary-section/index.html b/deploy/public/components/accordion/with-summary-section/index.html
index e4b63d2e17..aac6c2e304 100644
--- a/deploy/public/components/accordion/with-summary-section/index.html
+++ b/deploy/public/components/accordion/with-summary-section/index.html
@@ -52,7 +52,6 @@
-
diff --git a/deploy/public/components/back-link/index.html b/deploy/public/components/back-link/index.html
index eea7d37fb5..b6e6749017 100644
--- a/deploy/public/components/back-link/index.html
+++ b/deploy/public/components/back-link/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
back link
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
text
string
@@ -1223,19 +1217,18 @@
-
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
-{{ govukBackLink({
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
+
@@ -1254,8 +1247,7 @@ How it works
- Open this
-
+ Open this
back link second
example in a new tab
@@ -1275,8 +1267,6 @@ How it works
-
-
@@ -1284,8 +1274,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1294,7 +1283,6 @@
How it works
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
@@ -1305,7 +1293,6 @@ How it works
-
text
string
@@ -1345,19 +1332,18 @@ How it works
-
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
-{{ govukBackLink({
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
+
diff --git a/deploy/public/components/breadcrumbs/index.html b/deploy/public/components/breadcrumbs/index.html
index ce48f729a7..aa18d5f246 100644
--- a/deploy/public/components/breadcrumbs/index.html
+++ b/deploy/public/components/breadcrumbs/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
breadcrumbs
example in a new tab
@@ -1164,8 +1163,6 @@
-
-
@@ -1173,8 +1170,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1183,7 +1179,6 @@
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
@@ -1194,7 +1189,6 @@
-
items
array
@@ -1237,7 +1231,6 @@
-
text
string
@@ -1271,14 +1264,13 @@
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
items: [
{
text: "Home",
@@ -1295,7 +1287,7 @@
]
}) }}
-
+
@@ -1313,8 +1305,7 @@ How it works
- Open this
-
+ Open this
breadcrumbs second
example in a new tab
@@ -1346,8 +1337,6 @@ How it works
-
-
@@ -1355,8 +1344,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1365,7 +1353,6 @@
How it works
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
@@ -1376,7 +1363,6 @@ How it works
-
items
array
@@ -1419,7 +1405,6 @@ How it works
-
text
string
@@ -1453,14 +1438,13 @@ How it works
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
items: [
{
text: "Home",
@@ -1477,7 +1461,7 @@
How it works
]
}) }}
-
+
@@ -1489,8 +1473,7 @@ Collapsing breadcrumbs on mobi
- Open this
-
+ Open this
breadcrumbs that collapse on mobile
example in a new tab
@@ -1528,8 +1511,6 @@ Collapsing breadcrumbs on mobi
-
-
@@ -1537,8 +1518,7 @@ Collapsing breadcrumbs on mobi
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1547,7 +1527,6 @@
Collapsing breadcrumbs on mobi
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
@@ -1558,7 +1537,6 @@ Collapsing breadcrumbs on mobi
-
items
array
@@ -1601,7 +1579,6 @@ Collapsing breadcrumbs on mobi
-
text
string
@@ -1635,14 +1612,13 @@ Collapsing breadcrumbs on mobi
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
collapseOnMobile: true,
items: [
{
@@ -1668,7 +1644,7 @@
Collapsing breadcrumbs on mobi
]
}) }}
-
+
diff --git a/deploy/public/components/button/index.html b/deploy/public/components/button/index.html
index 865df790e8..14cd164eba 100644
--- a/deploy/public/components/button/index.html
+++ b/deploy/public/components/button/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
button
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
element
string
@@ -1273,18 +1267,17 @@
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
-
+
@@ -1315,8 +1308,7 @@ Default buttons
- Open this
-
+ Open this
button second
example in a new tab
@@ -1338,8 +1330,6 @@ Default buttons
-
-
@@ -1347,8 +1337,7 @@ Default buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1357,7 +1346,6 @@
Default buttons
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
@@ -1368,7 +1356,6 @@ Default buttons
-
element
string
@@ -1458,18 +1445,17 @@ Default buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
-
+
@@ -1481,8 +1467,7 @@ Start buttons
- Open this
-
+ Open this
start now button
example in a new tab
@@ -1506,8 +1491,6 @@ Start buttons
-
-
@@ -1515,8 +1498,7 @@ Start buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1525,7 +1507,6 @@
Start buttons
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
@@ -1536,7 +1517,6 @@ Start buttons
-
element
string
@@ -1626,20 +1606,19 @@ Start buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Start now",
href: "#",
isStartButton: true
}) }}
-
+
@@ -1651,8 +1630,7 @@ Secondary buttons
- Open this
-
+ Open this
secondary button
example in a new tab
@@ -1674,8 +1652,6 @@ Secondary buttons
-
-
@@ -1683,8 +1659,7 @@ Secondary buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1693,7 +1668,6 @@
Secondary buttons
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
@@ -1704,7 +1678,6 @@ Secondary buttons
-
element
string
@@ -1794,19 +1767,18 @@ Secondary buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Find address",
- classes: "govuk-button--secondary"
+ classes: "govuk-button–secondary"
}) }}
-
+
@@ -1818,8 +1790,7 @@ Warning buttons
- Open this
-
+ Open this
warning button
example in a new tab
@@ -1841,8 +1812,6 @@ Warning buttons
-
-
@@ -1850,8 +1819,7 @@ Warning buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1860,7 +1828,6 @@
Warning buttons
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
@@ -1871,7 +1838,6 @@ Warning buttons
-
element
string
@@ -1961,19 +1927,18 @@ Warning buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Delete account",
- classes: "govuk-button--warning"
+ classes: "govuk-button–warning"
}) }}
-
+
@@ -1989,8 +1954,7 @@ Disabled buttons
- Open this
-
+ Open this
disabled button
example in a new tab
@@ -2012,8 +1976,6 @@ Disabled buttons
-
-
@@ -2021,8 +1983,7 @@ Disabled buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2031,7 +1992,6 @@
Disabled buttons
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
@@ -2042,7 +2002,6 @@ Disabled buttons
-
element
string
@@ -2132,19 +2091,18 @@ Disabled buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Disabled button",
disabled: true
}) }}
-
+
@@ -2155,8 +2113,7 @@ Grouping buttons
- Open this
-
+ Open this
secondary button combo
example in a new tab
@@ -2176,34 +2133,29 @@ Grouping buttons
Save and continue
</button>
- <button class="govuk-button govuk-button--secondary" data-module="govuk-button">
+ <button class="govuk-button govuk-button–secondary" data-module="govuk-button">
Save as draft
</button>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2214,7 +2166,6 @@ Grouping buttons
-
element
string
@@ -2302,27 +2253,24 @@ Grouping buttons
-
-
-
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-<div class="govuk-button-group">
+<div class="govuk-button-group">
{{ govukButton({
text: "Save and continue"
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Save as draft",
- classes: "govuk-button--secondary"
+ classes: "govuk-button–secondary"
}) }}
</div>
-
+
@@ -2332,8 +2280,7 @@ Grouping buttons
- Open this
-
+ Open this
button group
example in a new tab
@@ -2353,32 +2300,27 @@ Grouping buttons
Continue
</button>
- <a class="govuk-link" href="#">Cancel</a>
+ <a class="govuk-link" href="#">Cancel</a>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2389,7 +2331,6 @@ Grouping buttons
-
element
string
@@ -2477,24 +2418,21 @@ Grouping buttons
-
-
-
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-<div class="govuk-button-group">
+<div class="govuk-button-group">
{{ govukButton({
text: "Continue"
- }) }}
-
- <a class="govuk-link" href="#">Cancel</a>
+ }) }}
+ <a class="govuk-link" href="#">Cancel</a>
</div>
-
+
@@ -2514,8 +2452,7 @@ Stop us
- Open this
-
+ Open this
button with prevent double click
example in a new tab
@@ -2537,8 +2474,6 @@ Stop us
-
-
@@ -2546,8 +2481,7 @@ Stop us
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2556,7 +2490,6 @@
Stop us
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
@@ -2567,7 +2500,6 @@ Stop us
-
element
string
@@ -2657,19 +2589,18 @@ Stop us
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Confirm and send",
preventDoubleClick: true
}) }}
-
+
diff --git a/deploy/public/components/character-count/index.html b/deploy/public/components/character-count/index.html
index 09fd484b2f..b102f0c5a4 100644
--- a/deploy/public/components/character-count/index.html
+++ b/deploy/public/components/character-count/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
character count
example in a new tab
@@ -1159,35 +1158,29 @@
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
- <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+
<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 200 characters
- </div>
-
-</div>
+ </div>
+</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1198,7 +1191,6 @@
-
id
string
@@ -1257,230 +1249,224 @@
object
Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+See <a href="#options-character-count-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-character-count-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-character-count-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">spellcheck</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">countMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the count message.
+ See <a href="#options-character-count-example--countMessage">countMessage</a>.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--countMessage">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the count message.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ govukCharacterCount({
+{{ govukCharacterCount({
name: "with-hint",
id: "with-hint",
maxlength: 200,
label: {
text: "Can you provide more detail?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
hint: {
@@ -1488,7 +1474,7 @@
}
}) }}
-
+
@@ -1521,8 +1507,7 @@ How it works
- Open this
-
+ Open this
character count second
example in a new tab
@@ -1549,35 +1534,29 @@ How it works
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
- <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+ <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 200 characters
- </div>
-
-</div>
+ </div>
+</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1588,7 +1567,6 @@ How it works
-
id
string
@@ -1647,955 +1625,572 @@ How it works
object
Required.
- Options for the label component.
+ Options for the label component.
+See <a href="#options-character-count-second-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-character-count-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-character-count-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">spellcheck</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">countMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the count message.
+ See <a href="#options-character-count-second-example--countMessage">countMessage</a>.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--countMessage">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the count message.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- See hint.
-
-
-
- errorMessage
- 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.
+{{ govukCharacterCount({
+ name: "with-hint",
+ id: "with-hint",
+ maxlength: 200,
+ label: {
+ text: "Can you provide more detail?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information like your National Insurance number or credit card details."
+ }
+}) }}
+
+
+
- See errorMessage.
-
-
+
+
+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-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">
+ You can enter up to 200 characters
+ </div>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
- formGroup
- object
+ id
+ string
- Options for the form-group wrapper.
- See formGroup.
+ Required.
+ The ID of the textarea.
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-
-{{ govukCharacterCount({
- name: "with-hint",
- id: "with-hint",
- maxlength: 200,
- label: {
- text: "Can you provide more detail?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information like your National Insurance number or credit card details."
- }
-}) }}
-
-
-
-
-
-
-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-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">
- You can enter up to 200 characters
- </div>
-
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- {{ govukCharacterCount({
- id: "label-as-page-heading",
- name: "label-as-page-heading",
- maxlength: 200,
- label: {
- text: "Describe the nature of your event"
- }
-}) }}
-
-
-
-
-
-
-Consider if a word count is more helpful
-In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
-Do this by setting data-maxwords in the component markup. For example, data-maxwords="150" will set a word limit of 150.
-
-
-
-
-
-
-
- <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">
- You can enter up to 150 words
- </div>
-
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
+ name
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.
+ The name of the textarea, which is submitted with the form data.
- for
+ rows
string
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ Optional initial value of the textarea.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- html
+ maxwords
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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-
-{{ govukCharacterCount({
- name: "word-count",
- id: "word-count",
- maxwords: 150,
+ {{ govukCharacterCount({
+ id: "label-as-page-heading",
+ name: "label-as-page-heading",
+ maxlength: 200,
label: {
- text: "Enter a job description",
- classes: "govuk-label--l",
- isPageHeading: true
+ text: "Describe the nature of your event"
}
}) }}
@@ -2604,70 +2199,61 @@ Consider if a word count is mo
-Avoid narrow limits
-
When using a character count, try to set the limit higher than most users will need. Find out what this is by doing user research and data analysis.
-If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.
-To do this, set a threshold in the component markup. For example, data-threshold="75" will show the count message only when users have entered 75% of the limit.
-Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown — though you might choose to include the character limit in the hint text.
-
+Consider if a word count is more helpful
+In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
+Do this by setting data-maxwords in the component markup. For example, data-maxwords="150" will set a word limit of 150.
+
-
+
-
+
-
-
+
+
- <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="112" data-threshold="75">
+ <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="threshold">
- Can you provide more detail?
+ <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="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">
- You can enter up to 112 characters
+ <textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
</div>
-</div>
+ <div id="word-count-info" class="govuk-hint govuk-character-count__message">
+ You can enter up to 150 words
+ </div>
+</div>
-
-
-
-
-
+
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2677,7 +2263,6 @@ Avoid narrow limits
-
id
string
@@ -2702,339 +2287,324 @@ Avoid narrow limits
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
+ value
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.
+ Optional initial value of the textarea.
- html
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- id
+ maxwords
string
- Optional ID attribute to add to the hint span tag.
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ govukCharacterCount({
- name: "threshold",
- id: "threshold",
- maxlength: 112,
- threshold: 75,
- value: "Type another letter into this field after this message to see the threshold feature",
+{{ govukCharacterCount({
+ name: "word-count",
+ id: "word-count",
+ maxwords: 150,
label: {
- text: "Can you provide more detail?",
- classes: "govuk-label--l",
+ text: "Enter a job description",
+ classes: "govuk-label–l",
isPageHeading: true
}
}) }}
-
+
-Error messages
-Error messages should be styled like this:
-
+Avoid narrow limits
+When using a character count, try to set the limit higher than most users will need. Find out what this is by doing user research and data analysis.
+If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.
+To do this, set a threshold in the component markup. For example, data-threshold="75" will show the count message only when users have entered 75% of the limit.
+Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown — though you might choose to include the character limit in the hint text.
+
-
+
-
+
-
-
+
+
- <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
+ <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>
- <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">
- You can enter up to 350 characters
+ <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>
+ <div id="threshold-info" class="govuk-hint govuk-character-count__message">
+ You can enter up to 112 characters
+ </div>
+</div>
-
-
-
-
-
+
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3044,7 +2614,6 @@ Error messages
-
id
string
@@ -3103,110 +2672,293 @@ Error messages
object
Required.
- Options for the label component.
+ 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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- See hint.
-
-
-
- errorMessage
- 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.
+{{ govukCharacterCount({
+ name: "threshold",
+ id: "threshold",
+ maxlength: 112,
+ threshold: 75,
+ 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",
+ isPageHeading: true
+ }
+}) }}
+
+
+
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
+Error messages
+Error messages should be styled like this:
+
+
+
+
+
+
+
+ <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">
+ You can enter up to 350 characters
+ </div>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -3215,119 +2967,283 @@ Error messages
-
- text
+ id
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.
+ The ID of the textarea.
- html
+ name
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.
+ The name of the textarea, which is submitted with the form data.
- for
+ rows
string
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ Optional initial value of the textarea.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- html
+ maxwords
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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ 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: {
@@ -3335,7 +3251,7 @@
Error messages
}
}) }}
-
+
diff --git a/deploy/public/components/checkboxes/index.html b/deploy/public/components/checkboxes/index.html
index dceb8d4220..7a91573ed1 100644
--- a/deploy/public/components/checkboxes/index.html
+++ b/deploy/public/components/checkboxes/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
checkboxes
example in a new tab
@@ -1178,32 +1177,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1214,7 +1208,6 @@
-
describedBy
string
@@ -1226,345 +1219,339 @@
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -1586,7 +1573,7 @@
]
}) }}
-
+
@@ -1619,8 +1606,7 @@ If you’re asking one questio
- Open this
-
+ Open this
checkboxes second
example in a new tab
@@ -1666,32 +1652,27 @@ If you’re asking one questio
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1702,7 +1683,6 @@ If you’re asking one questio
-
describedBy
string
@@ -1714,345 +1694,339 @@ If you’re asking one questio
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
+ 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>
+
+
+
- See hint.
-
-
-
- errorMessage
- 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.
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ 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: {
@@ -2074,7 +2048,7 @@
If you’re asking one questio
]
}) }}
-
+
@@ -2085,8 +2059,7 @@ If you’re asking m
- Open this
-
+ Open this
checkboxes without a heading
example in a new tab
@@ -2130,32 +2103,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2166,7 +2134,6 @@ If you’re asking m
-
describedBy
string
@@ -2178,366 +2145,360 @@ If you’re asking m
fieldset
object
- Options for the fieldset component (for example legend).
+ 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>
+
+
+
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
- idPrefix: "waste",
- name: "waste",
- fieldset: {
- legend: {
- text: "Which types of waste do you transport?"
- }
- },
- hint: {
- text: "Select all that apply."
- },
- items: [
- {
- value: "carcasses",
- text: "Waste from animal carcasses"
- },
- {
- value: "mines",
- text: "Waste from mines or quarries"
- },
- {
- value: "farm",
- text: "Farm or agricultural waste"
- }
- ]
-}) }}
-
-
-
+
{{ govukCheckboxes({
+ idPrefix: "waste",
+ name: "waste",
+ fieldset: {
+ legend: {
+ text: "Which types of waste do you transport?"
+ }
+ },
+ hint: {
+ text: "Select all that apply."
+ },
+ items: [
+ {
+ value: "carcasses",
+ text: "Waste from animal carcasses"
+ },
+ {
+ value: "mines",
+ text: "Waste from mines or quarries"
+ },
+ {
+ value: "farm",
+ text: "Farm or agricultural waste"
+ }
+ ]
+}) }}
+
+
+
@@ -2547,8 +2508,7 @@ Checkbox items with hints
- Open this
-
+ Open this
checkbox items with hint
example in a new tab
@@ -2597,393 +2557,381 @@ Checkbox items with hints
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3008,7 +2956,7 @@
Checkbox items with hints
]
}) }}
-
+
@@ -3024,8 +2972,7 @@ Add an option for ‘none’
- Open this
-
+ Open this
checkboxes with 'none' option
example in a new tab
@@ -3078,393 +3025,381 @@ Add an option for ‘none’
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3494,7 +3429,7 @@
Add an option for ‘none’
]
}) }}
-
+
@@ -3504,8 +3439,7 @@ Add an option for ‘none’
- Open this
-
+ Open this
checkboxes with 'none' option showing an error
example in a new tab
@@ -3558,393 +3492,381 @@ Add an option for ‘none’
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3976,7 +3898,7 @@
Add an option for ‘none’
]
}) }}
-
+
@@ -3988,8 +3910,7 @@ Conditionally revealing a re
- Open this
-
+ Open this
checkboxes with conditionally revealing content
example in a new tab
@@ -4027,357 +3948,64 @@ Conditionally revealing a re
Email address
</label>
<input class="govuk-input govuk-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" autocomplete="email">
- </div>
-
- </div>
- <div class="govuk-checkboxes__item">
- <input class="govuk-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-contact-2">
- <label class="govuk-label govuk-checkboxes__label" for="contact-2">
- Phone
- </label>
- </div>
- <div class="govuk-checkboxes__conditional govuk-checkboxes__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-checkboxes__item">
- <input class="govuk-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message" data-aria-controls="conditional-contact-3">
- <label class="govuk-label govuk-checkboxes__label" for="contact-3">
- Text message
- </label>
- </div>
- <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-contact-3">
- <div class="govuk-form-group">
- <label class="govuk-label" for="contact-by-text">
- Mobile phone number
- </label>
- <input class="govuk-input govuk-!-width-one-third" id="contact-by-text" name="contact-by-text" type="tel" autocomplete="tel">
- </div>
-
- </div>
- </div>
-
- </fieldset>
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+ </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-checkboxes__item"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-checkboxes__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">"checkbox"</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-checkboxes__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-checkboxes__conditional govuk-checkboxes__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-checkboxes__item"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-checkboxes__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">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"text message"</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-checkboxes__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-checkboxes__conditional govuk-checkboxes__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>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -4386,63 +4014,344 @@ Conditionally revealing a re
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -4454,9 +4363,8 @@
Conditionally revealing a re
text: "Email address"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -4467,9 +4375,8 @@
Conditionally revealing a re
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -4480,16 +4387,15 @@
Conditionally revealing a re
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukCheckboxes({
+{% endset -%}
+
{{ govukCheckboxes({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you like to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -4520,7 +4426,7 @@
Conditionally revealing a re
]
}) }}
-
+
@@ -4538,8 +4444,7 @@ Smaller checkboxes
- Open this
-
+ Open this
small checkboxes
example in a new tab
@@ -4588,322 +4493,29 @@ Smaller checkboxes
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ Some options are required for the macro to work; these are marked as “Required” in the option description.
-
-
- Primary options
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+
+ 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
Name
@@ -4912,70 +4524,351 @@ Smaller checkboxes
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-small-checkboxes-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-small-checkboxes-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for all checkbox items.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of checkbox items objects.
+ See <a href="#options-small-checkboxes-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">values</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the checkboxes container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the checkbox input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each checkbox item label.
+
+ See <a href="#options-small-checkboxes-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each checkbox item.
+
+ See <a href="#options-small-checkboxes-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate checkbox items, for example the text '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-small-checkboxes-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ govukCheckboxes({
+{{ govukCheckboxes({
idPrefix: "organisation",
name: "organisation",
- classes: "govuk-checkboxes--small",
+ classes: "govuk-checkboxes–small",
fieldset: {
legend: {
text: "Organisation",
isPageHeading: true,
- classes: "govuk-fieldset__legend--m"
+ classes: "govuk-fieldset__legend–m"
}
},
items: [
@@ -4998,7 +4891,7 @@
Smaller checkboxes
]
}) }}
-
+
@@ -5011,8 +4904,7 @@ Error messages
- Open this
-
+ Open this
checkbox items with error
example in a new tab
@@ -5064,32 +4956,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -5100,7 +4987,6 @@ Error messages
-
describedBy
string
@@ -5112,345 +4998,339 @@ Error messages
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-checkbox-items-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for all checkbox items.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of checkbox items objects.
+ See <a href="#options-checkbox-items-with-error-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">values</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the checkboxes container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the checkbox input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each checkbox item label.
+
+ See <a href="#options-checkbox-items-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each checkbox item.
+
+ See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate checkbox items, for example the text '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-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -5478,7 +5358,7 @@
Error messages
]
}) }}
-
+
diff --git a/deploy/public/components/cookie-banner/index.html b/deploy/public/components/cookie-banner/index.html
index e0876d5e6f..c8d85ce80d 100644
--- a/deploy/public/components/cookie-banner/index.html
+++ b/deploy/public/components/cookie-banner/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
default – cookie banner
example in a new tab
@@ -1157,52 +1156,48 @@
<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1213,7 +1208,6 @@
-
ariaLabel
string
@@ -1263,7 +1257,6 @@
-
headingText
string
@@ -1342,7 +1335,6 @@
-
text
string
@@ -1394,21 +1386,18 @@
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -1436,7 +1425,7 @@
]
}) }}
-
+
@@ -1494,8 +1483,7 @@ Option 2: If yo
- Open this
-
+ Open this
server-side implementation – cookie banner
example in a new tab
@@ -1514,54 +1502,49 @@ Option 2: If yo
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1572,7 +1555,6 @@ Option 2: If yo
-
ariaLabel
string
@@ -1622,7 +1604,6 @@ Option 2: If yo
-
headingText
string
@@ -1701,7 +1682,6 @@ Option 2: If yo
-
text
string
@@ -1753,21 +1733,18 @@ Option 2: If yo
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -1797,7 +1774,7 @@
Option 2: If yo
}) }}
</form>
-
+
@@ -1808,8 +1785,7 @@ Option 2: If yo
- Open this
-
+ Open this
server-side implementation with confirmation – cookie banner
example in a new tab
@@ -1828,48 +1804,43 @@ Option 2: If yo
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1880,7 +1851,6 @@ Option 2: If yo
-
ariaLabel
string
@@ -1930,7 +1900,6 @@ Option 2: If yo
-
headingText
string
@@ -2009,7 +1978,6 @@ Option 2: If yo
-
text
string
@@ -2061,20 +2029,17 @@ Option 2: If yo
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set acceptHtml %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2092,7 +2057,7 @@
Option 2: If yo
}) }}
</form>
-
+
@@ -2108,8 +2073,7 @@ Help users ke
- Open this
-
+ Open this
server-side implementation with multiple messages and question visible – cookie banner
example in a new tab
@@ -2128,90 +2092,85 @@ Help users ke
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2222,7 +2181,6 @@ Help users ke
-
ariaLabel
string
@@ -2272,7 +2230,6 @@ Help users ke
-
headingText
string
@@ -2351,7 +2308,6 @@ Help users ke
-
text
string
@@ -2403,29 +2359,24 @@ Help users ke
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2477,7 +2428,7 @@
Help users ke
}) }}
</form>
-
+
@@ -2487,8 +2438,7 @@ Help users ke
- Open this
-
+ Open this
server-side implementation with multiple messages and confirmation visible – cookie banner
example in a new tab
@@ -2507,90 +2457,85 @@ Help users ke
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2601,7 +2546,6 @@ Help users ke
-
ariaLabel
string
@@ -2651,7 +2595,6 @@ Help users ke
-
headingText
string
@@ -2730,7 +2673,6 @@ Help users ke
-
text
string
@@ -2782,29 +2724,24 @@ Help users ke
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2856,7 +2793,7 @@
Help users ke
}) }}
</form>
-
+
@@ -2878,8 +2815,7 @@ Show
- Open this
-
+ Open this
client-side implementation – cookie banner
example in a new tab
@@ -2897,88 +2833,82 @@ 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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2989,7 +2919,6 @@ Show
-
ariaLabel
string
@@ -3039,7 +2968,6 @@ Show
-
headingText
string
@@ -3118,7 +3046,6 @@ Show
-
text
string
@@ -3170,29 +3097,24 @@ Show
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3236,7 +3158,7 @@
Show
]
}) }}
-
+
@@ -3247,8 +3169,7 @@ When the user has accepted cookies
- Open this
-
+ Open this
accepted replacement message – cookie banner
example in a new tab
@@ -3266,88 +3187,82 @@ When the user has accepted cookies<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3358,7 +3273,6 @@ When the user has accepted cookies
-
ariaLabel
string
@@ -3408,7 +3322,6 @@ When the user has accepted cookies
-
headingText
string
@@ -3487,7 +3400,6 @@ When the user has accepted cookies
-
text
string
@@ -3539,29 +3451,24 @@ When the user has accepted cookies
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3605,7 +3512,7 @@
When the user has accepted cookies
-
+
@@ -3615,8 +3522,7 @@ When the user has rejected cookies
- Open this
-
+ Open this
rejected replacement message – cookie banner
example in a new tab
@@ -3634,88 +3540,82 @@ When the user has rejected cookies<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3726,7 +3626,6 @@ When the user has rejected cookies
-
ariaLabel
string
@@ -3776,7 +3675,6 @@ When the user has rejected cookies
-
headingText
string
@@ -3855,7 +3753,6 @@ When the user has rejected cookies
-
text
string
@@ -3907,29 +3804,24 @@ When the user has rejected cookies
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3973,7 +3865,7 @@
When the user has rejected cookies
-
+
@@ -3993,8 +3885,7 @@ If you’re usin
- Open this
-
+ Open this
default – cookie banner second
example in a new tab
@@ -4012,52 +3903,48 @@ If you’re usin
<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4068,7 +3955,6 @@ If you’re usin
-
ariaLabel
string
@@ -4118,7 +4004,6 @@ If you’re usin
-
headingText
string
@@ -4197,7 +4082,6 @@ If you’re usin
-
text
string
@@ -4249,21 +4133,18 @@ If you’re usin
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -4291,7 +4172,7 @@
If you’re usin
]
}) }}
-
+
@@ -4307,8 +4188,7 @@ If you’re u
- Open this
-
+ Open this
non-essential cookies - cookie banner
example in a new tab
@@ -4326,52 +4206,48 @@ 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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4382,7 +4258,6 @@ If you’re u
-
ariaLabel
string
@@ -4432,7 +4307,6 @@ If you’re u
-
headingText
string
@@ -4511,7 +4385,6 @@ If you’re u
-
text
string
@@ -4563,21 +4436,18 @@ If you’re u
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -4605,7 +4475,7 @@
If you’re u
]
}) }}
-
+
diff --git a/deploy/public/components/date-input/index.html b/deploy/public/components/date-input/index.html
index 6b3237d57a..a6ff100439 100644
--- a/deploy/public/components/date-input/index.html
+++ b/deploy/public/components/date-input/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
date input
example in a new tab
@@ -1184,32 +1183,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1220,7 +1214,6 @@
-
id
string
@@ -1248,209 +1241,204 @@
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -1458,7 +1446,7 @@
}
}) }}
-
+
@@ -1479,8 +1467,7 @@ How it works
- Open this
-
+ Open this
date input second
example in a new tab
@@ -1532,32 +1519,27 @@ How it works
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1568,7 +1550,6 @@ How it works
-
id
string
@@ -1596,218 +1577,213 @@ How it works
hint
object
- Options for the hint component.
+ Options for the hint component.
+See <a href="#options-date-input-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See hint.
-
-
-
- errorMessage
- 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.
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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"
- }
- },
- hint: {
- text: "For example, 27 3 2007"
- }
-}) }}
-
-
-
+
{{ govukDateInput({
+ id: "passport-issued",
+ namePrefix: "passport-issued",
+ fieldset: {
+ legend: {
+ text: "When was your passport issued?",
+ isPageHeading: true,
+ classes: "govuk-fieldset__legend–l"
+ }
+ },
+ hint: {
+ text: "For example, 27 3 2007"
+ }
+}) }}
+
+
+
@@ -1818,8 +1794,7 @@ If you’re asking m
- Open this
-
+ Open this
date input without a heading second
example in a new tab
@@ -1869,32 +1844,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1905,7 +1875,6 @@ If you’re asking m
-
id
string
@@ -1933,202 +1902,197 @@ If you’re asking m
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-without-a-heading-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-without-a-heading-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ govukDateInput({
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -2141,7 +2105,7 @@
If you’re asking m
}
}) }}
-
+
@@ -2153,8 +2117,7 @@ Use the autocomplete
- Open this
-
+ Open this
date input to ask for date of birth
example in a new tab
@@ -2206,32 +2169,27 @@ Use the autocomplete
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2242,7 +2200,6 @@ Use the autocomplete
-
id
string
@@ -2270,209 +2227,204 @@ Use the autocomplete
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
+ 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>
+
+
+
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ 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: {
@@ -2481,23 +2433,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"
}
]
}) }}
-
+
@@ -2510,8 +2462,7 @@ Error messages
- Open this
-
+ Open this
date input with errors
example in a new tab
@@ -2566,32 +2517,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2602,7 +2548,6 @@ Error messages
-
id
string
@@ -2630,209 +2575,204 @@ Error messages
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-with-errors-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-with-errors-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -2843,24 +2783,24 @@
Error messages
},
items: [
{
- classes: "govuk-input--width-2 govuk-input--error",
+ classes: "govuk-input–width-2 govuk-input–error",
name: "day",
value: "6"
},
{
- classes: "govuk-input--width-2 govuk-input--error",
+ classes: "govuk-input–width-2 govuk-input–error",
name: "month",
value: "3"
},
{
- classes: "govuk-input--width-4 govuk-input--error",
+ classes: "govuk-input–width-4 govuk-input–error",
name: "year",
value: "2076"
}
]
}) }}
-
+
@@ -2870,8 +2810,7 @@ Error messages
- Open this
-
+ Open this
dates with errors
example in a new tab
@@ -2926,32 +2865,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2962,7 +2896,6 @@ Error messages
-
id
string
@@ -2990,209 +2923,204 @@ Error messages
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -3203,23 +3131,23 @@
Error messages
},
items: [
{
- classes: "govuk-input--width-2",
+ classes: "govuk-input–width-2",
name: "day",
value: "6"
},
{
- classes: "govuk-input--width-2",
+ classes: "govuk-input–width-2",
name: "month",
value: "3"
},
{
- classes: "govuk-input--width-4 govuk-input--error",
+ classes: "govuk-input–width-4 govuk-input–error",
name: "year"
}
]
}) }}
-
+
diff --git a/deploy/public/components/details/index.html b/deploy/public/components/details/index.html
index 6e8f442605..b99acf9556 100644
--- a/deploy/public/components/details/index.html
+++ b/deploy/public/components/details/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
details
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
summaryText
string
@@ -1262,19 +1256,18 @@
-
-
+
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{{ 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."
}) }}
-
+
@@ -1294,8 +1287,7 @@ How it works
- Open this
-
+ Open this
details second
example in a new tab
@@ -1324,8 +1316,6 @@ How it works
-
-
@@ -1333,8 +1323,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1343,7 +1332,6 @@
How it works
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
@@ -1354,7 +1342,6 @@ How it works
-
summaryText
string
@@ -1425,19 +1412,18 @@ How it works
-
-
+
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{{ govukDetails({
+{{ govukDetails({
summaryText: "Help with nationality",
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}) }}
-
+
diff --git a/deploy/public/components/error-message/index.html b/deploy/public/components/error-message/index.html
index 3f70f0f5fd..dfe2910313 100644
--- a/deploy/public/components/error-message/index.html
+++ b/deploy/public/components/error-message/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
error message
example in a new tab
@@ -1188,32 +1187,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1224,7 +1218,6 @@
-
text
string
@@ -1270,21 +1263,19 @@
-
-
-
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ govukDateInput({
+{{ govukDateInput({
fieldset: {
legend: {
text: "When was your passport issued?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -1297,24 +1288,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"
}
]
}) }}
-
+
@@ -1356,8 +1347,6 @@ How it works
-
-
@@ -1365,8 +1354,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1375,7 +1363,6 @@
How it works
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
@@ -1386,7 +1373,6 @@ How it works
-
text
string
@@ -1434,19 +1420,18 @@ How it works
-
-
+
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
-{{ govukErrorMessage({
+{{ govukErrorMessage({
text: "Rhowch eich enw llawn",
visuallyHiddenText: "Gwall"
}) }}
-
+
@@ -1458,8 +1443,7 @@ Legend
- Open this
-
+ Open this
error message with legend
example in a new tab
@@ -1508,32 +1492,27 @@ Legend
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1544,7 +1523,6 @@ Legend
-
text
string
@@ -1590,23 +1568,21 @@ Legend
-
-
-
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -1631,7 +1607,7 @@
Legend
]
}) }}
-
+
@@ -1641,8 +1617,7 @@ Label
- Open this
-
+ Open this
error message with label
example in a new tab
@@ -1673,8 +1648,6 @@ Label
-
-
@@ -1682,8 +1655,7 @@ Label
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1692,7 +1664,6 @@
Label
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
@@ -1703,7 +1674,6 @@ Label
-
text
string
@@ -1751,14 +1721,13 @@ Label
-
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
@@ -1772,7 +1741,7 @@
Label
}
}) }}
-
+
diff --git a/deploy/public/components/error-summary/index.html b/deploy/public/components/error-summary/index.html
index 141450f56f..093a3cbc5b 100644
--- a/deploy/public/components/error-summary/index.html
+++ b/deploy/public/components/error-summary/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
error summary
example in a new tab
@@ -1167,8 +1166,6 @@
-
-
@@ -1176,8 +1173,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1186,7 +1182,6 @@
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
@@ -1197,7 +1192,6 @@
-
titleText
string
@@ -1277,7 +1271,6 @@
-
href
string
@@ -1311,14 +1304,13 @@
-
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -1332,7 +1324,7 @@
]
}) }}
-
+
@@ -1354,8 +1346,7 @@ How it works
- Open this
-
+ Open this
error summary second
example in a new tab
@@ -1389,8 +1380,6 @@ How it works
-
-
@@ -1398,8 +1387,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1408,7 +1396,6 @@
How it works
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
@@ -1419,7 +1406,6 @@ How it works
-
titleText
string
@@ -1499,7 +1485,6 @@ How it works
-
href
string
@@ -1533,14 +1518,13 @@ How it works
-
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
disableAutoFocus: true,
errorList: [
@@ -1555,7 +1539,7 @@
How it works
]
}) }}
-
+
@@ -1567,8 +1551,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to an answer that uses a single field
example in a new tab
@@ -1596,41 +1579,35 @@ Linking from the error su
</div>
</div>
-<h1 class="govuk-heading-l">Your details</h1>
-
-<div class="govuk-form-group govuk-form-group--error">
+
<h1 class="govuk-heading-l">Your details</h1>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="full-name-input">
Full name
</label>
<p id="full-name-input-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter your full name
</p>
- <input class="govuk-input govuk-input--error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
+ <input class="govuk-input govuk-input–error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1641,7 +1618,6 @@ Linking from the error su
-
titleText
string
@@ -1721,7 +1697,6 @@ Linking from the error su
-
href
string
@@ -1753,17 +1728,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -1771,11 +1744,9 @@
Linking from the error su
href: "#full-name-input"
}
]
-}) }}
-
-<h1 class="govuk-heading-l">Your details</h1>
-
-{{ govukInput({
+}) }}
+
<h1 class="govuk-heading-l">Your details</h1>
+{{ govukInput({
label: {
text: 'Full name'
},
@@ -1787,7 +1758,7 @@
Linking from the error su
}
}) }}
-
+
@@ -1798,8 +1769,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to an answer that uses multiple fields
example in a new tab
@@ -1827,9 +1797,9 @@ Linking from the error su
</div>
</div>
-<div class="govuk-form-group govuk-form-group--error">
+
<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>
@@ -1843,7 +1813,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">
@@ -1851,7 +1821,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">
@@ -1859,37 +1829,31 @@ Linking from the error su
<label class="govuk-label govuk-date-input__label" for="passport-issued-year">
Year
</label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
+ <input class="govuk-input govuk-date-input__input govuk-input–width-4 govuk-input–error" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
</div>
</div>
- </div>
-
- </fieldset>
+ </div>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1900,7 +1864,6 @@ Linking from the error su
-
titleText
string
@@ -1980,7 +1943,6 @@ Linking from the error su
-
href
string
@@ -2012,17 +1974,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -2030,14 +1990,13 @@
Linking from the error su
href: "#passport-issued-year"
}
]
-}) }}
-
-{{ govukDateInput({
+}) }}
+
{{ govukDateInput({
fieldset: {
legend: {
isPageHeading: true,
text: 'When was your passport issued?',
- classes: 'govuk-fieldset__legend--l'
+ classes: 'govuk-fieldset__legend–l'
}
},
id: 'passport-issued',
@@ -2048,23 +2007,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"
}
]
})
}}
-
+
@@ -2074,8 +2033,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to checkboxes
example in a new tab
@@ -2103,9 +2061,9 @@ Linking from the error su
</div>
</div>
-<div class="govuk-form-group govuk-form-group--error">
+
<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>
@@ -2138,34 +2096,28 @@
Linking from the error su
Citizen of another country
</label>
</div>
- </div>
-
- </fieldset>
+ </div>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2176,7 +2128,6 @@ Linking from the error su
-
titleText
string
@@ -2256,7 +2207,6 @@ Linking from the error su
-
href
string
@@ -2288,17 +2238,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -2306,16 +2254,15 @@
Linking from the error su
href: "#nationality"
}
]
-}) }}
-
-{{ 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: {
@@ -2343,7 +2290,7 @@
Linking from the error su
]
}) }}
-
+
@@ -2354,8 +2301,7 @@ Where to put the error summary
- Open this
-
+ Open this
full page example
example in a new tab
@@ -2373,7 +2319,7 @@ 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">
+ <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>
@@ -2388,81 +2334,76 @@
Where to put the error summary
</li>
</ul>
</div>
- </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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2473,7 +2414,6 @@ Where to put the error summary
-
titleText
string
@@ -2553,7 +2493,6 @@ Where to put the error summary
-
href
string
@@ -2585,25 +2524,22 @@ Where to put the error summary
-
-
-
+
-
+
{% 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 %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -2615,50 +2551,50 @@ Where to put the error summary
href: "#passport-issued-year"
}
]
- }) }}
-
- {{ govukDateInput({
- fieldset: {
- legend: {
- isPageHeading: true,
- text: 'When was your passport issued?',
- classes: 'govuk-fieldset__legend--l'
- }
- },
- id: 'passport-issued',
- namePrefix: 'passport-issued',
- errorMessage: {
- text: "Passport issue date must include a year"
- },
- items: [
- {
- name: "day",
- classes: "govuk-input--width-2",
- value: 5
- },
- {
- name: "month",
- classes: "govuk-input--width-2",
- value: 12
- },
- {
- name: "year",
- classes: "govuk-input--width-4 govuk-input--error"
- }
- ]
- })
- }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
-
- </form>
- </div>
- </div>
+ }) }}
+{{ govukDateInput({
+ fieldset: {
+ legend: {
+ isPageHeading: true,
+ text: 'When was your passport issued?',
+ classes: 'govuk-fieldset__legend--l'
+ }
+ },
+ id: 'passport-issued',
+ namePrefix: 'passport-issued',
+ errorMessage: {
+ text: "Passport issue date must include a year"
+ },
+ items: [
+ {
+ name: "day",
+ classes: "govuk-input--width-2",
+ value: 5
+ },
+ {
+ name: "month",
+ classes: "govuk-input--width-2",
+ value: 12
+ },
+ {
+ name: "year",
+ classes: "govuk-input--width-4 govuk-input--error"
+ }
+ ]
+ })
+ }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
diff --git a/deploy/public/components/fieldset/index.html b/deploy/public/components/fieldset/index.html
index c28fb38741..ee5b42f127 100644
--- a/deploy/public/components/fieldset/index.html
+++ b/deploy/public/components/fieldset/index.html
@@ -1133,8 +1133,7 @@ When to use this component
- Open this
-
+ Open this
fieldset address group
example in a new tab
@@ -1156,59 +1155,50 @@ When to use this component
</h1>
</legend>
- <div class="govuk-form-group">
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-line-1">
Address line 1
</label>
<input class="govuk-input" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-line-2">
Address line 2 (optional)
</label>
<input class="govuk-input" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-town">
Town or city
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
Postcode
</label>
- <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
- </div>
-
-</fieldset>
+ <input class="govuk-input govuk-input–width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
+ </div>
+</fieldset>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1219,7 +1209,6 @@ When to use this component
-
describedBy
string
@@ -1282,7 +1271,6 @@ When to use this component
-
text
string
@@ -1314,43 +1302,38 @@ When to use this component
-
-
-
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{% call govukFieldset({
+{% call govukFieldset({
legend: {
text: "What is your address?",
- classes: "govuk-fieldset__legend--l",
+ classes: "govuk-fieldset__legend–l",
isPageHeading: true
}
-}) %}
-
- {{ govukInput({
+}) %}
+ {{ govukInput({
label: {
text: 'Address line 1'
},
id: "address-line-1",
name: "address-line-1",
autocomplete: "address-line1"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: 'Address line 2 (optional)'
},
id: "address-line-2",
name: "address-line-2",
autocomplete: "address-line2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Town or city"
},
@@ -1358,21 +1341,19 @@
When to use this component
id: "address-town",
name: "address-town",
autocomplete: "address-level2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Postcode"
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "address-postcode",
name: "address-postcode",
autocomplete: "postal-code"
- }) }}
-
-{% endcall %}
+ }) }}
+{% endcall %}
-
+
@@ -1386,8 +1367,7 @@ How it works
- Open this
-
+ Open this
fieldset
example in a new tab
@@ -1413,8 +1393,6 @@ How it works
-
-
@@ -1422,8 +1400,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1432,7 +1409,6 @@
How it works
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
@@ -1443,7 +1419,6 @@ How it works
-
describedBy
string
@@ -1506,7 +1481,6 @@ How it works
-
text
string
@@ -1540,22 +1514,21 @@ How it works
-
-
+
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{{ govukFieldset({
+{{ govukFieldset({
legend: {
text: "Legend as page heading",
- classes: "govuk-fieldset__legend--l",
+ classes: "govuk-fieldset__legend–l",
isPageHeading: true
}
}) }}
-
+
diff --git a/deploy/public/components/file-upload/index.html b/deploy/public/components/file-upload/index.html
index f2c01d5514..08d6d14eb6 100644
--- a/deploy/public/components/file-upload/index.html
+++ b/deploy/public/components/file-upload/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
file upload
example in a new tab
@@ -1158,8 +1157,6 @@
-
-
@@ -1167,8 +1164,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1177,7 +1173,6 @@
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
@@ -1188,7 +1183,6 @@
-
name
string
@@ -1225,188 +1219,184 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -1414,7 +1404,7 @@
}
}) }}
-
+
@@ -1427,8 +1417,7 @@ How it works
- Open this
-
+ Open this
file upload second
example in a new tab
@@ -1453,8 +1442,6 @@ How it works
-
-
@@ -1462,8 +1449,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1472,7 +1458,6 @@
How it works
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
@@ -1483,7 +1468,6 @@ How it works
-
name
string
@@ -1520,188 +1504,184 @@ How it works
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -1709,7 +1689,7 @@
How it works
}
}) }}
-
+
@@ -1720,8 +1700,7 @@ Error messages
- Open this
-
+ Open this
error – file upload
example in a new tab
@@ -1749,8 +1728,6 @@ Error messages
-
-
@@ -1758,8 +1735,7 @@ Error messages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1768,7 +1744,6 @@
Error messages
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
@@ -1779,7 +1754,6 @@ Error messages
-
name
string
@@ -1816,188 +1790,184 @@ Error messages
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -2008,7 +1978,7 @@
Error messages
}
}) }}
-
+
diff --git a/deploy/public/components/footer/index.html b/deploy/public/components/footer/index.html
index 9178c381db..3e321bc62c 100644
--- a/deploy/public/components/footer/index.html
+++ b/deploy/public/components/footer/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
footer
example in a new tab
@@ -1152,44 +1151,40 @@
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1200,7 +1195,6 @@
-
meta
object
@@ -1266,7 +1260,6 @@
-
visuallyHiddenTitle
string
@@ -1308,7 +1301,6 @@
-
text
string
@@ -1344,7 +1336,6 @@
-
title
string
@@ -1387,7 +1378,6 @@
-
text
string
@@ -1423,7 +1413,6 @@
-
text
string
@@ -1450,7 +1439,6 @@
-
text
string
@@ -1466,18 +1454,16 @@
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({}) }}
+{{ govukFooter({}) }}
-
+
@@ -1493,8 +1479,7 @@ Footer without links
- Open this
-
+ Open this
footer second
example in a new tab
@@ -1514,44 +1499,40 @@ Footer without links
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1562,7 +1543,6 @@ Footer without links
-
meta
object
@@ -1628,7 +1608,6 @@ Footer without links
-
visuallyHiddenTitle
string
@@ -1670,7 +1649,6 @@ Footer without links
-
text
string
@@ -1706,7 +1684,6 @@ Footer without links
-
title
string
@@ -1749,7 +1726,6 @@ Footer without links
-
text
string
@@ -1785,7 +1761,6 @@ Footer without links
-
text
string
@@ -1812,7 +1787,6 @@ Footer without links
-
text
string
@@ -1828,18 +1802,16 @@ Footer without links
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({}) }}
+{{ govukFooter({}) }}
-
+
@@ -1849,8 +1821,7 @@ Footer with links
- Open this
-
+ Open this
footer with links to meta information
example in a new tab
@@ -1888,44 +1859,40 @@ Footer with links
</li>
</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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1936,7 +1903,6 @@ Footer with links
-
meta
object
@@ -2002,7 +1968,6 @@ Footer with links
-
visuallyHiddenTitle
string
@@ -2044,7 +2009,6 @@ Footer with links
-
text
string
@@ -2080,7 +2044,6 @@ Footer with links
-
title
string
@@ -2123,7 +2086,6 @@ Footer with links
-
text
string
@@ -2159,7 +2121,6 @@ Footer with links
-
text
string
@@ -2186,7 +2147,6 @@ Footer with links
-
text
string
@@ -2202,16 +2162,14 @@ Footer with links
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
meta: {
items: [
{
@@ -2230,7 +2188,7 @@
Footer with links
}
}) }}
-
+
@@ -2252,8 +2210,7 @@ Footer with secondary navigation
- Open this
-
+ Open this
footer with secondary navigation
example in a new tab
@@ -2331,44 +2288,40 @@ Footer with secondary navigation
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2379,7 +2332,6 @@ Footer with secondary navigation
-
meta
object
@@ -2445,7 +2397,6 @@ Footer with secondary navigation
-
visuallyHiddenTitle
string
@@ -2487,7 +2438,6 @@ Footer with secondary navigation
-
text
string
@@ -2523,7 +2473,6 @@ Footer with secondary navigation
-
title
string
@@ -2566,7 +2515,6 @@ Footer with secondary navigation
-
text
string
@@ -2602,7 +2550,6 @@ Footer with secondary navigation
-
text
string
@@ -2629,7 +2576,6 @@ Footer with secondary navigation
-
text
string
@@ -2645,16 +2591,14 @@ Footer with secondary navigation
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
navigation: [
{
title: "Two column list",
@@ -2708,7 +2652,7 @@
Footer with secondary navigation
]
}) }}
-
+
@@ -2718,8 +2662,7 @@ Footer with links and second
- Open this
-
+ Open this
footer with secondary navigation and links to meta information
example in a new tab
@@ -2893,44 +2836,40 @@ Footer with links and second
Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a>
</div>
- <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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2941,7 +2880,6 @@ Footer with links and second
-
meta
object
@@ -3007,7 +2945,6 @@ Footer with links and second
-
visuallyHiddenTitle
string
@@ -3049,7 +2986,6 @@ Footer with links and second
-
text
string
@@ -3085,7 +3021,6 @@ Footer with links and second
-
title
string
@@ -3128,7 +3063,6 @@ Footer with links and second
-
text
string
@@ -3164,7 +3098,6 @@ Footer with links and second
-
text
string
@@ -3191,7 +3124,6 @@ Footer with links and second
-
text
string
@@ -3207,16 +3139,14 @@ Footer with links and second
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
navigation: [
{
title: "Services and information",
@@ -3351,7 +3281,7 @@
Footer with links and second
}
}) }}
-
+
diff --git a/deploy/public/components/header/index.html b/deploy/public/components/header/index.html
index f6a9c8819b..316fd95813 100644
--- a/deploy/public/components/header/index.html
+++ b/deploy/public/components/header/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
header
example in a new tab
@@ -1172,8 +1171,6 @@
-
-
@@ -1181,8 +1178,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1191,7 +1187,6 @@
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
@@ -1202,7 +1197,6 @@
-
homepageUrl
string
@@ -1300,7 +1294,6 @@
-
text
string
@@ -1341,18 +1334,17 @@
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#"
}) }}
-
+
@@ -1374,8 +1366,7 @@ Default header
- Open this
-
+ Open this
header second
example in a new tab
@@ -1415,8 +1406,6 @@ Default header
-
-
@@ -1424,8 +1413,7 @@ Default header
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1434,7 +1422,6 @@
Default header
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
@@ -1445,7 +1432,6 @@ Default header
-
homepageUrl
string
@@ -1543,7 +1529,6 @@ Default header
-
text
string
@@ -1584,18 +1569,17 @@ Default header
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#"
}) }}
-
+
@@ -1606,8 +1590,7 @@ Header with service name
- Open this
-
+ Open this
header with service name
example in a new tab
@@ -1652,8 +1635,6 @@ Header with service name
-
-
@@ -1661,8 +1642,7 @@ Header with service name
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1671,7 +1651,6 @@
Header with service name
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
@@ -1682,7 +1661,6 @@ Header with service name
-
homepageUrl
string
@@ -1780,7 +1758,6 @@ Header with service name
-
text
string
@@ -1821,20 +1798,19 @@ Header with service name
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#",
serviceName: "Service name",
serviceUrl: "#"
}) }}
-
+
@@ -1845,8 +1821,7 @@ Header with service name and na
- Open this
-
+ Open this
header with service name and navigation
example in a new tab
@@ -1887,56 +1862,52 @@ Header with service name and na
<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>
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Navigation item 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Navigation item 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Navigation item 3
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#4">
- Navigation item 4
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
+<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">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">"#4"</span>></span>
+ Navigation item 4
+ <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>
+
+
</div>
</header>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1947,7 +1918,6 @@ Header with service name and na
-
homepageUrl
string
@@ -2045,7 +2015,6 @@ Header with service name and na
-
text
string
@@ -2084,16 +2053,14 @@ Header with service name and na
-
-
-
+
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#",
serviceName: "Service name",
serviceUrl: "#",
@@ -2118,7 +2085,7 @@
Header with service name and na
]
}) }}
-
+
diff --git a/deploy/public/components/inset-text/index.html b/deploy/public/components/inset-text/index.html
index 7c4e228472..290241cf1d 100644
--- a/deploy/public/components/inset-text/index.html
+++ b/deploy/public/components/inset-text/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
inset text
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
text
string
@@ -1231,18 +1225,17 @@
-
-
+
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{{ govukInsetText({
+{{ govukInsetText({
text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}
-
+
@@ -1264,8 +1257,7 @@ How it works
- Open this
-
+ Open this
inset text second
example in a new tab
@@ -1287,8 +1279,6 @@ How it works
-
-
@@ -1296,8 +1286,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1306,7 +1295,6 @@
How it works
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
@@ -1317,7 +1305,6 @@ How it works
-
text
string
@@ -1365,18 +1352,17 @@ How it works
-
-
+
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{{ govukInsetText({
+{{ govukInsetText({
text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}
-
+
diff --git a/deploy/public/components/notification-banner/index.html b/deploy/public/components/notification-banner/index.html
index 7b4319d3f9..158bb505f2 100644
--- a/deploy/public/components/notification-banner/index.html
+++ b/deploy/public/components/notification-banner/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
default – notification banner
example in a new tab
@@ -1171,8 +1170,6 @@
-
-
@@ -1180,8 +1177,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1190,7 +1186,6 @@
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
@@ -1201,7 +1196,6 @@
-
text
string
@@ -1235,86 +1229,84 @@
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukNotificationBanner({
html: html
}) }}
-
+
@@ -1352,8 +1344,7 @@ Telling
- Open this
-
+ Open this
whole service – notification banner
example in a new tab
@@ -1382,8 +1373,6 @@ Telling
-
-
@@ -1391,8 +1380,7 @@ Telling
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1401,7 +1389,6 @@
Telling
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
@@ -1412,7 +1399,6 @@ Telling
-
text
string
@@ -1446,79 +1432,78 @@ Telling
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{{ govukNotificationBanner({
+{{ govukNotificationBanner({
text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
}) }}
-
+
@@ -1535,8 +1520,7 @@ Telling the
- Open this
-
+ Open this
default – notification banner second
example in a new tab
@@ -1568,8 +1552,6 @@ Telling the
-
-
@@ -1577,8 +1559,7 @@ Telling the
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1587,7 +1568,6 @@
Telling the
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
@@ -1598,7 +1578,6 @@ Telling the
-
text
string
@@ -1632,86 +1611,84 @@ Telling the
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukNotificationBanner({
html: html
}) }}
-
+
@@ -1724,8 +1701,7 @@ Reacting to something the user
- Open this
-
+ Open this
success banner – notification banner
example in a new tab
@@ -1757,8 +1733,6 @@ Reacting to something the user
-
-
@@ -1766,8 +1740,7 @@ Reacting to something the user
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1776,7 +1749,6 @@
Reacting to something the user
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
@@ -1787,7 +1759,6 @@ Reacting to something the user
-
text
string
@@ -1821,87 +1792,85 @@ Reacting to something the user
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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>
-{% endset %}
-
-{{ govukNotificationBanner({
+ <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
+{% endset %}
+{{ govukNotificationBanner({
html: html,
type: 'success'
}) }}
-
+
diff --git a/deploy/public/components/pagination/index.html b/deploy/public/components/pagination/index.html
index 114391e91c..9e7077a9a6 100644
--- a/deploy/public/components/pagination/index.html
+++ b/deploy/public/components/pagination/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
pagination
example in a new tab
@@ -1182,8 +1181,6 @@
-
-
@@ -1191,8 +1188,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1201,7 +1197,6 @@
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
@@ -1212,7 +1207,6 @@
-
items
array
@@ -1270,7 +1264,6 @@
-
number
string
@@ -1326,7 +1319,6 @@
-
text
string
@@ -1368,7 +1360,6 @@
-
text
string
@@ -1401,14 +1392,13 @@
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -1432,7 +1422,7 @@
]
}) }}
-
+
@@ -1458,8 +1448,7 @@ For smaller numbers of pages
- Open this
-
+ Open this
pagination with number labels
example in a new tab
@@ -1494,8 +1483,6 @@ For smaller numbers of pages
-
-
@@ -1503,8 +1490,7 @@ For smaller numbers of pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1513,7 +1499,6 @@
For smaller numbers of pages
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
@@ -1524,7 +1509,6 @@ For smaller numbers of pages
-
items
array
@@ -1582,7 +1566,6 @@ For smaller numbers of pages
-
number
string
@@ -1638,7 +1621,6 @@ For smaller numbers of pages
-
text
string
@@ -1680,7 +1662,6 @@ For smaller numbers of pages
-
text
string
@@ -1713,14 +1694,13 @@ For smaller numbers of pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
labelText: "1 of 3",
href: "#"
@@ -1731,7 +1711,7 @@
For smaller numbers of pages
}
}) }}
-
+
@@ -1742,8 +1722,7 @@ Add link labels to describe pages
- Open this
-
+ Open this
pagination with text labels
example in a new tab
@@ -1778,8 +1757,6 @@ Add link labels to describe pages
-
-
@@ -1787,8 +1764,7 @@ Add link labels to describe pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1797,7 +1773,6 @@
Add link labels to describe pages
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
@@ -1808,7 +1783,6 @@ Add link labels to describe pages
-
items
array
@@ -1866,7 +1840,6 @@ Add link labels to describe pages
-
number
string
@@ -1922,7 +1895,6 @@ Add link labels to describe pages
-
text
string
@@ -1964,7 +1936,6 @@ Add link labels to describe pages
-
text
string
@@ -1997,14 +1968,13 @@ Add link labels to describe pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
labelText: "Applying for a provisional lorry or bus licence",
href: "#"
@@ -2015,7 +1985,7 @@
Add link labels to describe pages
-
+
@@ -2026,8 +1996,7 @@ For larger numbers of pages
- Open this
-
+ Open this
large number of pages
example in a new tab
@@ -2089,8 +2058,6 @@ For larger numbers of pages
-
-
@@ -2098,8 +2065,7 @@ For larger numbers of pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2108,7 +2074,6 @@
For larger numbers of pages
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
@@ -2119,7 +2084,6 @@ For larger numbers of pages
-
items
array
@@ -2177,7 +2141,6 @@ For larger numbers of pages
-
number
string
@@ -2233,7 +2196,6 @@ For larger numbers of pages
-
text
string
@@ -2275,7 +2237,6 @@ For larger numbers of pages
-
text
string
@@ -2308,14 +2269,13 @@ For larger numbers of pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -2353,7 +2313,7 @@
For larger numbers of pages
]
}) }}
-
+
@@ -2389,8 +2349,7 @@ First and last pages
- Open this
-
+ Open this
first page
example in a new tab
@@ -2433,8 +2392,6 @@ First and last pages
-
-
@@ -2442,8 +2399,7 @@ First and last pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2452,7 +2408,6 @@
First and last pages
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
@@ -2463,7 +2418,6 @@ First and last pages
-
items
array
@@ -2521,7 +2475,6 @@ First and last pages
-
number
string
@@ -2577,7 +2530,6 @@ First and last pages
-
text
string
@@ -2619,7 +2571,6 @@ First and last pages
-
text
string
@@ -2652,14 +2603,13 @@ First and last pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
next: {
href: "#"
},
@@ -2680,7 +2630,7 @@
First and last pages
]
}) }}
-
+
@@ -2695,8 +2645,7 @@ First and last pages
- Open this
-
+ Open this
last page
example in a new tab
@@ -2741,8 +2690,6 @@ First and last pages
-
-
@@ -2750,8 +2697,7 @@ First and last pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2760,7 +2706,6 @@
First and last pages
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
@@ -2771,7 +2716,6 @@ First and last pages
-
items
array
@@ -2829,7 +2773,6 @@ First and last pages
-
number
string
@@ -2885,7 +2828,6 @@ First and last pages
-
text
string
@@ -2927,7 +2869,6 @@ First and last pages
-
text
string
@@ -2960,14 +2901,13 @@ First and last pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -2988,7 +2928,7 @@
First and last pages
]
}) }}
-
+
diff --git a/deploy/public/components/panel/index.html b/deploy/public/components/panel/index.html
index f2bafd77e2..b52b2c495f 100644
--- a/deploy/public/components/panel/index.html
+++ b/deploy/public/components/panel/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
panel
example in a new tab
@@ -1159,8 +1158,6 @@
-
-
@@ -1168,8 +1165,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1178,7 +1174,6 @@
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
@@ -1189,7 +1184,6 @@
-
titleText
string
@@ -1253,19 +1247,18 @@
-
-
+
{% from "govuk/components/panel/macro.njk" import govukPanel %}
-{{ govukPanel({
+{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
-
+
@@ -1281,8 +1274,7 @@ How it works
- Open this
-
+ Open this
panel second
example in a new tab
@@ -1309,8 +1301,6 @@ How it works
-
-
@@ -1318,8 +1308,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1328,7 +1317,6 @@
How it works
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
@@ -1339,7 +1327,6 @@ How it works
-
titleText
string
@@ -1403,19 +1390,18 @@ How it works
-
-
+
{% from "govuk/components/panel/macro.njk" import govukPanel %}
-{{ govukPanel({
+{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
-
+
diff --git a/deploy/public/components/phase-banner/index.html b/deploy/public/components/phase-banner/index.html
index dcf87bc02b..18e29372a1 100644
--- a/deploy/public/components/phase-banner/index.html
+++ b/deploy/public/components/phase-banner/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
phase banner
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
text
string
@@ -1213,32 +1207,31 @@
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
@@ -1262,8 +1255,7 @@ How it works
- Open this
-
+ Open this
phase banner second
example in a new tab
@@ -1292,8 +1284,6 @@ How it works
-
-
@@ -1301,8 +1291,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1311,7 +1300,6 @@
How it works
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
@@ -1322,7 +1310,6 @@ How it works
-
text
string
@@ -1344,32 +1331,31 @@ How it works
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
@@ -1393,8 +1379,7 @@ How it works
- Open this
-
+ Open this
phase banner with beta text
example in a new tab
@@ -1423,8 +1408,6 @@ How it works
-
-
@@ -1432,8 +1415,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1442,7 +1424,6 @@
How it works
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
@@ -1453,7 +1434,6 @@ How it works
-
text
string
@@ -1475,32 +1455,31 @@ How it works
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
diff --git a/deploy/public/components/radios/index.html b/deploy/public/components/radios/index.html
index 37a75451d9..a2844867e3 100644
--- a/deploy/public/components/radios/index.html
+++ b/deploy/public/components/radios/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
stacked radios
example in a new tab
@@ -1180,32 +1179,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1216,336 +1210,329 @@
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -1568,7 +1555,7 @@
]
}) }}
-
+
@@ -1599,8 +1586,7 @@ If you’re asking one questio
- Open this
-
+ Open this
stacked radios second
example in a new tab
@@ -1649,32 +1635,27 @@ If you’re asking one questio
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1685,336 +1666,329 @@ If you’re asking one questio
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -2037,7 +2011,7 @@
If you’re asking one questio
]
}) }}
-
+
@@ -2048,8 +2022,7 @@ If you’re asking m
- Open this
-
+ Open this
radios without a heading
example in a new tab
@@ -2096,32 +2069,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2132,329 +2100,322 @@ If you’re asking m
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
+{{ govukRadios({
idPrefix: "where-do-you-live",
name: "where-do-you-live",
fieldset: {
@@ -2482,7 +2443,7 @@
If you’re asking m
]
}) }}
-
+
@@ -2499,8 +2460,7 @@ Inline radios
- Open this
-
+ Open this
inline radios
example in a new tab
@@ -2540,32 +2500,27 @@ Inline radios
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2576,337 +2531,330 @@ Inline radios
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
- classes: "govuk-radios--inline",
+{{ 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: {
@@ -2924,7 +2872,7 @@
Inline radios
]
}) }}
-
+
@@ -2935,8 +2883,7 @@ Radio items with hints
- Open this
-
+ Open this
radio items with hint
example in a new tab
@@ -2982,32 +2929,27 @@ Radio items with hints
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3018,336 +2960,329 @@ Radio items with hints
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: {
@@ -3371,7 +3306,7 @@
Radio items with hints
]
}) }}
-
+
@@ -3382,8 +3317,7 @@ Radio items with a text divider
- Open this
-
+ Open this
radios with a text divider
example in a new tab
@@ -3439,32 +3373,27 @@ Radio items with a text divider
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3475,336 +3404,329 @@ Radio items with a text divider
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -3834,7 +3756,7 @@
Radio items with a text divider
]
}) }}
-
+
@@ -3846,8 +3768,7 @@ Conditionally revealing a re
- Open this
-
+ Open this
radios with conditionally revealing content
example in a new tab
@@ -3887,65 +3808,60 @@ Conditionally revealing a re
<input class="govuk-input govuk-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" 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>
+<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>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3956,330 +3872,323 @@ Conditionally revealing a re
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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-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-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-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-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-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-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-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-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-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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -4291,9 +4200,8 @@
Conditionally revealing a re
text: "Email address"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -4304,9 +4212,8 @@
Conditionally revealing a re
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -4317,16 +4224,15 @@
Conditionally revealing a re
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you prefer to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -4357,7 +4263,7 @@
Conditionally revealing a re
]
}) }}
-
+
@@ -4376,8 +4282,7 @@ Smaller radios
- Open this
-
+ Open this
small radios
example in a new tab
@@ -4414,32 +4319,27 @@ Smaller radios
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4450,337 +4350,330 @@ Smaller radios
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-small-radios-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-small-radios-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for each radio item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of radio items objects.
+ See <a href="#options-small-radios-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the radio container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the radio input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each radio item label.
+
+ See <a href="#options-small-radios-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each radio item.
+
+ See <a href="#options-small-radios-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate radio items, for example the text '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-small-radios-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
- classes: "govuk-radios--small",
+{{ govukRadios({
+ classes: "govuk-radios–small",
idPrefix: "changed-name",
name: "changed-name",
fieldset: {
legend: {
text: "Filter",
isPageHeading: true,
- classes: "govuk-fieldset__legend--m"
+ classes: "govuk-fieldset__legend–m"
}
},
items: [
@@ -4795,372 +4688,99 @@
Smaller radios
]
}) }}
-
+
Small radios can work well on information dense screens in services designed for repeat use, like caseworking systems.
-In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.
-Error messages
-Display an error message if the user has not:
-
-- selected any radios
-- answered a conditionally revealed question
-
-Error messages should be styled like this:
-
-
-
-
-
-
-
- <div class="govuk-form-group govuk-form-group--error">
- <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <p id="where-do-you-live-error" class="govuk-error-message">
- <span class="govuk-visually-hidden">Error:</span> Select the country where you live
- </p>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
+In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.
+Error messages
+Display an error message if the user has not:
+
+- selected any radios
+- answered a conditionally revealed question
+
+Error messages should be styled like this:
+
+
+
+
+
+
+
+ <div class="govuk-form-group govuk-form-group--error">
+ <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+ <h1 class="govuk-fieldset__heading">
+ Where do you live?
+ </h1>
+ </legend>
+ <p id="where-do-you-live-error" class="govuk-error-message">
+ <span class="govuk-visually-hidden">Error:</span> Select the country where you live
+ </p>
+ <div class="govuk-radios" data-module="govuk-radios">
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live">
+ England
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
+ Scotland
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
+ Wales
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
+ Northern Ireland
+ </label>
+ </div>
+ </div>
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+ </fieldset>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -5169,69 +4789,329 @@ Error messages
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-inline-radios-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for each radio item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of radio items objects.
+ See <a href="#options-inline-radios-with-error-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the radio container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the radio input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each radio item label.
+
+ See <a href="#options-inline-radios-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each radio item.
+
+ See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate radio items, for example the text '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-with-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -5257,7 +5137,7 @@
Error messages
}
}) }}
-
+
@@ -5275,8 +5155,7 @@ If it’s a conditionally reve
- Open this
-
+ Open this
radios with conditionally revealing content showing an error
example in a new tab
@@ -5319,65 +5198,60 @@ If it’s a conditionally reve
<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>
+<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>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -5388,330 +5262,323 @@ If it’s a conditionally reve
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -5726,9 +5593,8 @@
If it’s a conditionally reve
text: "Email address cannot be blank"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -5739,9 +5605,8 @@
If it’s a conditionally reve
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -5752,16 +5617,15 @@
If it’s a conditionally reve
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you prefer to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -5793,7 +5657,7 @@
If it’s a conditionally reve
]
}) }}
-
+
diff --git a/deploy/public/components/select/index.html b/deploy/public/components/select/index.html
index a61d635550..1492768589 100644
--- a/deploy/public/components/select/index.html
+++ b/deploy/public/components/select/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
select
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
id
string
@@ -1236,237 +1230,232 @@
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "sort",
name: "sort",
label: {
@@ -1493,7 +1482,7 @@
]
}) }}
-
+
@@ -1511,8 +1500,7 @@ How it works
- Open this
-
+ Open this
select second
example in a new tab
@@ -1542,8 +1530,6 @@ How it works
-
-
@@ -1551,8 +1537,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1561,7 +1546,6 @@
How it works
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
@@ -1572,7 +1556,6 @@ How it works
-
id
string
@@ -1617,237 +1600,232 @@ How it works
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "sort",
name: "sort",
label: {
@@ -1874,7 +1852,7 @@
How it works
]
}) }}
-
+
@@ -1885,8 +1863,7 @@ Select with hint
- Open this
-
+ Open this
select with hint
example in a new tab
@@ -1925,8 +1902,6 @@ Select with hint
-
-
@@ -1934,8 +1909,7 @@ Select with hint
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1944,7 +1918,6 @@
Select with hint
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
@@ -1955,7 +1928,6 @@ Select with hint
-
id
string
@@ -2000,237 +1972,232 @@ Select with hint
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "subject",
name: "subject",
label: {
@@ -2281,11 +2248,10 @@
Select with hint
value: "yorkshire",
text: "Yorkshire and the Humber"
}
- ]
-
-}) }}
+ ]
+}) }}
-
+
diff --git a/deploy/public/components/skip-link/index.html b/deploy/public/components/skip-link/index.html
index a3a05a4c83..84ccef4608 100644
--- a/deploy/public/components/skip-link/index.html
+++ b/deploy/public/components/skip-link/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
skip link
example in a new tab
@@ -1149,31 +1148,26 @@
<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>
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1184,7 +1178,6 @@
-
text
string
@@ -1223,23 +1216,20 @@
-
-
-
+
-
+
<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({
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}
-
+
@@ -1257,8 +1247,7 @@ How it works
- Open this
-
+ Open this
skip link second
example in a new tab
@@ -1275,31 +1264,26 @@ 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>
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1310,7 +1294,6 @@ How it works
-
text
string
@@ -1349,23 +1332,20 @@ 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>
-{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
-
-{{ govukSkipLink({
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}
-
+
diff --git a/deploy/public/components/summary-list/index.html b/deploy/public/components/summary-list/index.html
index 10d1aa3703..f1c8a0b980 100644
--- a/deploy/public/components/summary-list/index.html
+++ b/deploy/public/components/summary-list/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
summary list
example in a new tab
@@ -1206,8 +1205,6 @@
-
-
@@ -1215,8 +1212,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1225,7 +1221,6 @@
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
@@ -1236,7 +1231,6 @@
-
rows
array
@@ -1272,7 +1266,6 @@
-
classes
string
@@ -1293,123 +1286,121 @@
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -1467,7 +1458,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: [
@@ -1482,7 +1473,7 @@
]
}) }}
-
+
@@ -1499,8 +1490,7 @@ How it works
- Open this
-
+ Open this
without actions – summary list
example in a new tab
@@ -1554,8 +1544,6 @@ How it works
-
-
@@ -1563,8 +1551,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1573,7 +1560,6 @@
How it works
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
@@ -1584,7 +1570,6 @@ How it works
-
rows
array
@@ -1620,7 +1605,6 @@ How it works
-
classes
string
@@ -1641,123 +1625,121 @@ How it works
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -1788,13 +1770,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>'
}
}
]
}) }}
-
+
@@ -1808,8 +1790,7 @@ Adding actions to each row
- Open this
-
+ Open this
summary list second
example in a new tab
@@ -1883,8 +1864,6 @@ Adding actions to each row
-
-
@@ -1892,8 +1871,7 @@ Adding actions to each row
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1902,7 +1880,6 @@
Adding actions to each row
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
@@ -1913,7 +1890,6 @@ Adding actions to each row
-
rows
array
@@ -1949,7 +1925,6 @@ Adding actions to each row
-
classes
string
@@ -1970,123 +1945,121 @@ Adding actions to each row
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -2144,7 +2117,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: [
@@ -2159,7 +2132,7 @@ Adding actions to each row
]
}) }}
-
+
@@ -2169,8 +2142,7 @@ Adding actions to each row
- Open this
-
+ Open this
summary list with a mix of rows with and without actions
example in a new tab
@@ -2239,8 +2211,6 @@ Adding actions to each row
-
-
@@ -2248,8 +2218,7 @@ Adding actions to each row
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2258,7 +2227,6 @@
Adding actions to each row
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
@@ -2269,7 +2237,6 @@ Adding actions to each row
-
rows
array
@@ -2305,7 +2272,6 @@ Adding actions to each row
-
classes
string
@@ -2326,123 +2292,121 @@ Adding actions to each row
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -2491,7 +2455,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: [
@@ -2506,7 +2470,7 @@ Adding actions to each row
]
}) }}
-
+
@@ -2518,8 +2482,7 @@ Removing the borders
- Open this
-
+ Open this
without borders – summary list
example in a new tab
@@ -2573,8 +2536,6 @@ Removing the borders
-
-
@@ -2582,8 +2543,7 @@ Removing the borders
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2592,7 +2552,6 @@
Removing the borders
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
@@ -2603,7 +2562,6 @@ Removing the borders
-
rows
array
@@ -2639,7 +2597,6 @@ Removing the borders
-
classes
string
@@ -2660,124 +2617,122 @@ Removing the borders
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
- classes: 'govuk-summary-list--no-border',
+{{ govukSummaryList({
+ classes: 'govuk-summary-list–no-border',
rows: [
{
key: {
@@ -2808,13 +2763,13 @@
Removing the borders
text: "Contact details"
},
value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
}
}
]
}) }}
-
+
diff --git a/deploy/public/components/table/index.html b/deploy/public/components/table/index.html
index 58afb4cd1a..11169acc20 100644
--- a/deploy/public/components/table/index.html
+++ b/deploy/public/components/table/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
table
example in a new tab
@@ -1174,8 +1173,6 @@
-
-
@@ -1183,8 +1180,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1193,7 +1189,6 @@
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
@@ -1204,7 +1199,6 @@
-
rows
array
@@ -1269,7 +1263,6 @@
-
text
string
@@ -1333,7 +1326,6 @@
-
text
string
@@ -1386,16 +1378,15 @@
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Dates and amounts",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -1433,7 +1424,7 @@
]
}) }}
-
+
@@ -1450,8 +1441,7 @@ Table captions
- Open this
-
+ Open this
custom caption size
example in a new tab
@@ -1493,8 +1483,6 @@ Table captions
-
-
@@ -1502,8 +1490,7 @@ Table captions
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1512,7 +1499,6 @@
Table captions
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
@@ -1523,7 +1509,6 @@ Table captions
-
rows
array
@@ -1588,7 +1573,6 @@ Table captions
-
text
string
@@ -1652,7 +1636,6 @@ Table captions
-
text
string
@@ -1705,16 +1688,15 @@ Table captions
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Months and rates",
- captionClasses: "govuk-table__caption--l",
+ captionClasses: "govuk-table__caption–l",
firstCellIsHeader: true,
head: [
{
@@ -1752,7 +1734,7 @@
Table captions
]
}) }}
-
+
@@ -1764,8 +1746,7 @@ Table headers
- Open this
-
+ Open this
table second
example in a new tab
@@ -1807,8 +1788,6 @@ Table headers
-
-
@@ -1816,8 +1795,7 @@ Table headers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1826,7 +1804,6 @@
Table headers
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
@@ -1837,7 +1814,6 @@ Table headers
-
rows
array
@@ -1902,7 +1878,6 @@ Table headers
-
text
string
@@ -1966,7 +1941,6 @@ Table headers
-
text
string
@@ -2019,16 +1993,15 @@ Table headers
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Dates and amounts",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2066,7 +2039,7 @@
Table headers
]
}) }}
-
+
@@ -2077,8 +2050,7 @@ Numbers in a table
- Open this
-
+ Open this
numbers in a table
example in a new tab
@@ -2124,8 +2096,6 @@ Numbers in a table
-
-
@@ -2133,8 +2103,7 @@ Numbers in a table
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2143,7 +2112,6 @@
Numbers in a table
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
@@ -2154,7 +2122,6 @@ Numbers in a table
-
rows
array
@@ -2219,7 +2186,6 @@ Numbers in a table
-
text
string
@@ -2283,7 +2249,6 @@ Numbers in a table
-
text
string
@@ -2336,16 +2301,15 @@ Numbers in a table
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Months and rates",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2403,7 +2367,7 @@
Numbers in a table
]
}) }}
-
+
@@ -2414,8 +2378,7 @@ Custom column widths
- Open this
-
+ Open this
custom width using override classes – table
example in a new tab
@@ -2461,8 +2424,6 @@ Custom column widths
-
-
@@ -2470,8 +2431,7 @@ Custom column widths
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2480,7 +2440,6 @@
Custom column widths
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
@@ -2491,7 +2450,6 @@ Custom column widths
-
rows
array
@@ -2556,7 +2514,6 @@ Custom column widths
-
text
string
@@ -2620,7 +2577,6 @@ Custom column widths
-
text
string
@@ -2673,16 +2629,15 @@ Custom column widths
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Month you apply",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2735,7 +2690,7 @@
Custom column widths
]
}) }}
-
+
@@ -2746,8 +2701,7 @@ Custom column widths
- Open this
-
+ Open this
custom width using custom classes – table
example in a new tab
@@ -2793,8 +2747,6 @@ Custom column widths
-
-
@@ -2802,8 +2754,7 @@ Custom column widths
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2812,7 +2763,6 @@
Custom column widths
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
@@ -2823,7 +2773,6 @@ Custom column widths
-
rows
array
@@ -2888,7 +2837,6 @@ Custom column widths
-
text
string
@@ -2952,7 +2900,6 @@ Custom column widths
-
text
string
@@ -3005,16 +2952,15 @@ Custom column widths
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Month you apply",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -3067,7 +3013,7 @@
Custom column widths
]
}) }}
-
+
diff --git a/deploy/public/components/tabs/index.html b/deploy/public/components/tabs/index.html
index 1a96c1b46a..e57a1a347d 100644
--- a/deploy/public/components/tabs/index.html
+++ b/deploy/public/components/tabs/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
tabs
example in a new tab
@@ -1209,8 +1208,8 @@
</tbody>
</table>
- </div>
- <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+
</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">
@@ -1237,10 +1236,9 @@
<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">
@@ -1267,10 +1265,9 @@
<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">
@@ -1297,34 +1294,28 @@
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
- </table>
-
- </div>
+ </table>
+
</div>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1335,7 +1326,6 @@
-
id
string
@@ -1392,7 +1382,6 @@
-
id
string
@@ -1437,7 +1426,6 @@
-
text
string
@@ -1462,17 +1450,15 @@
-
-
-
+
-
+
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
-{% set pastDayHtml %}
+{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
{{ govukTable({
head: [
@@ -1522,9 +1508,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastWeekHtml %}
+{% endset -%}
+
{% set pastWeekHtml %}
<h2 class="govuk-heading-l">Past week</h2>
{{ govukTable({
head: [
@@ -1574,9 +1559,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastMonthHtml %}
+{% endset -%}
+
{% set pastMonthHtml %}
<h2 class="govuk-heading-l">Past month</h2>
{{ govukTable({
head: [
@@ -1626,9 +1610,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastYearHtml %}
+{% endset -%}
+
{% set pastYearHtml %}
<h2 class="govuk-heading-l">Past year</h2>
{{ govukTable({
head: [
@@ -1678,9 +1661,8 @@
]
]
}) }}
-{% endset -%}
-
-{{ govukTabs({
+{% endset -%}
+
{{ govukTabs({
items: [
{
label: "Past day",
@@ -1713,7 +1695,7 @@
]
}) }}
-
+
@@ -1756,8 +1738,7 @@ How it works
- Open this
-
+ Open this
tabs second
example in a new tab
@@ -1827,8 +1808,8 @@ How it works
</tbody>
</table>
- </div>
- <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+ </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">
@@ -1855,10 +1836,9 @@
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">
@@ -1885,10 +1865,9 @@
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">
@@ -1915,34 +1894,28 @@
How it works
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
- </table>
-
- </div>
+ </table>
+ </div>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1953,7 +1926,6 @@ How it works
-
id
string
@@ -2010,7 +1982,6 @@ How it works
-
id
string
@@ -2055,7 +2026,6 @@ How it works
-
text
string
@@ -2080,17 +2050,15 @@ How it works
-
-
-
+
-
+
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
-{% set pastDayHtml %}
+{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
{{ govukTable({
head: [
@@ -2140,9 +2108,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastWeekHtml %}
+{% endset -%}
+{% set pastWeekHtml %}
<h2 class="govuk-heading-l">Past week</h2>
{{ govukTable({
head: [
@@ -2192,9 +2159,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastMonthHtml %}
+{% endset -%}
+{% set pastMonthHtml %}
<h2 class="govuk-heading-l">Past month</h2>
{{ govukTable({
head: [
@@ -2244,9 +2210,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastYearHtml %}
+{% endset -%}
+{% set pastYearHtml %}
<h2 class="govuk-heading-l">Past year</h2>
{{ govukTable({
head: [
@@ -2296,9 +2261,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{{ govukTabs({
+{% endset -%}
+{{ govukTabs({
items: [
{
label: "Past day",
@@ -2331,7 +2295,7 @@
How it works
]
}) }}
-
+
diff --git a/deploy/public/components/tag/index.html b/deploy/public/components/tag/index.html
index fbc13fb0f4..6dbf59ab1c 100644
--- a/deploy/public/components/tag/index.html
+++ b/deploy/public/components/tag/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
tag
example in a new tab
@@ -1154,8 +1153,6 @@
-
-
@@ -1163,8 +1160,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1173,7 +1169,6 @@
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
@@ -1184,7 +1179,6 @@
-
text
string
@@ -1218,18 +1212,17 @@
-
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-{{ govukTag({
+{{ govukTag({
text: "completed"
}) }}
-
+
@@ -1247,8 +1240,7 @@ Showing one or two statuses
- Open this
-
+ Open this
multiple tags
example in a new tab
@@ -1280,100 +1272,96 @@ Showing one or two statuses
Inactive
</strong>
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Jesse Smith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Joshua Wessel
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachael Pepper
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Stuart Say
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Laura Frith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Tim Harvey
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- </tbody>
+<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>
+ Jesse Smith
+ <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--grey"</span>></span>
+
+ 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>
+ Joshua Wessel
+ <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"</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>
+ Rachael Pepper
+ <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"</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>
+ Stuart Say
+ <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--grey"</span>></span>
+
+ 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>
+ Laura Frith
+ <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"</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>
+ Tim Harvey
+ <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--grey"</span>></span>
+
+ Inactive
+</strong>
+<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1384,7 +1372,6 @@ Showing one or two statuses
-
text
string
@@ -1416,16 +1403,14 @@ Showing one or two statuses
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Name of user </th>
@@ -1440,7 +1425,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1451,7 +1436,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1482,7 +1467,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1503,14 +1488,14 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
</tbody>
</table>
-
+
@@ -1521,8 +1506,7 @@ Showing multiple statuses
- Open this
-
+ Open this
coloured tags
example in a new tab
@@ -1554,101 +1538,97 @@ Showing multiple statuses
Urgent
</strong>
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachel Silver
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Laura Frith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Paul French
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Jesse Smith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachael Pepper
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--green">
- Finished
-</strong>
-
- </td>
- </tr>
-
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Emma Tennant
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--yellow">
- Waiting on
-</strong>
-
- </td>
- </tr>
- </tbody>
+<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>
+ Rachel Silver
+ <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>
+
+ 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>
+ Laura Frith
+ <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>
+
+ 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>
+ Paul French
+ <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>
+
+ 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>
+ Jesse Smith
+ <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>
+
+ 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>
+ Rachael Pepper
+ <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>
+
+ Finished
+</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>
+ Emma Tennant
+ <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>
+
+ Waiting on
+</strong>
+<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1659,7 +1639,6 @@ Showing multiple statuses
-
text
string
@@ -1691,16 +1670,14 @@ Showing multiple statuses
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Application </th>
@@ -1715,7 +1692,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Urgent",
- classes: "govuk-tag--red"
+ classes: "govuk-tag–red"
})}}
</td>
</tr>
@@ -1726,7 +1703,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1737,7 +1714,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1748,7 +1725,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1759,7 +1736,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1770,26 +1747,26 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Finished",
- classes: "govuk-tag--green"
- })}}
- </td>
- </tr>
-
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Emma Tennant
- </td>
- <td class="govuk-table__cell">
- {{govukTag({
- text: "Waiting on",
- classes: "govuk-tag--yellow"
+ classes: "govuk-tag–green"
})}}
</td>
- </tr>
- </tbody>
+ </tr>
+<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>
+ Emma Tennant
+ <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>
+ {{govukTag({
+ text: "Waiting on",
+ classes: "govuk-tag--yellow"
+ })}}
+ <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
+
@@ -1804,8 +1781,7 @@ Additional colours
- Open this
-
+ Open this
all tag colours
example in a new tab
@@ -1837,122 +1813,118 @@ Additional colours
Inactive
</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>
+<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>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1963,7 +1935,6 @@ Additional colours
-
text
string
@@ -1995,16 +1966,14 @@ Additional colours
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Class name </th>
@@ -2014,107 +1983,107 @@ Additional colours
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--grey </code>
+ <code> govuk-tag–grey </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--green </code>
+ <code> govuk-tag–green </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--green"
+ classes: "govuk-tag–green"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--turquoise </code>
+ <code> govuk-tag–turquoise </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Active",
- classes: "govuk-tag--turquoise"
+ classes: "govuk-tag–turquoise"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--blue </code>
+ <code> govuk-tag–blue </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Pending",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--purple </code>
+ <code> govuk-tag–purple </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Received",
- classes: "govuk-tag--purple"
+ classes: "govuk-tag–purple"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--pink </code>
+ <code> govuk-tag–pink </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Sent",
- classes: "govuk-tag--pink"
+ classes: "govuk-tag–pink"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--red </code>
+ <code> govuk-tag–red </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Rejected",
- classes: "govuk-tag--red"
+ classes: "govuk-tag–red"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--orange </code>
+ <code> govuk-tag–orange </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Declined",
- classes: "govuk-tag--orange"
+ classes: "govuk-tag–orange"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--yellow </code>
+ <code> govuk-tag–yellow </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Delayed",
- classes: "govuk-tag--yellow"
+ classes: "govuk-tag–yellow"
})}}
</td>
</tr>
</tbody>
</table>
-
+
diff --git a/deploy/public/components/text-input/index.html b/deploy/public/components/text-input/index.html
index e36f6f5e05..9b349cdfc7 100644
--- a/deploy/public/components/text-input/index.html
+++ b/deploy/public/components/text-input/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
text input
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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
@@ -1187,7 +1182,6 @@
-
id
string
@@ -1238,321 +1232,315 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ 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"
}) }}
-
+
@@ -1579,8 +1567,7 @@ If you’re asking one questio
- Open this
-
+ Open this
text input second
example in a new tab
@@ -1606,8 +1593,6 @@ If you’re asking one questio
-
-
@@ -1615,8 +1600,7 @@ If you’re asking one questio
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1625,7 +1609,6 @@
If you’re asking one questio
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
@@ -1636,7 +1619,6 @@ If you’re asking one questio
-
id
string
@@ -1687,322 +1669,316 @@ If you’re asking one questio
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+
{{ govukInput({
+ label: {
+ text: "What is the name of the event?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -2012,8 +1988,7 @@ If you’re asking m
- Open this
-
+ Open this
text input without a heading
example in a new tab
@@ -2038,8 +2013,6 @@ If you’re asking m
-
-
@@ -2047,8 +2020,7 @@ If you’re asking m
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2057,7 +2029,6 @@
If you’re asking m
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
@@ -2068,7 +2039,6 @@ If you’re asking m
-
id
string
@@ -2119,320 +2089,314 @@ If you’re asking m
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?"
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+
{{ govukInput({
+ label: {
+ text: "What is the name of the event?"
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -2448,8 +2412,7 @@ Fixed width inputs
- Open this
-
+ Open this
fixed width inputs
example in a new tab
@@ -2471,64 +2434,55 @@ Fixed width inputs
<input class="govuk-input govuk-input--width-20" id="width-20" name="width-20" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="width-10">
10 character width
</label>
- <input class="govuk-input govuk-input--width-10" id="width-10" name="width-10" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="width-10" name="width-10" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-5">
5 character width
</label>
- <input class="govuk-input govuk-input--width-5" id="width-5" name="width-5" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="width-5" name="width-5" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-4">
4 character width
</label>
- <input class="govuk-input govuk-input--width-4" id="width-4" name="width-4" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-4" id="width-4" name="width-4" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-3">
3 character width
</label>
- <input class="govuk-input govuk-input--width-3" id="width-3" name="width-3" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-3" id="width-3" name="width-3" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-2">
2 character width
</label>
- <input class="govuk-input govuk-input--width-2" id="width-2" name="width-2" type="text">
+ <input class="govuk-input govuk-input–width-2" id="width-2" name="width-2" type="text">
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2539,7 +2493,6 @@ Fixed width inputs
-
id
string
@@ -2589,367 +2542,355 @@ Fixed width inputs
object
Required.
- Options for the label component.
+ Options for the label component.
+See <a href="#options-fixed-width-inputs-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-fixed-width-inputs-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-fixed-width-inputs-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-fixed-width-inputs-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-fixed-width-inputs-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-fixed-width-inputs-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "20 character width"
- },
- classes: "govuk-input--width-20",
- id: "width-20",
- name: "width-20"
-}) }}
-
-{{ govukInput({
- label: {
- text: "10 character width"
- },
- classes: "govuk-input--width-10",
- id: "width-10",
- name: "width-10"
-}) }}
-
-{{ govukInput({
- label: {
- text: "5 character width"
- },
- classes: "govuk-input--width-5",
- id: "width-5",
- name: "width-5"
-}) }}
-
-{{ govukInput({
- label: {
- text: "4 character width"
- },
- classes: "govuk-input--width-4",
- id: "width-4",
- name: "width-4"
-}) }}
-
-{{ govukInput({
- label: {
- text: "3 character width"
- },
- classes: "govuk-input--width-3",
- id: "width-3",
- name: "width-3"
-}) }}
-
-{{ govukInput({
- label: {
- text: "2 character width"
- },
- classes: "govuk-input--width-2",
- id: "width-2",
- name: "width-2"
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "20 character width"
+ },
+ classes: "govuk-input–width-20",
+ id: "width-20",
+ name: "width-20"
+}) }}
+{{ govukInput({
+ label: {
+ text: "10 character width"
+ },
+ classes: "govuk-input–width-10",
+ id: "width-10",
+ name: "width-10"
+}) }}
+{{ govukInput({
+ label: {
+ text: "5 character width"
+ },
+ classes: "govuk-input–width-5",
+ id: "width-5",
+ name: "width-5"
+}) }}
+{{ govukInput({
+ label: {
+ text: "4 character width"
+ },
+ classes: "govuk-input–width-4",
+ id: "width-4",
+ name: "width-4"
+}) }}
+{{ govukInput({
+ label: {
+ text: "3 character width"
+ },
+ classes: "govuk-input–width-3",
+ id: "width-3",
+ name: "width-3"
+}) }}
+{{ govukInput({
+ label: {
+ text: "2 character width"
+ },
+ classes: "govuk-input–width-2",
+ id: "width-2",
+ name: "width-2"
+}) }}
+
+
+
@@ -2960,8 +2901,7 @@ Fluid width inputs
- Open this
-
+ Open this
fluid width inputs
example in a new tab
@@ -2983,35 +2923,31 @@ Fluid width inputs
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
@@ -3020,27 +2956,22 @@
Fluid width inputs
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3051,7 +2982,6 @@ Fluid width inputs
-
id
string
@@ -3101,357 +3031,345 @@ Fluid width inputs
object
Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+See <a href="#options-fluid-width-inputs-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-fluid-width-inputs-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-fluid-width-inputs-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-fluid-width-inputs-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-fluid-width-inputs-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-fluid-width-inputs-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full width"
},
classes: "govuk-!-width-full",
id: "full",
name: "full"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "Three-quarters width"
},
classes: "govuk-!-width-three-quarters",
id: "three-quarters",
name: "three-quarters"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "Two-thirds width"
},
classes: "govuk-!-width-two-thirds",
id: "two-thirds",
name: "two-thirds"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-half width"
},
classes: "govuk-!-width-one-half",
id: "one-half",
name: "one-half"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-third width"
},
classes: "govuk-!-width-one-third",
id: "one-third",
name: "one-third"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-quarter width"
},
@@ -3460,7 +3378,7 @@
Fluid width inputs
name: "one-quarter"
}) }}
-
+
@@ -3471,8 +3389,7 @@ Hint text
- Open this
-
+ Open this
hint text
example in a new tab
@@ -3501,8 +3418,6 @@ Hint text
-
-
@@ -3510,8 +3425,7 @@ Hint text
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -3520,7 +3434,6 @@
Hint text
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
@@ -3531,7 +3444,6 @@ Hint text
-
id
string
@@ -3582,325 +3494,319 @@ Hint text
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "The name you’ll use on promotional material"
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "What is the name of the event?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "The name you’ll use on promotional material"
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -3916,8 +3822,7 @@ Asking for whole numbers
- Open this
-
+ Open this
number input
example in a new tab
@@ -3946,8 +3851,6 @@ Asking for whole numbers
-
-
@@ -3955,8 +3858,7 @@ Asking for whole numbers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -3965,7 +3867,6 @@
Asking for whole numbers
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
@@ -3976,7 +3877,6 @@ Asking for whole numbers
-
id
string
@@ -4027,328 +3927,322 @@ Asking for whole numbers
Required.
Options for the label component.
+
+See <a href="#options-number-input-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-number-input-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-number-input-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-number-input-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-number-input-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-number-input-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is your account number?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- classes: "govuk-input--width-10",
- hint: {
- text: "Must be between 6 and 8 digits long"
- },
- id: "account-number",
- name: "account-number",
- inputmode: "numeric",
- spellcheck: false
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "What is your account number?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ classes: "govuk-input–width-10",
+ hint: {
+ text: "Must be between 6 and 8 digits long"
+ },
+ id: "account-number",
+ name: "account-number",
+ inputmode: "numeric",
+ spellcheck: false
+}) }}
+
+
+
@@ -4365,8 +4259,7 @@ Asking for decimal numbers
- Open this
-
+ Open this
example of an input asking for numbers with decimal places
example in a new tab
@@ -4393,8 +4286,6 @@ Asking for decimal numbers
-
-
@@ -4402,8 +4293,7 @@ Asking for decimal numbers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -4412,7 +4302,6 @@
Asking for decimal numbers
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
@@ -4423,7 +4312,6 @@ Asking for decimal numbers
-
id
string
@@ -4474,325 +4362,319 @@ Asking for decimal numbers
Required.
Options for the label component.
+
+See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "Weight, in kilograms"
- },
- classes: "govuk-input--width-5",
- id: "weight",
- name: "weight",
- suffix: {
- text: "kg"
- },
- spellcheck: false
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "Weight, in kilograms"
+ },
+ classes: "govuk-input–width-5",
+ id: "weight",
+ name: "weight",
+ suffix: {
+ text: "kg"
+ },
+ spellcheck: false
+}) }}
+
+
+Prefixes and suffixes
- Open this
-
+ Open this
text input with prefix and suffix
example in a new tab
@@ -4835,8 +4716,6 @@ Prefixes and suffixes
-
-
@@ -4844,8 +4723,7 @@ Prefixes and suffixes
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -4854,7 +4732,6 @@
Prefixes and suffixes
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
@@ -4865,7 +4742,6 @@ Prefixes and suffixes
-
id
string
@@ -4916,197 +4792,383 @@ Prefixes and suffixes
Required.
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>
+
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
+{{ govukInput({
+ id: "cost-per-item",
+ name: "cost-per-item",
+ label: {
+ text: "What is the cost per item, in pounds?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ prefix: {
+ text: "£"
+ },
+ suffix: {
+ text: "per item"
+ },
+ classes: "govuk-input–width-5",
+ spellcheck: false
+}) }}
+
+
+
- See errorMessage.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
+Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information you’re asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.
+If you need a specific type of information, say so in the input label or hint text as well. For example, put ‘Cost, in pounds’ in the input label and use the ‘£’ symbol in the prefix.
+Position prefixes and suffixes so that they’re outside of their input. This is to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).
+Some users may miss that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.
+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">
+ </div>
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -5115,184 +5177,415 @@ Prefixes and suffixes
-
- text
+ id
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.
+ The ID of the input.
- html
+ name
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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ The name of the input, which is submitted with the form data.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ type
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.
+ Type of input control to render, for example, a password input control. Defaults to text.
- html
+ inputmode
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.
+ Optional value for inputmode.
- id
+ value
string
- Optional ID attribute to add to the hint span tag.
+ Optional initial value of the input.
- classes
+ describedBy
string
- Classes to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
- id: "cost-per-item",
- name: "cost-per-item",
+{{ govukInput({
+ id: "cost",
+ name: "cost",
label: {
- text: "What is the cost per item, in pounds?",
- classes: "govuk-label--l",
+ text: "What is the cost in pounds?",
+ classes: "govuk-label–l",
isPageHeading: true
},
prefix: {
text: "£"
},
- suffix: {
- text: "per item"
- },
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
spellcheck: false
}) }}
Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information you’re asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.
-If you need a specific type of information, say so in the input label or hint text as well. For example, put ‘Cost, in pounds’ in the input label and use the ‘£’ symbol in the prefix.
-Position prefixes and suffixes so that they’re outside of their input. This is to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).
-Some users may miss that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.
-Text inputs with a prefix
-
+Text inputs with a suffix
+
-
+
-
+
-
-
+
+
<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?
+ <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">
- <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">
+ <div class="govuk-input__wrapper"><input class="govuk-input govuk-input--width-5" id="weight" name="weight" type="text" spellcheck="false">
+ <div class="govuk-input__suffix" aria-hidden="true">kg</div>
</div>
</div>
Nunjucks macro options
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -5301,8 +5594,7 @@
Text inputs with a prefix
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
@@ -5312,7 +5604,6 @@ Text inputs with a prefix
-
id
string
@@ -5363,91 +5654,364 @@ Text inputs with a prefix
Required.
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>
+
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See errorMessage.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
+{{ govukInput({
+ id: "weight",
+ name: "weight",
+ label: {
+ text: "What is the weight in kilograms?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ suffix: {
+ text: "kg"
+ },
+ classes: "govuk-input–width-5",
+ spellcheck: false
+}) }}
+
+
+
+
+
+
+Use the autocomplete attribute
+Use the autocomplete attribute on text inputs to help users complete forms more quickly. This lets you specify an input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.
+For example, to enable autofill on a postcode field, set the autocomplete attribute to postal-code. See how to do this in the HTML and Nunjucks tabs in the following example.
+
+
+
+
+
+
+ <div class="govuk-form-group">
+ <label class="govuk-label" for="postcode">
+ Postcode
+ </label>
+ <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -5456,104 +6020,414 @@ Text inputs with a prefix
-
- text
+ id
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.
+ The ID of the input.
- html
+ name
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.
+ The name of the input, which is submitted with the form data.
- classes
+ type
string
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
+ Type of input control to render, for example, a password input control. Defaults to text.
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ inputmode
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.
+ Optional value for inputmode.
- html
+ value
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.
+ Optional initial value of the input.
- classes
+ describedBy
string
- Classes to add to the suffix element.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
+ Required.
+ 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>
+
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
+
+{{ govukInput({
+ label: {
+ text: "Postcode"
+ },
+ classes: "govuk-input–width-10",
+ id: "postcode",
+ name: "postcode",
+ autocomplete: "postal-code"
+}) }}
If you are working in production and there is a relevant input purpose, you’ll need to use the autocomplete attribute 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 disable copy and paste
+Users often need to copy and paste information into a text input, so do not stop them from doing this.
+How and when to spellcheck a user’s input
+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.
+
+
+
+
+
+
+ <div class="govuk-form-group">
+ <label class="govuk-label" for="name">
+ Reference number
+ </label>
+ <input class="govuk-input" id="name" name="name" type="text" spellcheck="false">
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -5562,1405 +6436,355 @@ Text inputs with a prefix
-
- text
+ id
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.
+ The ID of the input.
- html
+ name
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.
+ The name of the input, which is submitted with the form data.
- for
+ type
string
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
+ Type of input control to render, for example, a password input control. Defaults to text.
- classes
+ inputmode
string
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ Optional value for inputmode.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ value
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.
+ Optional initial value of the input.
- html
+ describedBy
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.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- id
- string
+ label
+ object
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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",
- isPageHeading: true
- },
- prefix: {
- text: "£"
- },
- 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__suffix" aria-hidden="true">kg</div>
- </div>
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the input.
-
-
-
- name
- string
-
- Required.
- The name of the input, which is submitted with the form data.
-
-
-
- type
- string
-
- Type of input control to render, for example, a password input control. Defaults to text.
-
-
-
- inputmode
- string
-
- Optional value for inputmode.
-
-
-
- value
- string
-
- Optional initial value of the input.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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",
- isPageHeading: true
- },
- suffix: {
- text: "kg"
- },
- classes: "govuk-input--width-5",
- spellcheck: false
-}) }}Use the autocomplete attribute
-Use the autocomplete attribute on text inputs to help users complete forms more quickly. This lets you specify an input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.
-For example, to enable autofill on a postcode field, set the autocomplete attribute to postal-code. See how to do this in the HTML and Nunjucks tabs in the following example.
-
-
-
-
-
-
- <div class="govuk-form-group">
- <label class="govuk-label" for="postcode">
- Postcode
- </label>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the input.
-
-
-
- name
- string
-
- Required.
- The name of the input, which is submitted with the form data.
-
-
-
- type
- string
-
- Type of input control to render, for example, a password input control. Defaults to text.
-
-
-
- inputmode
- string
-
- Optional value for inputmode.
-
-
-
- value
- string
-
- Optional initial value of the input.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "Postcode"
- },
- classes: "govuk-input--width-10",
- id: "postcode",
- name: "postcode",
- autocomplete: "postal-code"
-}) }}If you are working in production and there is a relevant input purpose, you’ll need to use the autocomplete attribute 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 disable copy and paste
-Users often need to copy and paste information into a text input, so do not stop them from doing this.
-How and when to spellcheck a user’s input
-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.
-
-
-
-
-
-
- <div class="govuk-form-group">
- <label class="govuk-label" for="name">
- Reference number
- </label>
- <input class="govuk-input" id="name" name="name" type="text" spellcheck="false">
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the input.
-
-
-
- name
- string
-
- Required.
- The name of the input, which is submitted with the form data.
-
-
-
- type
- string
-
- Type of input control to render, for example, a password input control. Defaults to text.
-
-
-
- inputmode
- string
-
- Optional value for inputmode.
-
-
-
- value
- string
-
- Optional initial value of the input.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ Options for the label component.
+
+See <a href="#options-text-input-with-spellcheck-disabled-example-open--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-spellcheck-disabled-example-open--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Reference number"
},
@@ -6969,7 +6793,7 @@
How and when to spellcheck a u
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
text input with errors
example in a new tab
@@ -7014,8 +6837,6 @@ Error messages
-
-
@@ -7023,326 +6844,17 @@ Error messages
-
-
+
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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the input.
-
-
-
- name
- string
-
- Required.
- The name of the input, which is submitted with the form data.
-
-
-
- type
- string
-
- Type of input control to render, for example, a password input control. Defaults to text.
-
-
-
- inputmode
- string
-
- Optional value for inputmode.
-
-
-
- value
- string
-
- Optional initial value of the input.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
+ 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
Name
@@ -7351,58 +6863,358 @@ Error messages
-
- text
+ id
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.
+ The ID of the input.
- html
+ name
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.
+ The name of the input, which is submitted with the form data.
- id
+ type
+ string
+
+ Type of input control to render, for example, a password input control. Defaults to text.
+
+
+
+ inputmode
string
- Optional ID attribute to add to the hint span tag.
+ Optional value for inputmode.
- classes
+ value
string
- Classes to add to the hint span tag.
+ Optional initial value of the input.
- attributes
- object
+ describedBy
+ string
- HTML attributes (for example data attributes) to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
-
+
+ label
+ object
+
+ Required.
+ Options for the label component.
+
+See <a href="#options-text-input-with-errors-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-errors-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-errors-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-errors-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-errors-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-errors-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "What is the name of the event?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
id: "event-name",
@@ -7415,7 +7227,7 @@
Error messages
}
}) }}If the input has a prefix or a su
- Open this
-
+ Open this
text input with prefix and suffix with error
example in a new tab
@@ -7459,8 +7270,6 @@ If the input has a prefix or a su
-
-
@@ -7468,8 +7277,7 @@ If the input has a prefix or a su
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -7478,7 +7286,6 @@
If the input has a prefix or a su
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
@@ -7489,7 +7296,6 @@ If the input has a prefix or a su
-
id
string
@@ -7540,316 +7346,310 @@ If the input has a prefix or a su
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-with-error-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
id: "cost-per-item-error",
name: "cost-per-item-error",
label: {
text: "What is the cost per item, in pounds?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
prefix: {
@@ -7861,11 +7661,11 @@
If the input has a prefix or a su
errorMessage: {
text: "Enter a cost per item, in pounds"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
spellcheck: false
}) }}
- Open this
-
+ Open this
textarea
example in a new tab
@@ -1160,8 +1159,6 @@
-
-
@@ -1169,8 +1166,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1179,7 +1175,6 @@
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
@@ -1190,7 +1185,6 @@
-
id
string
@@ -1241,200 +1235,196 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+See <a href="#options-textarea-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -1442,7 +1432,7 @@
}
}) }}
How it works
- Open this
-
+ Open this
textarea second
example in a new tab
@@ -1491,8 +1480,6 @@ How it works
-
-
@@ -1500,8 +1487,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1510,7 +1496,6 @@
How it works
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
@@ -1521,7 +1506,6 @@ How it works
-
id
string
@@ -1572,726 +1556,573 @@ How it works
Required.
Options for the label component.
+
+See <a href="#options-textarea-second-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% 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",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information, like your National Insurance number or credit card details."
+ }
+}) }}
Use appropriately-sized textareas
+Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the rows attribute.
+
+
+
+
+
+
+
+ <div class="govuk-form-group">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
+ Can you provide more detail?
+ </label>
+ </h1>
+ <div id="more-detail-hint" class="govuk-hint">
+ Do not include personal or financial information, like your National Insurance number or credit card details.
+ </div>
+ <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
+
+ id
+ string
+
+ Required.
+ The ID of the textarea.
- hint
- object
+ name
+ string
- Options for the hint component.
-
- See hint.
+ Required.
+ The name of the textarea, which is submitted with the form data.
- errorMessage
- object
+ spellcheck
+ boolean
- 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.
+ Optional field to enable or disable the spellcheck attribute on the textarea.
- formGroup
- object
+ rows
+ string
- Options for the form-group wrapper.
- See formGroup.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the textarea.
+ Optional initial value of the textarea.
- autocomplete
+ describedBy
string
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information, like your National Insurance number or credit card details."
- }
-}) }}Use appropriately-sized textareas
-Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the rows attribute.
-
-
-
-
-
-
-
- <div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
- Can you provide more detail?
- </label>
- </h1>
- <div id="more-detail-hint" class="govuk-hint">
- Do not include personal or financial information, like your National Insurance number or credit card details.
- </div>
- <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the textarea.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+
+See <a href="#options-textarea-appropriately-sized-with-rows-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-appropriately-sized-with-rows-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-appropriately-sized-with-rows-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "more-detail",
id: "more-detail",
rows: "8",
label: {
text: "Can you provide more detail?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information, like your National Insurance number or credit card details."
- }
-}) }}
Do not disable copy and paste
-Users will often need to copy and paste information into a textarea, so do not stop them from doing this.
-If you’re asking more than one question on the page
-If you’re asking more than one question on the page, 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>
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the textarea.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information, like your National Insurance number or credit card details."
+ }
+}) }}
+
+
+
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
+
+
+Do not disable copy and paste
+Users will often need to copy and paste information into a textarea, so do not stop them from doing this.
+If you’re asking more than one question on the page
+If you’re asking more than one question on the page, 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>
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -2300,112 +2131,241 @@ If you’re asking m
-
- text
+ id
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.
+ The ID of the textarea.
- html
+ name
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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
+ The name of the textarea, which is submitted with the form data.
- isPageHeading
+ spellcheck
boolean
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
+ Optional field to enable or disable the spellcheck attribute on the textarea.
- html
+ rows
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.
+ Optional number of textarea rows (default is 5 rows).
- id
+ value
string
- Optional ID attribute to add to the hint span tag.
+ Optional initial value of the textarea.
- classes
+ describedBy
string
- Classes to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "more-detail",
id: "more-detail",
label: {
@@ -2413,7 +2373,7 @@
If you’re asking m
}
}) }}
Error messages
- Open this
-
+ Open this
textarea with error
example in a new tab
@@ -2459,8 +2418,6 @@ Error messages
-
-
@@ -2468,8 +2425,7 @@ Error messages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2478,7 +2434,6 @@
Error messages
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
@@ -2489,7 +2444,6 @@ Error messages
-
id
string
@@ -2540,200 +2494,196 @@ Error messages
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -2744,7 +2694,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
warning text
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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
@@ -1187,7 +1182,6 @@
-
text
string
@@ -1229,19 +1223,18 @@
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
How it works
- Open this
-
+ Open this
warning text second
example in a new tab
@@ -1281,8 +1273,6 @@ How it works
-
-
@@ -1290,8 +1280,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1300,7 +1289,6 @@
How it works
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
@@ -1311,7 +1299,6 @@ How it works
-
text
string
@@ -1353,19 +1340,18 @@ How it works
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
Avoid overwriting GOV.UK Des
If you make a modification involving CSS you might decide to write a selector that targets a GOV.UK Design System class and change its CSS properties.
This will work in the short term but may break if you install an update relying on the component’s previous behaviour.
For example, if you want to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button"> Inverse button </button> </div>
-css .app-interruption-card .govuk-button { background-color: white; color: blue; }
+<div class="app-interruption-card">
+ <button class="govuk-button">
+ Inverse button
+ </button>
+</div>
+.app-interruption-card .govuk-button {
+ background-color: white;
+ color: blue;
+}
+This would work in the short term, but if the GOV.UK Design System team changes how the button component works it could break when you update your service. For examples like this, consider using small modifications to components.
Use a unique prefix for component names
The GOV.UK Design System team uses prefixes, sometimes called namespacing, to make sure the code in the GOV.UK Design System does not unintentionally break your application code.
@@ -1067,14 +1076,29 @@ Use a unique prefix for compone
Custom override classes
If you need to specify some custom override classes which do not belong to a particular component, you can define these using your prefix and the -!- convention from the GOV.UK Design System.
For example, to define a custom width for a specific reference number in your services you might do this.
-css .app-\!-reference-number-width { width: 10ch !important; }
-html <span class="app-!-reference-number-width"> 7446868939 </span>
+.app-\!-reference-number-width {
+ width: 10ch !important;
+}
+<span class="app-!-reference-number-width">
+ 7446868939
+</span>
+Small modifications to components
The GOV.UK Design System uses a naming convention called Block Element Modifier (BEM) which makes it easier to ensure styling is isolated to individual components. You can use this convention to make modifications to components.
When making small modifications to components you can make use of the modifier convention from BEM, which uses a suffix of -- plus a name, alongside your own prefix.
For example, if you wanted to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button app-button--inverse"> Inverse button </button> </div>
-css .app-button--inverse { background-color: govuk-colour("white"); color: govuk-colour("blue"); }
+<div class="app-interruption-card">
+ <button class="govuk-button app-button--inverse">
+ Inverse button
+ </button>
+</div>
+.app-button--inverse {
+ background-color: govuk-colour("white");
+ color: govuk-colour("blue");
+}
+You should not use modifiers when:
- you’re modifying most of the component
diff --git a/deploy/public/get-started/focus-states/index.html b/deploy/public/get-started/focus-states/index.html
index 1a1e28421c..2c1811e36c 100644
--- a/deploy/public/get-started/focus-states/index.html
+++ b/deploy/public/get-started/focus-states/index.html
@@ -1037,7 +1037,10 @@ Mak
Make focusable text accessible
If you use Sass, you should include the govuk-focused-text mixin in your component’s :focus selector if that component is focusable text. For example, the component is a link in body text, or the details component:
-.app-component:focus { @include govuk-focused-text; }
+.app-component:focus {
+ @include govuk-focused-text;
+}
+Make other focusable elements accessible
If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
The 3 Sass variables are:
diff --git a/deploy/public/get-started/labels-legends-headings/index.html b/deploy/public/get-started/labels-legends-headings/index.html
index c0efed0370..417bc22856 100644
--- a/deploy/public/get-started/labels-legends-headings/index.html
+++ b/deploy/public/get-started/labels-legends-headings/index.html
@@ -1034,8 +1034,7 @@ Labels as page headings
- Open this
-
+ Open this
labels as page headings - making labels and legends headings
example in a new tab
@@ -1063,23 +1062,23 @@ Labels as page headings
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
- text: "govuk-label--l",
- classes: "govuk-label--l",
+ text: "govuk-label–l",
+ classes: "govuk-label–l",
isPageHeading: true
},
hint: {
- text: "This example shows an <h1> around a <label> with the class of govuk-label--l"
+ text: "This example shows an <h1> around a <label> with the class of govuk-label–l"
},
id: "example",
name: "example"
}) }}
Legends as page headings
- Open this
-
+ Open this
legends as page headings - making labels and legends headings
example in a new tab
@@ -1138,15 +1136,14 @@ Legends as page headings
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1175,7 +1172,7 @@
Legends as page headings
]
}) }}
-
+ Styling labels
- Open this
-
+ Open this
styling labels - making labels and legends headings
example in a new tab
@@ -1213,22 +1209,21 @@ Styling labels
<input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>
-<div class="govuk-form-group">
- <label class="govuk-label govuk-label--s" for="example-2">
- govuk-label--s
+<div class="govuk-form-group">
+ <label class="govuk-label govuk-label–s" for="example-2">
+ govuk-label–s
</label>
<div id="example-2-hint" class="govuk-hint">
- This example shows a <label> with the class of govuk-label--s
+ This example shows a <label> with the class of govuk-label–s
</div>
<input class="govuk-input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
</div>
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "govuk-label--m",
classes: "govuk-label--m"
@@ -1238,9 +1233,8 @@
Styling labels
},
id: "example",
name: "example"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "govuk-label--s",
classes: "govuk-label--s"
@@ -1252,7 +1246,7 @@
Styling labels
name: "example-2"
}) }}
-
+ Styling legends
- Open this
-
+ Open this
styling legends - making labels and legends headings
example in a new tab
@@ -1307,16 +1300,15 @@ Styling legends
</div>
</div>
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </fieldset>
+</div>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="checkbox-2-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- govuk-fieldset__legend--s
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–s">
+ govuk-fieldset__legend–s
</legend>
<div id="checkbox-2-hint" class="govuk-hint">
- This example shows a <legend> with the class of govuk-fieldset__legend--s.
+ This example shows a <legend> with the class of govuk-fieldset__legend–s.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
@@ -1337,17 +1329,15 @@
Styling legends
Checkbox 3
</label>
</div>
- </div>
-
- </fieldset>
+ </div>
+ </fieldset>
</div>
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1373,9 +1363,8 @@
Styling legends
text: "Checkbox 3"
}
]
-}) }}
-
-{{ govukCheckboxes({
+}) }}
+{{ govukCheckboxes({
idPrefix: "checkbox-2",
name: "checkbox-2",
fieldset: {
@@ -1403,7 +1392,7 @@
Styling legends
]
}) }}
-
+ Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1085,8 +1084,6 @@ Using components
-
-
@@ -1094,8 +1091,7 @@ Using components
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1104,7 +1100,6 @@
Using components
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
@@ -1115,7 +1110,6 @@ Using components
-
element
string
@@ -1205,18 +1199,17 @@ Using components
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1054,8 +1053,6 @@ Using components
-
-
@@ -1063,8 +1060,7 @@ Using components
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1073,7 +1069,6 @@
Using components
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
@@ -1084,7 +1079,6 @@ Using components
-
element
string
@@ -1174,18 +1168,17 @@ Using components
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Nunjucks
-
- :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" }) }}
+<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” }) }}
{% endblock %}
See the skip link component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the footer component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the footer component for more details.
-
-
-
- :licence_message
-
- No equivalent. Raise an issue if you need this.
-
-
-
-
- :body_end
- bodyEnd
-
+
+<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>
+
@@ -1465,18 +1466,19 @@ Form related class names
Width override classes
-
- 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
-
+<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>
+
diff --git a/deploy/public/patterns/addresses/index.html b/deploy/public/patterns/addresses/index.html
index 5f51765c52..f70fdbd452 100644
--- a/deploy/public/patterns/addresses/index.html
+++ b/deploy/public/patterns/addresses/index.html
@@ -1144,8 +1144,7 @@ Multiple text inputs
- Open this
-
+ Open this
multiple text inputs addresses
example in a new tab
@@ -1167,76 +1166,67 @@ Multiple text inputs
</h1>
</legend>
- <div class="govuk-form-group">
+ <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({
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+{% call govukFieldset({
legend: {
text: "What is your address?",
classes: "govuk-fieldset__legend--l",
isPageHeading: true
}
-}) %}
-
- {{ govukInput({
+}) %}
+ {{ govukInput({
label: {
text: 'Address line 1'
},
id: "address-line-1",
name: "address-line-1",
autocomplete: "address-line1"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: 'Address line 2 (optional)'
},
id: "address-line-2",
name: "address-line-2",
autocomplete: "address-line2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Town or city"
},
@@ -1244,18 +1234,16 @@
Multiple text inputs
id: "address-town",
name: "address-town",
autocomplete: "address-level2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "County (optional)"
},
classes: "govuk-!-width-two-thirds",
id: "address-county",
name: "address-county"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Postcode"
},
@@ -1263,11 +1251,10 @@
Multiple text inputs
id: "address-postcode",
name: "address-postcode",
autocomplete: "postal-code"
- }) }}
-
-{% endcall %}{% endcall %}
-
+
@@ -1307,8 +1294,7 @@ Error messages
- Open this
-
+ Open this
postcode error
example in a new tab
@@ -1335,14 +1321,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Postcode"
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "address-postcode",
name: "address-postcode",
value: "Not a postcode",
@@ -1352,7 +1338,7 @@
Error messages
autocomplete: "postal-code"
}) }}Textarea
- Open this
-
+ Open this
textarea addresses
example in a new tab
@@ -1419,10 +1404,10 @@ Textarea
-
+
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "address",
id: "address",
autocomplete: "street-address",
@@ -1431,7 +1416,7 @@
Textarea
}
}) }}
- Open this
-
+ Open this
bank or building society account details
example in a new tab
@@ -1162,56 +1161,50 @@
<h1 class="govuk-heading-l">Bank or building society account details</h1>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="name-on-the-account">
Name on the account
</label>
<input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="sort-code">
Sort code
</label>
<div id="sort-code-hint" class="govuk-hint">
Must be 6 digits long
</div>
- <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="account-number">
Account number
</label>
<div id="account-number-hint" class="govuk-hint">
Must be between 6 and 8 digits long
</div>
- <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="roll-number">
Building society roll number (if you have one)
</label>
<div id="roll-number-hint" class="govuk-hint">
You can find it on your card, statement or passbook
</div>
- <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Bank or building society account details</h1>
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Bank or building society account details</h1>
+{{ govukInput({
label: {
text: "Name on the account"
},
@@ -1219,9 +1212,8 @@
name: "name-on-the-account",
autocomplete: "name",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Sort code"
},
@@ -1233,9 +1225,8 @@
name: "sort-code",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Account number"
},
@@ -1247,9 +1238,8 @@
name: "account-number",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Building society roll number (if you have one)"
},
@@ -1260,13 +1250,12 @@
id: "roll-number",
name: "roll-number",
spellcheck: false
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Turn off HTML5 validation
- Open this
-
+ Open this
branch question
example in a new tab
@@ -1350,20 +1338,18 @@ Turn off HTML5 validation
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "method-of-payment",
name: "method-of-payment",
fieldset: {
@@ -1394,13 +1380,12 @@
Turn off HTML5 validation
}
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
International bank account details
- Open this
-
+ Open this
international bank account details
example in a new tab
@@ -1447,7 +1431,7 @@ International bank account details<input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
</div>
-<div class="govuk-form-group">
+
<div class="govuk-form-group">
<label class="govuk-label" for="iban">
IBAN
</label>
@@ -1459,11 +1443,10 @@
International bank account details
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "BIC or SWIFT code"
},
@@ -1474,9 +1457,8 @@
International bank account detailsid: "bic-code",
name: "bic-code",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "IBAN"
},
@@ -1488,7 +1470,7 @@
International bank account detailsspellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
errors
example in a new tab
@@ -1530,14 +1511,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Sort code"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
hint: {
text: "Must be 6 digits long"
},
@@ -1551,7 +1532,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
check answers
example in a new tab
@@ -1156,338 +1155,336 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Name"
- },
- value: {
- text: "Sarah Philips"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "name"
- }
- ]
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+ <h2 class="govuk-heading-m">Personal details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Name"
+ },
+ value: {
+ text: "Sarah Philips"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "name"
}
- },
- {
- key: {
- text: "Date of birth"
- },
- value: {
- text: "5 January 1978"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "date of birth"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Date of birth"
+ },
+ value: {
+ text: "5 January 1978"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "date of birth"
}
- },
- {
- key: {
- text: "Address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "address"
}
- },
- {
- key: {
- text: "Contact details"
- },
- value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "contact details"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Contact details"
+ },
+ value: {
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "contact details"
}
- }
- ]
- }) }}
-
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Previous application number"
- },
- value: {
- text: "502135326"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "previous application number"
- }
- ]
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+ <h2 class="govuk-heading-m">Application details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Previous application number"
+ },
+ value: {
+ text: "502135326"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "previous application number"
}
- },
- {
- key: {
- text: "Licence type"
- },
- value: {
- text: "For personal use"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence type"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence type"
+ },
+ value: {
+ text: "For personal use"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence type"
}
- },
- {
- key: {
- text: "Home address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "home address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Home address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "home address"
}
- },
- {
- key: {
- text: "Licence period"
- },
- value: {
- text: "Valid for 6 months"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence period"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence period"
+ },
+ value: {
+ text: "Valid for 6 months"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence period"
}
- }
- ]
- }) }}
+ ]
+ }
+ }
+ ]
+ }) }}
- <h2 class="govuk-heading-m">Now send your application</h2>
+ <h2 class="govuk-heading-m">Now send your application</h2>
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+ <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
- <form action="/form-handler" method="post" novalidate>
+ <form action="/form-handler" method="post" novalidate>
- <input type="hidden" name="answers-checked" value="true">
+ <input type="hidden" name="answers-checked" value="true">
- {{ govukButton({
- text: "Accept and send"
- }) }}
+ {{ govukButton({
+ text: "Accept and send"
+ }) }}
- </form>
+ </form>
- </div>
- </div>
+</div>
+
+ </div>
{% endblock %}
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1226,8 +1217,7 @@ When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@ When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1304,8 +1286,7 @@ When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@ When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1406,8 +1375,7 @@ When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@ When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1489,8 +1447,7 @@ Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1572,8 +1521,7 @@ Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html
index 64d437478f..cbe8d2f713 100644
--- a/deploy/public/patterns/confirmation-pages/index.html
+++ b/deploy/public/patterns/confirmation-pages/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
@@ -1183,8 +1182,7 @@ How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@ Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-</div>
+</div>
-
- {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@ Expanding contact information
<li>We aim to respond within 2 working days</li>
</ul>
- </div>
+ </div>
</details>
-
- {% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
accordion
example in a new tab
@@ -1208,8 +1207,6 @@
-
-
@@ -1217,8 +1214,7 @@
-
@@ -1217,8 +1214,7 @@
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1227,7 +1223,6 @@
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.
-| id | string | @@ -1289,7 +1283,6 @@
|---|---|
| heading.text | string | @@ -1346,13 +1339,11 @@
+
@@ -4804,8 +4686,7 @@
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-default",
items: [
@@ -1445,8 +1436,7 @@ Section heading buttons
- Open this
-
+ Open this
accordion second
example in a new tab
@@ -1515,8 +1505,6 @@ Section heading buttons
-
-
@@ -1524,8 +1512,7 @@ Section heading buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1534,7 +1521,6 @@
Section heading buttons
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
@@ -1545,7 +1531,6 @@ Section heading buttons
-
id
string
@@ -1596,7 +1581,6 @@ Section heading buttons
-
heading.text
string
@@ -1653,13 +1637,11 @@ Section heading buttons
-
-
+
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-default",
items: [
@@ -1714,8 +1696,7 @@ Adding a summary line
- Open this
-
+ Open this
accordion with summary sections
example in a new tab
@@ -1863,8 +1844,6 @@ Adding a summary line
-
-
@@ -1872,8 +1851,7 @@ Adding a summary line
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1882,7 +1860,6 @@
Adding a summary line
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
@@ -1893,7 +1870,6 @@ Adding a summary line
-
id
string
@@ -1944,7 +1920,6 @@ Adding a summary line
-
heading.text
string
@@ -2001,13 +1976,11 @@ Adding a summary line
-
-
+
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
-
{{ govukAccordion({
id: "accordion-with-summary-sections",
items: [
diff --git a/deploy/public/components/accordion/with-summary-section/index.html b/deploy/public/components/accordion/with-summary-section/index.html
index e4b63d2e17..aac6c2e304 100644
--- a/deploy/public/components/accordion/with-summary-section/index.html
+++ b/deploy/public/components/accordion/with-summary-section/index.html
@@ -52,7 +52,6 @@
-
diff --git a/deploy/public/components/back-link/index.html b/deploy/public/components/back-link/index.html
index eea7d37fb5..b6e6749017 100644
--- a/deploy/public/components/back-link/index.html
+++ b/deploy/public/components/back-link/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
back link
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
text
string
@@ -1223,19 +1217,18 @@
-
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
-{{ govukBackLink({
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
+
@@ -1254,8 +1247,7 @@ How it works
- Open this
-
+ Open this
back link second
example in a new tab
@@ -1275,8 +1267,6 @@ How it works
-
-
@@ -1284,8 +1274,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1294,7 +1283,6 @@
How it works
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
@@ -1305,7 +1293,6 @@ How it works
-
text
string
@@ -1345,19 +1332,18 @@ How it works
-
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
-{{ govukBackLink({
+{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-
+
diff --git a/deploy/public/components/breadcrumbs/index.html b/deploy/public/components/breadcrumbs/index.html
index ce48f729a7..aa18d5f246 100644
--- a/deploy/public/components/breadcrumbs/index.html
+++ b/deploy/public/components/breadcrumbs/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
breadcrumbs
example in a new tab
@@ -1164,8 +1163,6 @@
-
-
@@ -1173,8 +1170,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1183,7 +1179,6 @@
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
@@ -1194,7 +1189,6 @@
-
items
array
@@ -1237,7 +1231,6 @@
-
text
string
@@ -1271,14 +1264,13 @@
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
items: [
{
text: "Home",
@@ -1295,7 +1287,7 @@
]
}) }}
-
+
@@ -1313,8 +1305,7 @@ How it works
- Open this
-
+ Open this
breadcrumbs second
example in a new tab
@@ -1346,8 +1337,6 @@ How it works
-
-
@@ -1355,8 +1344,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1365,7 +1353,6 @@
How it works
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
@@ -1376,7 +1363,6 @@ How it works
-
items
array
@@ -1419,7 +1405,6 @@ How it works
-
text
string
@@ -1453,14 +1438,13 @@ How it works
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
items: [
{
text: "Home",
@@ -1477,7 +1461,7 @@
How it works
]
}) }}
-
+
@@ -1489,8 +1473,7 @@ Collapsing breadcrumbs on mobi
- Open this
-
+ Open this
breadcrumbs that collapse on mobile
example in a new tab
@@ -1528,8 +1511,6 @@ Collapsing breadcrumbs on mobi
-
-
@@ -1537,8 +1518,7 @@ Collapsing breadcrumbs on mobi
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1547,7 +1527,6 @@
Collapsing breadcrumbs on mobi
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
@@ -1558,7 +1537,6 @@ Collapsing breadcrumbs on mobi
-
items
array
@@ -1601,7 +1579,6 @@ Collapsing breadcrumbs on mobi
-
text
string
@@ -1635,14 +1612,13 @@ Collapsing breadcrumbs on mobi
-
-
+
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
-{{ govukBreadcrumbs({
+{{ govukBreadcrumbs({
collapseOnMobile: true,
items: [
{
@@ -1668,7 +1644,7 @@
Collapsing breadcrumbs on mobi
]
}) }}
-
+
diff --git a/deploy/public/components/button/index.html b/deploy/public/components/button/index.html
index 865df790e8..14cd164eba 100644
--- a/deploy/public/components/button/index.html
+++ b/deploy/public/components/button/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
button
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
element
string
@@ -1273,18 +1267,17 @@
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
-
+
@@ -1315,8 +1308,7 @@ Default buttons
- Open this
-
+ Open this
button second
example in a new tab
@@ -1338,8 +1330,6 @@ Default buttons
-
-
@@ -1347,8 +1337,7 @@ Default buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1357,7 +1346,6 @@
Default buttons
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
@@ -1368,7 +1356,6 @@ Default buttons
-
element
string
@@ -1458,18 +1445,17 @@ Default buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
-
+
@@ -1481,8 +1467,7 @@ Start buttons
- Open this
-
+ Open this
start now button
example in a new tab
@@ -1506,8 +1491,6 @@ Start buttons
-
-
@@ -1515,8 +1498,7 @@ Start buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1525,7 +1507,6 @@
Start buttons
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
@@ -1536,7 +1517,6 @@ Start buttons
-
element
string
@@ -1626,20 +1606,19 @@ Start buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Start now",
href: "#",
isStartButton: true
}) }}
-
+
@@ -1651,8 +1630,7 @@ Secondary buttons
- Open this
-
+ Open this
secondary button
example in a new tab
@@ -1674,8 +1652,6 @@ Secondary buttons
-
-
@@ -1683,8 +1659,7 @@ Secondary buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1693,7 +1668,6 @@
Secondary buttons
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
@@ -1704,7 +1678,6 @@ Secondary buttons
-
element
string
@@ -1794,19 +1767,18 @@ Secondary buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Find address",
- classes: "govuk-button--secondary"
+ classes: "govuk-button–secondary"
}) }}
-
+
@@ -1818,8 +1790,7 @@ Warning buttons
- Open this
-
+ Open this
warning button
example in a new tab
@@ -1841,8 +1812,6 @@ Warning buttons
-
-
@@ -1850,8 +1819,7 @@ Warning buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1860,7 +1828,6 @@
Warning buttons
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
@@ -1871,7 +1838,6 @@ Warning buttons
-
element
string
@@ -1961,19 +1927,18 @@ Warning buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Delete account",
- classes: "govuk-button--warning"
+ classes: "govuk-button–warning"
}) }}
-
+
@@ -1989,8 +1954,7 @@ Disabled buttons
- Open this
-
+ Open this
disabled button
example in a new tab
@@ -2012,8 +1976,6 @@ Disabled buttons
-
-
@@ -2021,8 +1983,7 @@ Disabled buttons
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2031,7 +1992,6 @@
Disabled buttons
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
@@ -2042,7 +2002,6 @@ Disabled buttons
-
element
string
@@ -2132,19 +2091,18 @@ Disabled buttons
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Disabled button",
disabled: true
}) }}
-
+
@@ -2155,8 +2113,7 @@ Grouping buttons
- Open this
-
+ Open this
secondary button combo
example in a new tab
@@ -2176,34 +2133,29 @@ Grouping buttons
Save and continue
</button>
- <button class="govuk-button govuk-button--secondary" data-module="govuk-button">
+ <button class="govuk-button govuk-button–secondary" data-module="govuk-button">
Save as draft
</button>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2214,7 +2166,6 @@ Grouping buttons
-
element
string
@@ -2302,27 +2253,24 @@ Grouping buttons
-
-
-
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-<div class="govuk-button-group">
+<div class="govuk-button-group">
{{ govukButton({
text: "Save and continue"
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Save as draft",
- classes: "govuk-button--secondary"
+ classes: "govuk-button–secondary"
}) }}
</div>
-
+
@@ -2332,8 +2280,7 @@ Grouping buttons
- Open this
-
+ Open this
button group
example in a new tab
@@ -2353,32 +2300,27 @@ Grouping buttons
Continue
</button>
- <a class="govuk-link" href="#">Cancel</a>
+ <a class="govuk-link" href="#">Cancel</a>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2389,7 +2331,6 @@ Grouping buttons
-
element
string
@@ -2477,24 +2418,21 @@ Grouping buttons
-
-
-
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-<div class="govuk-button-group">
+<div class="govuk-button-group">
{{ govukButton({
text: "Continue"
- }) }}
-
- <a class="govuk-link" href="#">Cancel</a>
+ }) }}
+ <a class="govuk-link" href="#">Cancel</a>
</div>
-
+
@@ -2514,8 +2452,7 @@ Stop us
- Open this
-
+ Open this
button with prevent double click
example in a new tab
@@ -2537,8 +2474,6 @@ Stop us
-
-
@@ -2546,8 +2481,7 @@ Stop us
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2556,7 +2490,6 @@
Stop us
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
@@ -2567,7 +2500,6 @@ Stop us
-
element
string
@@ -2657,19 +2589,18 @@ Stop us
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Confirm and send",
preventDoubleClick: true
}) }}
-
+
diff --git a/deploy/public/components/character-count/index.html b/deploy/public/components/character-count/index.html
index 09fd484b2f..b102f0c5a4 100644
--- a/deploy/public/components/character-count/index.html
+++ b/deploy/public/components/character-count/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
character count
example in a new tab
@@ -1159,35 +1158,29 @@
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
- <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+
<div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 200 characters
- </div>
-
-</div>
+ </div>
+</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1198,7 +1191,6 @@
-
id
string
@@ -1257,230 +1249,224 @@
object
Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+See <a href="#options-character-count-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-character-count-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-character-count-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">spellcheck</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">countMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the count message.
+ See <a href="#options-character-count-example--countMessage">countMessage</a>.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--countMessage">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the count message.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ govukCharacterCount({
+{{ govukCharacterCount({
name: "with-hint",
id: "with-hint",
maxlength: 200,
label: {
text: "Can you provide more detail?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
hint: {
@@ -1488,7 +1474,7 @@
}
}) }}
-
+
@@ -1521,8 +1507,7 @@ How it works
- Open this
-
+ Open this
character count second
example in a new tab
@@ -1549,35 +1534,29 @@ How it works
<textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
- <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+ <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
You can enter up to 200 characters
- </div>
-
-</div>
+ </div>
+</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1588,7 +1567,6 @@ How it works
-
id
string
@@ -1647,955 +1625,572 @@ How it works
object
Required.
- Options for the label component.
+ Options for the label component.
+See <a href="#options-character-count-second-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-character-count-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-character-count-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">spellcheck</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Optional field to enable or disable the <code>spellcheck</code> attribute on the character count.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">countMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the count message.
+ See <a href="#options-character-count-second-example--countMessage">countMessage</a>.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--countMessage">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for countMessage</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the count message.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-character-count-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- See hint.
-
-
-
- errorMessage
- 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.
+{{ govukCharacterCount({
+ name: "with-hint",
+ id: "with-hint",
+ maxlength: 200,
+ label: {
+ text: "Can you provide more detail?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information like your National Insurance number or credit card details."
+ }
+}) }}
+
+
+
- See errorMessage.
-
-
+
+
+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-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">
+ You can enter up to 200 characters
+ </div>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
- formGroup
- object
+ id
+ string
- Options for the form-group wrapper.
- See formGroup.
+ Required.
+ The ID of the textarea.
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-
-{{ govukCharacterCount({
- name: "with-hint",
- id: "with-hint",
- maxlength: 200,
- label: {
- text: "Can you provide more detail?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information like your National Insurance number or credit card details."
- }
-}) }}
-
-
-
-
-
-
-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-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">
- You can enter up to 200 characters
- </div>
-
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- {{ govukCharacterCount({
- id: "label-as-page-heading",
- name: "label-as-page-heading",
- maxlength: 200,
- label: {
- text: "Describe the nature of your event"
- }
-}) }}
-
-
-
-
-
-
-Consider if a word count is more helpful
-In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
-Do this by setting data-maxwords in the component markup. For example, data-maxwords="150" will set a word limit of 150.
-
-
-
-
-
-
-
- <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">
- You can enter up to 150 words
- </div>
-
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
+ name
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.
+ The name of the textarea, which is submitted with the form data.
- for
+ rows
string
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ Optional initial value of the textarea.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- html
+ maxwords
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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-
-{{ govukCharacterCount({
- name: "word-count",
- id: "word-count",
- maxwords: 150,
+ {{ govukCharacterCount({
+ id: "label-as-page-heading",
+ name: "label-as-page-heading",
+ maxlength: 200,
label: {
- text: "Enter a job description",
- classes: "govuk-label--l",
- isPageHeading: true
+ text: "Describe the nature of your event"
}
}) }}
@@ -2604,70 +2199,61 @@ Consider if a word count is mo
-Avoid narrow limits
-
When using a character count, try to set the limit higher than most users will need. Find out what this is by doing user research and data analysis.
-If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.
-To do this, set a threshold in the component markup. For example, data-threshold="75" will show the count message only when users have entered 75% of the limit.
-Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown — though you might choose to include the character limit in the hint text.
-
+Consider if a word count is more helpful
+In some cases it may be more helpful to show a word count. For example, if your question requires a longer answer.
+Do this by setting data-maxwords in the component markup. For example, data-maxwords="150" will set a word limit of 150.
+
-
+
-
+
-
-
+
+
- <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="112" data-threshold="75">
+ <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="threshold">
- Can you provide more detail?
+ <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="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">
- You can enter up to 112 characters
+ <textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
</div>
-</div>
+ <div id="word-count-info" class="govuk-hint govuk-character-count__message">
+ You can enter up to 150 words
+ </div>
+</div>
-
-
-
-
-
+
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2677,7 +2263,6 @@ Avoid narrow limits
-
id
string
@@ -2702,339 +2287,324 @@ Avoid narrow limits
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- maxlength
- 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.
-
-
-
- maxwords
- 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.
-
-
-
- threshold
- 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.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
+ value
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.
+ Optional initial value of the textarea.
- html
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- id
+ maxwords
string
- Optional ID attribute to add to the hint span tag.
+ Required.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ govukCharacterCount({
- name: "threshold",
- id: "threshold",
- maxlength: 112,
- threshold: 75,
- value: "Type another letter into this field after this message to see the threshold feature",
+{{ govukCharacterCount({
+ name: "word-count",
+ id: "word-count",
+ maxwords: 150,
label: {
- text: "Can you provide more detail?",
- classes: "govuk-label--l",
+ text: "Enter a job description",
+ classes: "govuk-label–l",
isPageHeading: true
}
}) }}
-
+
-Error messages
-Error messages should be styled like this:
-
+Avoid narrow limits
+When using a character count, try to set the limit higher than most users will need. Find out what this is by doing user research and data analysis.
+If the limit is much higher than most users are likely to reach, you can choose to only display the message after a user has entered a certain amount.
+To do this, set a threshold in the component markup. For example, data-threshold="75" will show the count message only when users have entered 75% of the limit.
+Screen reader users will hear the character limit when they first interact with a textarea using the threshold option. Sighted users will not see anything until the count message is shown — though you might choose to include the character limit in the hint text.
+
-
+
-
+
-
-
+
+
- <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
+ <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>
- <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">
- You can enter up to 350 characters
+ <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>
+ <div id="threshold-info" class="govuk-hint govuk-character-count__message">
+ You can enter up to 112 characters
+ </div>
+</div>
-
-
-
-
-
+
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3044,7 +2614,6 @@ Error messages
-
id
string
@@ -3103,110 +2672,293 @@ Error messages
object
Required.
- Options for the label component.
+ 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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
- See hint.
-
-
-
- errorMessage
- 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.
+{{ govukCharacterCount({
+ name: "threshold",
+ id: "threshold",
+ maxlength: 112,
+ threshold: 75,
+ 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",
+ isPageHeading: true
+ }
+}) }}
+
+
+
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the character count.
-
-
-
- countMessage
- object
-
- Options for the count message.
- See countMessage.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for countMessage
-
-
- Name
- Type
- Description
-
-
-
-
- classes
- string
-
- Classes to add to the count message.
-
-
-
-
-
- Options for label
+Error messages
+Error messages should be styled like this:
+
+
+
+
+
+
+
+ <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">
+ You can enter up to 350 characters
+ </div>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -3215,119 +2967,283 @@ Error messages
-
- text
+ id
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.
+ The ID of the textarea.
- html
+ name
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.
+ The name of the textarea, which is submitted with the form data.
- for
+ rows
string
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
+ Optional initial value of the textarea.
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
- text
+ maxlength
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.
+ If maxwords is set, this is not required. The maximum number of characters. If maxwords is provided, the maxlength option will be ignored.
- html
+ maxwords
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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
+ If maxlength is set, this is not required. The maximum number of words. If maxwords is provided, the maxlength option will be ignored.
- classes
+ threshold
string
- Classes to add to the hint span tag.
+ 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.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+
-
+
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
-{{ 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: {
@@ -3335,7 +3251,7 @@
Error messages
}
}) }}
-
+
diff --git a/deploy/public/components/checkboxes/index.html b/deploy/public/components/checkboxes/index.html
index dceb8d4220..7a91573ed1 100644
--- a/deploy/public/components/checkboxes/index.html
+++ b/deploy/public/components/checkboxes/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
checkboxes
example in a new tab
@@ -1178,32 +1177,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1214,7 +1208,6 @@
-
describedBy
string
@@ -1226,345 +1219,339 @@
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -1586,7 +1573,7 @@
]
}) }}
-
+
@@ -1619,8 +1606,7 @@ If you’re asking one questio
- Open this
-
+ Open this
checkboxes second
example in a new tab
@@ -1666,32 +1652,27 @@ If you’re asking one questio
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1702,7 +1683,6 @@ If you’re asking one questio
-
describedBy
string
@@ -1714,345 +1694,339 @@ If you’re asking one questio
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
+ 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>
+
+
+
- See hint.
-
-
-
- errorMessage
- 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.
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ 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: {
@@ -2074,7 +2048,7 @@
If you’re asking one questio
]
}) }}
-
+
@@ -2085,8 +2059,7 @@ If you’re asking m
- Open this
-
+ Open this
checkboxes without a heading
example in a new tab
@@ -2130,32 +2103,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2166,7 +2134,6 @@ If you’re asking m
-
describedBy
string
@@ -2178,366 +2145,360 @@ If you’re asking m
fieldset
object
- Options for the fieldset component (for example legend).
+ 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>
+
+
+
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
- idPrefix: "waste",
- name: "waste",
- fieldset: {
- legend: {
- text: "Which types of waste do you transport?"
- }
- },
- hint: {
- text: "Select all that apply."
- },
- items: [
- {
- value: "carcasses",
- text: "Waste from animal carcasses"
- },
- {
- value: "mines",
- text: "Waste from mines or quarries"
- },
- {
- value: "farm",
- text: "Farm or agricultural waste"
- }
- ]
-}) }}
-
-
-
+
{{ govukCheckboxes({
+ idPrefix: "waste",
+ name: "waste",
+ fieldset: {
+ legend: {
+ text: "Which types of waste do you transport?"
+ }
+ },
+ hint: {
+ text: "Select all that apply."
+ },
+ items: [
+ {
+ value: "carcasses",
+ text: "Waste from animal carcasses"
+ },
+ {
+ value: "mines",
+ text: "Waste from mines or quarries"
+ },
+ {
+ value: "farm",
+ text: "Farm or agricultural waste"
+ }
+ ]
+}) }}
+
+
+
@@ -2547,8 +2508,7 @@ Checkbox items with hints
- Open this
-
+ Open this
checkbox items with hint
example in a new tab
@@ -2597,393 +2557,381 @@ Checkbox items with hints
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3008,7 +2956,7 @@
Checkbox items with hints
]
}) }}
-
+
@@ -3024,8 +2972,7 @@ Add an option for ‘none’
- Open this
-
+ Open this
checkboxes with 'none' option
example in a new tab
@@ -3078,393 +3025,381 @@ Add an option for ‘none’
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3494,7 +3429,7 @@
Add an option for ‘none’
]
}) }}
-
+
@@ -3504,8 +3439,7 @@ Add an option for ‘none’
- Open this
-
+ Open this
checkboxes with 'none' option showing an error
example in a new tab
@@ -3558,393 +3492,381 @@ Add an option for ‘none’
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
+
+
+ Name
+ Type
+ Description
+
+
+
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -3976,7 +3898,7 @@
Add an option for ‘none’
]
}) }}
-
+
@@ -3988,8 +3910,7 @@ Conditionally revealing a re
- Open this
-
+ Open this
checkboxes with conditionally revealing content
example in a new tab
@@ -4027,357 +3948,64 @@ Conditionally revealing a re
Email address
</label>
<input class="govuk-input govuk-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" autocomplete="email">
- </div>
-
- </div>
- <div class="govuk-checkboxes__item">
- <input class="govuk-checkboxes__input" id="contact-2" name="contact" type="checkbox" value="phone" data-aria-controls="conditional-contact-2">
- <label class="govuk-label govuk-checkboxes__label" for="contact-2">
- Phone
- </label>
- </div>
- <div class="govuk-checkboxes__conditional govuk-checkboxes__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-checkboxes__item">
- <input class="govuk-checkboxes__input" id="contact-3" name="contact" type="checkbox" value="text message" data-aria-controls="conditional-contact-3">
- <label class="govuk-label govuk-checkboxes__label" for="contact-3">
- Text message
- </label>
- </div>
- <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-contact-3">
- <div class="govuk-form-group">
- <label class="govuk-label" for="contact-by-text">
- Mobile phone number
- </label>
- <input class="govuk-input govuk-!-width-one-third" id="contact-by-text" name="contact-by-text" type="tel" autocomplete="tel">
- </div>
-
- </div>
- </div>
-
- </fieldset>
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+ </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-checkboxes__item"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-checkboxes__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">"checkbox"</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-checkboxes__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-checkboxes__conditional govuk-checkboxes__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-checkboxes__item"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-checkboxes__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">"checkbox"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"text message"</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-checkboxes__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-checkboxes__conditional govuk-checkboxes__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>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -4386,63 +4014,344 @@ Conditionally revealing a re
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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-conditionally-revealing-content-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>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -4454,9 +4363,8 @@
Conditionally revealing a re
text: "Email address"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -4467,9 +4375,8 @@
Conditionally revealing a re
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -4480,16 +4387,15 @@
Conditionally revealing a re
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukCheckboxes({
+{% endset -%}
+
{{ govukCheckboxes({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you like to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -4520,7 +4426,7 @@
Conditionally revealing a re
]
}) }}
-
+
@@ -4538,8 +4444,7 @@ Smaller checkboxes
- Open this
-
+ Open this
small checkboxes
example in a new tab
@@ -4588,322 +4493,29 @@ Smaller checkboxes
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ Some options are required for the macro to work; these are marked as “Required” in the option description.
-
-
- Primary options
-
-
- Name
- Type
- Description
-
-
-
-
-
- describedBy
- 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.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+
+ 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
Name
@@ -4912,70 +4524,351 @@ Smaller checkboxes
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
- classes
+ describedBy
string
- Classes to add to the label tag.
+ 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.
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-small-checkboxes-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-small-checkboxes-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for all checkbox items.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of checkbox items objects.
+ See <a href="#options-small-checkboxes-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">values</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the checkboxes container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the checkbox input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each checkbox item label.
+
+ See <a href="#options-small-checkboxes-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each checkbox item.
+
+ See <a href="#options-small-checkboxes-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate checkbox items, for example the text '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-small-checkboxes-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-checkboxes-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ govukCheckboxes({
+{{ govukCheckboxes({
idPrefix: "organisation",
name: "organisation",
- classes: "govuk-checkboxes--small",
+ classes: "govuk-checkboxes–small",
fieldset: {
legend: {
text: "Organisation",
isPageHeading: true,
- classes: "govuk-fieldset__legend--m"
+ classes: "govuk-fieldset__legend–m"
}
},
items: [
@@ -4998,7 +4891,7 @@
Smaller checkboxes
]
}) }}
-
+
@@ -5011,8 +4904,7 @@ Error messages
- Open this
-
+ Open this
checkbox items with error
example in a new tab
@@ -5064,32 +4956,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -5100,7 +4987,6 @@ Error messages
-
describedBy
string
@@ -5112,345 +4998,339 @@ Error messages
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for all checkbox items.
-
-
-
- items
- array
-
- Required.
- Array of checkbox items objects.
- See items.
-
-
-
- values
- 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.
-
-
-
- classes
- string
-
- Classes to add to the checkboxes container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the anchor tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the checkbox item. If omitted, then component global idPrefix option will be applied.
-
-
-
- name
- string
-
- Specific name for the checkbox item. If omitted, then component global name string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the checkbox input.
-
-
-
- label
- object
-
- Provide attributes and classes to each checkbox item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each checkbox item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate checkbox items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the checkbox should be checked when the page loads. Takes precedence over the top-level values option.
-
-
-
- conditional
- boolean
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- string
-
- Provide content for the conditional reveal.
-
-
-
- behaviour
- string
-
- If set to exclusive, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked.
-
-
-
- disabled
- boolean
-
- If true, checkbox will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the checkbox input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-checkbox-items-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using the name option instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for all checkbox items.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of checkbox items objects.
+ See <a href="#options-checkbox-items-with-error-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">values</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ Array of values for checkboxes which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the checkboxes container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the anchor tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each checkbox item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the checkbox item. If omitted, then component global <code>idPrefix</code> option will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific name for the checkbox item. If omitted, then component global <code>name</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the checkbox input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each checkbox item label.
+
+ See <a href="#options-checkbox-items-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each checkbox item.
+
+ See <a href="#options-checkbox-items-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate checkbox items, for example the text '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-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-checkbox-items-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -5478,7 +5358,7 @@
Error messages
]
}) }}
-
+
diff --git a/deploy/public/components/cookie-banner/index.html b/deploy/public/components/cookie-banner/index.html
index e0876d5e6f..c8d85ce80d 100644
--- a/deploy/public/components/cookie-banner/index.html
+++ b/deploy/public/components/cookie-banner/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
default – cookie banner
example in a new tab
@@ -1157,52 +1156,48 @@
<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1213,7 +1208,6 @@
-
ariaLabel
string
@@ -1263,7 +1257,6 @@
-
headingText
string
@@ -1342,7 +1335,6 @@
-
text
string
@@ -1394,21 +1386,18 @@
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -1436,7 +1425,7 @@
]
}) }}
-
+
@@ -1494,8 +1483,7 @@ Option 2: If yo
- Open this
-
+ Open this
server-side implementation – cookie banner
example in a new tab
@@ -1514,54 +1502,49 @@ Option 2: If yo
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1572,7 +1555,6 @@ Option 2: If yo
-
ariaLabel
string
@@ -1622,7 +1604,6 @@ Option 2: If yo
-
headingText
string
@@ -1701,7 +1682,6 @@ Option 2: If yo
-
text
string
@@ -1753,21 +1733,18 @@ Option 2: If yo
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -1797,7 +1774,7 @@
Option 2: If yo
}) }}
</form>
-
+
@@ -1808,8 +1785,7 @@ Option 2: If yo
- Open this
-
+ Open this
server-side implementation with confirmation – cookie banner
example in a new tab
@@ -1828,48 +1804,43 @@ Option 2: If yo
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1880,7 +1851,6 @@ Option 2: If yo
-
ariaLabel
string
@@ -1930,7 +1900,6 @@ Option 2: If yo
-
headingText
string
@@ -2009,7 +1978,6 @@ Option 2: If yo
-
text
string
@@ -2061,20 +2029,17 @@ Option 2: If yo
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set acceptHtml %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2092,7 +2057,7 @@
Option 2: If yo
}) }}
</form>
-
+
@@ -2108,8 +2073,7 @@ Help users ke
- Open this
-
+ Open this
server-side implementation with multiple messages and question visible – cookie banner
example in a new tab
@@ -2128,90 +2092,85 @@ Help users ke
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2222,7 +2181,6 @@ Help users ke
-
ariaLabel
string
@@ -2272,7 +2230,6 @@ Help users ke
-
headingText
string
@@ -2351,7 +2308,6 @@ Help users ke
-
text
string
@@ -2403,29 +2359,24 @@ Help users ke
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2477,7 +2428,7 @@
Help users ke
}) }}
</form>
-
+
@@ -2487,8 +2438,7 @@ Help users ke
- Open this
-
+ Open this
server-side implementation with multiple messages and confirmation visible – cookie banner
example in a new tab
@@ -2507,90 +2457,85 @@ Help users ke
<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>
-
-</form>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2601,7 +2546,6 @@ Help users ke
-
ariaLabel
string
@@ -2651,7 +2595,6 @@ Help users ke
-
headingText
string
@@ -2730,7 +2673,6 @@ Help users ke
-
text
string
@@ -2782,29 +2724,24 @@ Help users ke
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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">
+{% endset %}
+<form method="POST">
{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
@@ -2856,7 +2793,7 @@
Help users ke
}) }}
</form>
-
+
@@ -2878,8 +2815,7 @@ Show
- Open this
-
+ Open this
client-side implementation – cookie banner
example in a new tab
@@ -2897,88 +2833,82 @@ 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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2989,7 +2919,6 @@ Show
-
ariaLabel
string
@@ -3039,7 +2968,6 @@ Show
-
headingText
string
@@ -3118,7 +3046,6 @@ Show
-
text
string
@@ -3170,29 +3097,24 @@ Show
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3236,7 +3158,7 @@
Show
]
}) }}
-
+
@@ -3247,8 +3169,7 @@ When the user has accepted cookies
- Open this
-
+ Open this
accepted replacement message – cookie banner
example in a new tab
@@ -3266,88 +3187,82 @@ When the user has accepted cookies<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3358,7 +3273,6 @@ When the user has accepted cookies
-
ariaLabel
string
@@ -3408,7 +3322,6 @@ When the user has accepted cookies
-
headingText
string
@@ -3487,7 +3400,6 @@ When the user has accepted cookies
-
text
string
@@ -3539,29 +3451,24 @@ When the user has accepted cookies
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3605,7 +3512,7 @@
When the user has accepted cookies
-
+
@@ -3615,8 +3522,7 @@ When the user has rejected cookies
- Open this
-
+ Open this
rejected replacement message – cookie banner
example in a new tab
@@ -3634,88 +3540,82 @@ When the user has rejected cookies<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3726,7 +3626,6 @@ When the user has rejected cookies
-
ariaLabel
string
@@ -3776,7 +3675,6 @@ When the user has rejected cookies
-
headingText
string
@@ -3855,7 +3753,6 @@ When the user has rejected cookies
-
text
string
@@ -3907,29 +3804,24 @@ When the user has rejected cookies
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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 %}
+{% 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 %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -3973,7 +3865,7 @@
When the user has rejected cookies
-
+
@@ -3993,8 +3885,7 @@ If you’re usin
- Open this
-
+ Open this
default – cookie banner second
example in a new tab
@@ -4012,52 +3903,48 @@ If you’re usin
<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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4068,7 +3955,6 @@ If you’re usin
-
ariaLabel
string
@@ -4118,7 +4004,6 @@ If you’re usin
-
headingText
string
@@ -4197,7 +4082,6 @@ If you’re usin
-
text
string
@@ -4249,21 +4133,18 @@ If you’re usin
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -4291,7 +4172,7 @@
If you’re usin
]
}) }}
-
+
@@ -4307,8 +4188,7 @@ If you’re u
- Open this
-
+ Open this
non-essential cookies - cookie banner
example in a new tab
@@ -4326,52 +4206,48 @@ 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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4382,7 +4258,6 @@ If you’re u
-
ariaLabel
string
@@ -4432,7 +4307,6 @@ If you’re u
-
headingText
string
@@ -4511,7 +4385,6 @@ If you’re u
-
text
string
@@ -4563,21 +4436,18 @@ If you’re u
-
-
-
+
-
+
{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukCookieBanner({
ariaLabel: "Cookies on [name of service]",
messages: [
{
@@ -4605,7 +4475,7 @@
If you’re u
]
}) }}
-
+
diff --git a/deploy/public/components/date-input/index.html b/deploy/public/components/date-input/index.html
index 6b3237d57a..a6ff100439 100644
--- a/deploy/public/components/date-input/index.html
+++ b/deploy/public/components/date-input/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
date input
example in a new tab
@@ -1184,32 +1183,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1220,7 +1214,6 @@
-
id
string
@@ -1248,209 +1241,204 @@
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -1458,7 +1446,7 @@
}
}) }}
-
+
@@ -1479,8 +1467,7 @@ How it works
- Open this
-
+ Open this
date input second
example in a new tab
@@ -1532,32 +1519,27 @@ How it works
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1568,7 +1550,6 @@ How it works
-
id
string
@@ -1596,218 +1577,213 @@ How it works
hint
object
- Options for the hint component.
+ Options for the hint component.
+See <a href="#options-date-input-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See hint.
-
-
-
- errorMessage
- 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.
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
- See errorMessage.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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"
- }
- },
- hint: {
- text: "For example, 27 3 2007"
- }
-}) }}
-
-
-
+
{{ govukDateInput({
+ id: "passport-issued",
+ namePrefix: "passport-issued",
+ fieldset: {
+ legend: {
+ text: "When was your passport issued?",
+ isPageHeading: true,
+ classes: "govuk-fieldset__legend–l"
+ }
+ },
+ hint: {
+ text: "For example, 27 3 2007"
+ }
+}) }}
+
+
+
@@ -1818,8 +1794,7 @@ If you’re asking m
- Open this
-
+ Open this
date input without a heading second
example in a new tab
@@ -1869,32 +1844,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1905,7 +1875,6 @@ If you’re asking m
-
id
string
@@ -1933,202 +1902,197 @@ If you’re asking m
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-without-a-heading-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-without-a-heading-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-without-a-heading-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ govukDateInput({
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -2141,7 +2105,7 @@
If you’re asking m
}
}) }}
-
+
@@ -2153,8 +2117,7 @@ Use the autocomplete
- Open this
-
+ Open this
date input to ask for date of birth
example in a new tab
@@ -2206,32 +2169,27 @@ Use the autocomplete
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2242,7 +2200,6 @@ Use the autocomplete
-
id
string
@@ -2270,209 +2227,204 @@ Use the autocomplete
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
+ 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>
+
+
+
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ 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: {
@@ -2481,23 +2433,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"
}
]
}) }}
-
+
@@ -2510,8 +2462,7 @@ Error messages
- Open this
-
+ Open this
date input with errors
example in a new tab
@@ -2566,32 +2517,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2602,7 +2548,6 @@ Error messages
-
id
string
@@ -2630,209 +2575,204 @@ Error messages
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the hint component.
+See <a href="#options-date-input-with-errors-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-date-input-with-errors-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">fieldset</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the fieldset component (for example legend).
+
+ See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the date-input container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date-input container.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific ID. If provided, it will be used instead of the generated ID.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Item-specific name attribute.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Item-specific label text. If provided, this will be used instead of <code>name</code> for item label text.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ If provided, it will be used as the initial value of the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance <code>bday-day</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">pattern</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute">provide a regular expression pattern</a>, used to match allowed character combinations for the input value.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to date input item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the date input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-date-input-with-errors-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -2843,24 +2783,24 @@
Error messages
},
items: [
{
- classes: "govuk-input--width-2 govuk-input--error",
+ classes: "govuk-input–width-2 govuk-input–error",
name: "day",
value: "6"
},
{
- classes: "govuk-input--width-2 govuk-input--error",
+ classes: "govuk-input–width-2 govuk-input–error",
name: "month",
value: "3"
},
{
- classes: "govuk-input--width-4 govuk-input--error",
+ classes: "govuk-input–width-4 govuk-input–error",
name: "year",
value: "2076"
}
]
}) }}
-
+
@@ -2870,8 +2810,7 @@ Error messages
- Open this
-
+ Open this
dates with errors
example in a new tab
@@ -2926,32 +2865,27 @@ Error messages
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2962,7 +2896,6 @@ Error messages
-
id
string
@@ -2990,209 +2923,204 @@ Error messages
hint
object
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- classes
- string
-
- Classes to add to the date-input container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date-input container.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Item-specific ID. If provided, it will be used instead of the generated ID.
-
-
-
- name
- string
-
- Required.
- Item-specific name attribute.
-
-
-
- label
- string
-
- Item-specific label text. If provided, this will be used instead of name for item label text.
-
-
-
- value
- string
-
- If provided, it will be used as the initial value of the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance bday-day. See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- classes
- string
-
- Classes to add to date input item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the date input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ 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: {
@@ -3203,23 +3131,23 @@
Error messages
},
items: [
{
- classes: "govuk-input--width-2",
+ classes: "govuk-input–width-2",
name: "day",
value: "6"
},
{
- classes: "govuk-input--width-2",
+ classes: "govuk-input–width-2",
name: "month",
value: "3"
},
{
- classes: "govuk-input--width-4 govuk-input--error",
+ classes: "govuk-input–width-4 govuk-input–error",
name: "year"
}
]
}) }}
-
+
diff --git a/deploy/public/components/details/index.html b/deploy/public/components/details/index.html
index 6e8f442605..b99acf9556 100644
--- a/deploy/public/components/details/index.html
+++ b/deploy/public/components/details/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
details
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
summaryText
string
@@ -1262,19 +1256,18 @@
-
-
+
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{{ 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."
}) }}
-
+
@@ -1294,8 +1287,7 @@ How it works
- Open this
-
+ Open this
details second
example in a new tab
@@ -1324,8 +1316,6 @@ How it works
-
-
@@ -1333,8 +1323,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1343,7 +1332,6 @@
How it works
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
@@ -1354,7 +1342,6 @@ How it works
-
summaryText
string
@@ -1425,19 +1412,18 @@ How it works
-
-
+
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{{ govukDetails({
+{{ govukDetails({
summaryText: "Help with nationality",
text: "We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post."
}) }}
-
+
diff --git a/deploy/public/components/error-message/index.html b/deploy/public/components/error-message/index.html
index 3f70f0f5fd..dfe2910313 100644
--- a/deploy/public/components/error-message/index.html
+++ b/deploy/public/components/error-message/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
error message
example in a new tab
@@ -1188,32 +1187,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1224,7 +1218,6 @@
-
text
string
@@ -1270,21 +1263,19 @@
-
-
-
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{{ govukDateInput({
+{{ govukDateInput({
fieldset: {
legend: {
text: "When was your passport issued?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -1297,24 +1288,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"
}
]
}) }}
-
+
@@ -1356,8 +1347,6 @@ How it works
-
-
@@ -1365,8 +1354,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1375,7 +1363,6 @@
How it works
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
@@ -1386,7 +1373,6 @@ How it works
-
text
string
@@ -1434,19 +1420,18 @@ How it works
-
-
+
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
-{{ govukErrorMessage({
+{{ govukErrorMessage({
text: "Rhowch eich enw llawn",
visuallyHiddenText: "Gwall"
}) }}
-
+
@@ -1458,8 +1443,7 @@ Legend
- Open this
-
+ Open this
error message with legend
example in a new tab
@@ -1508,32 +1492,27 @@ Legend
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1544,7 +1523,6 @@ Legend
-
text
string
@@ -1590,23 +1568,21 @@ Legend
-
-
-
+
-
+
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ 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: {
@@ -1631,7 +1607,7 @@
Legend
]
}) }}
-
+
@@ -1641,8 +1617,7 @@ Label
- Open this
-
+ Open this
error message with label
example in a new tab
@@ -1673,8 +1648,6 @@ Label
-
-
@@ -1682,8 +1655,7 @@ Label
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1692,7 +1664,6 @@
Label
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
@@ -1703,7 +1674,6 @@ Label
-
text
string
@@ -1751,14 +1721,13 @@ Label
-
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
@@ -1772,7 +1741,7 @@
Label
}
}) }}
-
+
diff --git a/deploy/public/components/error-summary/index.html b/deploy/public/components/error-summary/index.html
index 141450f56f..093a3cbc5b 100644
--- a/deploy/public/components/error-summary/index.html
+++ b/deploy/public/components/error-summary/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
error summary
example in a new tab
@@ -1167,8 +1166,6 @@
-
-
@@ -1176,8 +1173,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1186,7 +1182,6 @@
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
@@ -1197,7 +1192,6 @@
-
titleText
string
@@ -1277,7 +1271,6 @@
-
href
string
@@ -1311,14 +1304,13 @@
-
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -1332,7 +1324,7 @@
]
}) }}
-
+
@@ -1354,8 +1346,7 @@ How it works
- Open this
-
+ Open this
error summary second
example in a new tab
@@ -1389,8 +1380,6 @@ How it works
-
-
@@ -1398,8 +1387,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1408,7 +1396,6 @@
How it works
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
@@ -1419,7 +1406,6 @@ How it works
-
titleText
string
@@ -1499,7 +1485,6 @@ How it works
-
href
string
@@ -1533,14 +1518,13 @@ How it works
-
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
disableAutoFocus: true,
errorList: [
@@ -1555,7 +1539,7 @@
How it works
]
}) }}
-
+
@@ -1567,8 +1551,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to an answer that uses a single field
example in a new tab
@@ -1596,41 +1579,35 @@ Linking from the error su
</div>
</div>
-<h1 class="govuk-heading-l">Your details</h1>
-
-<div class="govuk-form-group govuk-form-group--error">
+
<h1 class="govuk-heading-l">Your details</h1>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="full-name-input">
Full name
</label>
<p id="full-name-input-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter your full name
</p>
- <input class="govuk-input govuk-input--error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
+ <input class="govuk-input govuk-input–error" id="full-name-input" name="name" type="text" aria-describedby="full-name-input-error" autocomplete="name">
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1641,7 +1618,6 @@ Linking from the error su
-
titleText
string
@@ -1721,7 +1697,6 @@ Linking from the error su
-
href
string
@@ -1753,17 +1728,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -1771,11 +1744,9 @@
Linking from the error su
href: "#full-name-input"
}
]
-}) }}
-
-<h1 class="govuk-heading-l">Your details</h1>
-
-{{ govukInput({
+}) }}
+
<h1 class="govuk-heading-l">Your details</h1>
+{{ govukInput({
label: {
text: 'Full name'
},
@@ -1787,7 +1758,7 @@
Linking from the error su
}
}) }}
-
+
@@ -1798,8 +1769,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to an answer that uses multiple fields
example in a new tab
@@ -1827,9 +1797,9 @@ Linking from the error su
</div>
</div>
-<div class="govuk-form-group govuk-form-group--error">
+
<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>
@@ -1843,7 +1813,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">
@@ -1851,7 +1821,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">
@@ -1859,37 +1829,31 @@ Linking from the error su
<label class="govuk-label govuk-date-input__label" for="passport-issued-year">
Year
</label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
+ <input class="govuk-input govuk-date-input__input govuk-input–width-4 govuk-input–error" id="passport-issued-year" name="passport-issued-year" type="text" inputmode="numeric">
</div>
</div>
- </div>
-
- </fieldset>
+ </div>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1900,7 +1864,6 @@ Linking from the error su
-
titleText
string
@@ -1980,7 +1943,6 @@ Linking from the error su
-
href
string
@@ -2012,17 +1974,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -2030,14 +1990,13 @@
Linking from the error su
href: "#passport-issued-year"
}
]
-}) }}
-
-{{ govukDateInput({
+}) }}
+
{{ govukDateInput({
fieldset: {
legend: {
isPageHeading: true,
text: 'When was your passport issued?',
- classes: 'govuk-fieldset__legend--l'
+ classes: 'govuk-fieldset__legend–l'
}
},
id: 'passport-issued',
@@ -2048,23 +2007,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"
}
]
})
}}
-
+
@@ -2074,8 +2033,7 @@ Linking from the error su
- Open this
-
+ Open this
linking from the error summary to checkboxes
example in a new tab
@@ -2103,9 +2061,9 @@ Linking from the error su
</div>
</div>
-<div class="govuk-form-group govuk-form-group--error">
+
<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>
@@ -2138,34 +2096,28 @@
Linking from the error su
Citizen of another country
</label>
</div>
- </div>
-
- </fieldset>
+ </div>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2176,7 +2128,6 @@ Linking from the error su
-
titleText
string
@@ -2256,7 +2207,6 @@ Linking from the error su
-
href
string
@@ -2288,17 +2238,15 @@ Linking from the error su
-
-
-
+
-
+
{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{{ govukErrorSummary({
+{{ govukErrorSummary({
titleText: "There is a problem",
errorList: [
{
@@ -2306,16 +2254,15 @@
Linking from the error su
href: "#nationality"
}
]
-}) }}
-
-{{ 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: {
@@ -2343,7 +2290,7 @@
Linking from the error su
]
}) }}
-
+
@@ -2354,8 +2301,7 @@ Where to put the error summary
- Open this
-
+ Open this
full page example
example in a new tab
@@ -2373,7 +2319,7 @@ 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">
+ <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>
@@ -2388,81 +2334,76 @@
Where to put the error summary
</li>
</ul>
</div>
- </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>
+<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>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2473,7 +2414,6 @@ Where to put the error summary
-
titleText
string
@@ -2553,7 +2493,6 @@ Where to put the error summary
-
href
string
@@ -2585,25 +2524,22 @@ Where to put the error summary
-
-
-
+
-
+
{% 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 %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -2615,50 +2551,50 @@ Where to put the error summary
href: "#passport-issued-year"
}
]
- }) }}
-
- {{ govukDateInput({
- fieldset: {
- legend: {
- isPageHeading: true,
- text: 'When was your passport issued?',
- classes: 'govuk-fieldset__legend--l'
- }
- },
- id: 'passport-issued',
- namePrefix: 'passport-issued',
- errorMessage: {
- text: "Passport issue date must include a year"
- },
- items: [
- {
- name: "day",
- classes: "govuk-input--width-2",
- value: 5
- },
- {
- name: "month",
- classes: "govuk-input--width-2",
- value: 12
- },
- {
- name: "year",
- classes: "govuk-input--width-4 govuk-input--error"
- }
- ]
- })
- }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
-
- </form>
- </div>
- </div>
+ }) }}
+{{ govukDateInput({
+ fieldset: {
+ legend: {
+ isPageHeading: true,
+ text: 'When was your passport issued?',
+ classes: 'govuk-fieldset__legend--l'
+ }
+ },
+ id: 'passport-issued',
+ namePrefix: 'passport-issued',
+ errorMessage: {
+ text: "Passport issue date must include a year"
+ },
+ items: [
+ {
+ name: "day",
+ classes: "govuk-input--width-2",
+ value: 5
+ },
+ {
+ name: "month",
+ classes: "govuk-input--width-2",
+ value: 12
+ },
+ {
+ name: "year",
+ classes: "govuk-input--width-4 govuk-input--error"
+ }
+ ]
+ })
+ }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
diff --git a/deploy/public/components/fieldset/index.html b/deploy/public/components/fieldset/index.html
index c28fb38741..ee5b42f127 100644
--- a/deploy/public/components/fieldset/index.html
+++ b/deploy/public/components/fieldset/index.html
@@ -1133,8 +1133,7 @@ When to use this component
- Open this
-
+ Open this
fieldset address group
example in a new tab
@@ -1156,59 +1155,50 @@ When to use this component
</h1>
</legend>
- <div class="govuk-form-group">
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-line-1">
Address line 1
</label>
<input class="govuk-input" id="address-line-1" name="address-line-1" type="text" autocomplete="address-line1">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-line-2">
Address line 2 (optional)
</label>
<input class="govuk-input" id="address-line-2" name="address-line-2" type="text" autocomplete="address-line2">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-town">
Town or city
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="address-town" type="text" autocomplete="address-level2">
- </div>
-
- <div class="govuk-form-group">
+ </div>
+ <div class="govuk-form-group">
<label class="govuk-label" for="address-postcode">
Postcode
</label>
- <input class="govuk-input govuk-input--width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
- </div>
-
-</fieldset>
+ <input class="govuk-input govuk-input–width-10" id="address-postcode" name="address-postcode" type="text" autocomplete="postal-code">
+ </div>
+</fieldset>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1219,7 +1209,6 @@ When to use this component
-
describedBy
string
@@ -1282,7 +1271,6 @@ When to use this component
-
text
string
@@ -1314,43 +1302,38 @@ When to use this component
-
-
-
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{% call govukFieldset({
+{% call govukFieldset({
legend: {
text: "What is your address?",
- classes: "govuk-fieldset__legend--l",
+ classes: "govuk-fieldset__legend–l",
isPageHeading: true
}
-}) %}
-
- {{ govukInput({
+}) %}
+ {{ govukInput({
label: {
text: 'Address line 1'
},
id: "address-line-1",
name: "address-line-1",
autocomplete: "address-line1"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: 'Address line 2 (optional)'
},
id: "address-line-2",
name: "address-line-2",
autocomplete: "address-line2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Town or city"
},
@@ -1358,21 +1341,19 @@
When to use this component
id: "address-town",
name: "address-town",
autocomplete: "address-level2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Postcode"
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "address-postcode",
name: "address-postcode",
autocomplete: "postal-code"
- }) }}
-
-{% endcall %}
+ }) }}
+{% endcall %}
-
+
@@ -1386,8 +1367,7 @@ How it works
- Open this
-
+ Open this
fieldset
example in a new tab
@@ -1413,8 +1393,6 @@ How it works
-
-
@@ -1422,8 +1400,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1432,7 +1409,6 @@
How it works
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
@@ -1443,7 +1419,6 @@ How it works
-
describedBy
string
@@ -1506,7 +1481,6 @@ How it works
-
text
string
@@ -1540,22 +1514,21 @@ How it works
-
-
+
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{{ govukFieldset({
+{{ govukFieldset({
legend: {
text: "Legend as page heading",
- classes: "govuk-fieldset__legend--l",
+ classes: "govuk-fieldset__legend–l",
isPageHeading: true
}
}) }}
-
+
diff --git a/deploy/public/components/file-upload/index.html b/deploy/public/components/file-upload/index.html
index f2c01d5514..08d6d14eb6 100644
--- a/deploy/public/components/file-upload/index.html
+++ b/deploy/public/components/file-upload/index.html
@@ -1132,8 +1132,7 @@
- Open this
-
+ Open this
file upload
example in a new tab
@@ -1158,8 +1157,6 @@
-
-
@@ -1167,8 +1164,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1177,7 +1173,6 @@
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
@@ -1188,7 +1183,6 @@
-
name
string
@@ -1225,188 +1219,184 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -1414,7 +1404,7 @@
}
}) }}
-
+
@@ -1427,8 +1417,7 @@ How it works
- Open this
-
+ Open this
file upload second
example in a new tab
@@ -1453,8 +1442,6 @@ How it works
-
-
@@ -1462,8 +1449,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1472,7 +1458,6 @@
How it works
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
@@ -1483,7 +1468,6 @@ How it works
-
name
string
@@ -1520,188 +1504,184 @@ How it works
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -1709,7 +1689,7 @@
How it works
}
}) }}
-
+
@@ -1720,8 +1700,7 @@ Error messages
- Open this
-
+ Open this
error – file upload
example in a new tab
@@ -1749,8 +1728,6 @@ Error messages
-
-
@@ -1758,8 +1735,7 @@ Error messages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1768,7 +1744,6 @@
Error messages
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
@@ -1779,7 +1754,6 @@ Error messages
-
name
string
@@ -1816,188 +1790,184 @@ Error messages
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the file upload component.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the file upload component.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
-{{ govukFileUpload({
+{{ govukFileUpload({
id: "file-upload-1",
name: "file-upload-1",
label: {
@@ -2008,7 +1978,7 @@
Error messages
}
}) }}
-
+
diff --git a/deploy/public/components/footer/index.html b/deploy/public/components/footer/index.html
index 9178c381db..3e321bc62c 100644
--- a/deploy/public/components/footer/index.html
+++ b/deploy/public/components/footer/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
footer
example in a new tab
@@ -1152,44 +1151,40 @@
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1200,7 +1195,6 @@
-
meta
object
@@ -1266,7 +1260,6 @@
-
visuallyHiddenTitle
string
@@ -1308,7 +1301,6 @@
-
text
string
@@ -1344,7 +1336,6 @@
-
title
string
@@ -1387,7 +1378,6 @@
-
text
string
@@ -1423,7 +1413,6 @@
-
text
string
@@ -1450,7 +1439,6 @@
-
text
string
@@ -1466,18 +1454,16 @@
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({}) }}
+{{ govukFooter({}) }}
-
+
@@ -1493,8 +1479,7 @@ Footer without links
- Open this
-
+ Open this
footer second
example in a new tab
@@ -1514,44 +1499,40 @@ Footer without links
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1562,7 +1543,6 @@ Footer without links
-
meta
object
@@ -1628,7 +1608,6 @@ Footer without links
-
visuallyHiddenTitle
string
@@ -1670,7 +1649,6 @@ Footer without links
-
text
string
@@ -1706,7 +1684,6 @@ Footer without links
-
title
string
@@ -1749,7 +1726,6 @@ Footer without links
-
text
string
@@ -1785,7 +1761,6 @@ Footer without links
-
text
string
@@ -1812,7 +1787,6 @@ Footer without links
-
text
string
@@ -1828,18 +1802,16 @@ Footer without links
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({}) }}
+{{ govukFooter({}) }}
-
+
@@ -1849,8 +1821,7 @@ Footer with links
- Open this
-
+ Open this
footer with links to meta information
example in a new tab
@@ -1888,44 +1859,40 @@ Footer with links
</li>
</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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1936,7 +1903,6 @@ Footer with links
-
meta
object
@@ -2002,7 +1968,6 @@ Footer with links
-
visuallyHiddenTitle
string
@@ -2044,7 +2009,6 @@ Footer with links
-
text
string
@@ -2080,7 +2044,6 @@ Footer with links
-
title
string
@@ -2123,7 +2086,6 @@ Footer with links
-
text
string
@@ -2159,7 +2121,6 @@ Footer with links
-
text
string
@@ -2186,7 +2147,6 @@ Footer with links
-
text
string
@@ -2202,16 +2162,14 @@ Footer with links
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
meta: {
items: [
{
@@ -2230,7 +2188,7 @@
Footer with links
}
}) }}
-
+
@@ -2252,8 +2210,7 @@ Footer with secondary navigation
- Open this
-
+ Open this
footer with secondary navigation
example in a new tab
@@ -2331,44 +2288,40 @@ Footer with secondary navigation
<div class="govuk-footer__meta">
<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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2379,7 +2332,6 @@ Footer with secondary navigation
-
meta
object
@@ -2445,7 +2397,6 @@ Footer with secondary navigation
-
visuallyHiddenTitle
string
@@ -2487,7 +2438,6 @@ Footer with secondary navigation
-
text
string
@@ -2523,7 +2473,6 @@ Footer with secondary navigation
-
title
string
@@ -2566,7 +2515,6 @@ Footer with secondary navigation
-
text
string
@@ -2602,7 +2550,6 @@ Footer with secondary navigation
-
text
string
@@ -2629,7 +2576,6 @@ Footer with secondary navigation
-
text
string
@@ -2645,16 +2591,14 @@ Footer with secondary navigation
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
navigation: [
{
title: "Two column list",
@@ -2708,7 +2652,7 @@
Footer with secondary navigation
]
}) }}
-
+
@@ -2718,8 +2662,7 @@ Footer with links and second
- Open this
-
+ Open this
footer with secondary navigation and links to meta information
example in a new tab
@@ -2893,44 +2836,40 @@ Footer with links and second
Built by the <a href="#" class="govuk-footer__link">Government Digital Service</a>
</div>
- <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>
+<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>
</footer>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2941,7 +2880,6 @@ Footer with links and second
-
meta
object
@@ -3007,7 +2945,6 @@ Footer with links and second
-
visuallyHiddenTitle
string
@@ -3049,7 +2986,6 @@ Footer with links and second
-
text
string
@@ -3085,7 +3021,6 @@ Footer with links and second
-
title
string
@@ -3128,7 +3063,6 @@ Footer with links and second
-
text
string
@@ -3164,7 +3098,6 @@ Footer with links and second
-
text
string
@@ -3191,7 +3124,6 @@ Footer with links and second
-
text
string
@@ -3207,16 +3139,14 @@ Footer with links and second
-
-
-
+
-
+
{% from "govuk/components/footer/macro.njk" import govukFooter %}
-{{ govukFooter({
+{{ govukFooter({
navigation: [
{
title: "Services and information",
@@ -3351,7 +3281,7 @@
Footer with links and second
}
}) }}
-
+
diff --git a/deploy/public/components/header/index.html b/deploy/public/components/header/index.html
index f6a9c8819b..316fd95813 100644
--- a/deploy/public/components/header/index.html
+++ b/deploy/public/components/header/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
header
example in a new tab
@@ -1172,8 +1171,6 @@
-
-
@@ -1181,8 +1178,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1191,7 +1187,6 @@
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
@@ -1202,7 +1197,6 @@
-
homepageUrl
string
@@ -1300,7 +1294,6 @@
-
text
string
@@ -1341,18 +1334,17 @@
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#"
}) }}
-
+
@@ -1374,8 +1366,7 @@ Default header
- Open this
-
+ Open this
header second
example in a new tab
@@ -1415,8 +1406,6 @@ Default header
-
-
@@ -1424,8 +1413,7 @@ Default header
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1434,7 +1422,6 @@
Default header
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
@@ -1445,7 +1432,6 @@ Default header
-
homepageUrl
string
@@ -1543,7 +1529,6 @@ Default header
-
text
string
@@ -1584,18 +1569,17 @@ Default header
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#"
}) }}
-
+
@@ -1606,8 +1590,7 @@ Header with service name
- Open this
-
+ Open this
header with service name
example in a new tab
@@ -1652,8 +1635,6 @@ Header with service name
-
-
@@ -1661,8 +1642,7 @@ Header with service name
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1671,7 +1651,6 @@
Header with service name
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
@@ -1682,7 +1661,6 @@ Header with service name
-
homepageUrl
string
@@ -1780,7 +1758,6 @@ Header with service name
-
text
string
@@ -1821,20 +1798,19 @@ Header with service name
-
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#",
serviceName: "Service name",
serviceUrl: "#"
}) }}
-
+
@@ -1845,8 +1821,7 @@ Header with service name and na
- Open this
-
+ Open this
header with service name and navigation
example in a new tab
@@ -1887,56 +1862,52 @@ Header with service name and na
<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>
- <ul id="navigation" class="govuk-header__navigation-list">
- <li class="govuk-header__navigation-item govuk-header__navigation-item--active">
- <a class="govuk-header__link" href="#1">
- Navigation item 1
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#2">
- Navigation item 2
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#3">
- Navigation item 3
- </a>
- </li>
- <li class="govuk-header__navigation-item">
- <a class="govuk-header__link" href="#4">
- Navigation item 4
- </a>
- </li>
- </ul>
- </nav>
- </div>
- </div>
+<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">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">"#4"</span>></span>
+ Navigation item 4
+ <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>
+
+
</div>
</header>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1947,7 +1918,6 @@ Header with service name and na
-
homepageUrl
string
@@ -2045,7 +2015,6 @@ Header with service name and na
-
text
string
@@ -2084,16 +2053,14 @@ Header with service name and na
-
-
-
+
-
+
{% from "govuk/components/header/macro.njk" import govukHeader %}
-{{ govukHeader({
+{{ govukHeader({
homepageUrl: "#",
serviceName: "Service name",
serviceUrl: "#",
@@ -2118,7 +2085,7 @@
Header with service name and na
]
}) }}
-
+
diff --git a/deploy/public/components/inset-text/index.html b/deploy/public/components/inset-text/index.html
index 7c4e228472..290241cf1d 100644
--- a/deploy/public/components/inset-text/index.html
+++ b/deploy/public/components/inset-text/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
inset text
example in a new tab
@@ -1153,8 +1152,6 @@
-
-
@@ -1162,8 +1159,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1172,7 +1168,6 @@
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
@@ -1183,7 +1178,6 @@
-
text
string
@@ -1231,18 +1225,17 @@
-
-
+
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{{ govukInsetText({
+{{ govukInsetText({
text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}
-
+
@@ -1264,8 +1257,7 @@ How it works
- Open this
-
+ Open this
inset text second
example in a new tab
@@ -1287,8 +1279,6 @@ How it works
-
-
@@ -1296,8 +1286,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1306,7 +1295,6 @@
How it works
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
@@ -1317,7 +1305,6 @@ How it works
-
text
string
@@ -1365,18 +1352,17 @@ How it works
-
-
+
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-{{ govukInsetText({
+{{ govukInsetText({
text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
}) }}
-
+
diff --git a/deploy/public/components/notification-banner/index.html b/deploy/public/components/notification-banner/index.html
index 7b4319d3f9..158bb505f2 100644
--- a/deploy/public/components/notification-banner/index.html
+++ b/deploy/public/components/notification-banner/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
default – notification banner
example in a new tab
@@ -1171,8 +1170,6 @@
-
-
@@ -1180,8 +1177,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1190,7 +1186,6 @@
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
@@ -1201,7 +1196,6 @@
-
text
string
@@ -1235,86 +1229,84 @@
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukNotificationBanner({
html: html
}) }}
-
+
@@ -1352,8 +1344,7 @@ Telling
- Open this
-
+ Open this
whole service – notification banner
example in a new tab
@@ -1382,8 +1373,6 @@ Telling
-
-
@@ -1391,8 +1380,7 @@ Telling
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1401,7 +1389,6 @@
Telling
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
@@ -1412,7 +1399,6 @@ Telling
-
text
string
@@ -1446,79 +1432,78 @@ Telling
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{{ govukNotificationBanner({
+{{ govukNotificationBanner({
text: 'There may be a delay in processing your application because of the coronavirus outbreak.'
}) }}
-
+
@@ -1535,8 +1520,7 @@ Telling the
- Open this
-
+ Open this
default – notification banner second
example in a new tab
@@ -1568,8 +1552,6 @@ Telling the
-
-
@@ -1577,8 +1559,7 @@ Telling the
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1587,7 +1568,6 @@
Telling the
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
@@ -1598,7 +1578,6 @@ Telling the
-
text
string
@@ -1632,86 +1611,84 @@ Telling the
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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({
+{% endset %}
+{{ govukNotificationBanner({
html: html
}) }}
-
+
@@ -1724,8 +1701,7 @@ Reacting to something the user
- Open this
-
+ Open this
success banner – notification banner
example in a new tab
@@ -1757,8 +1733,6 @@ Reacting to something the user
-
-
@@ -1766,8 +1740,7 @@ Reacting to something the user
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1776,7 +1749,6 @@
Reacting to something the user
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
@@ -1787,7 +1759,6 @@ Reacting to something the user
-
text
string
@@ -1821,87 +1792,85 @@ Reacting to something the user
if you set titleHtml, this option is ignored
-
-
-
- titleHtml
- 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.
-
-
-
- titleHeadingLevel
- string
-
- Sets heading level for the title only. You can only use values between 1 and 6 with this option. The default is 2.
-
-
-
- type
- 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.
-
-
-
- role
- 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.
-
-
-
- titleId
- string
-
- The id for the banner title, and the aria-labelledby attribute in the banner. Defaults to govuk-notification-banner-title.
-
-
-
- disableAutoFocus
- 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.
-
-
-
- classes
- string
-
- The classes that you want to add to the notification banner.
-
-
-
- attributes
- object
-
- The HTML attributes that you want to add to the notification banner, for example, data attributes.
-
-
-
-
-
-
+</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>
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% 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>
-{% endset %}
-
-{{ govukNotificationBanner({
+ <p class="govuk-body">Contact <a class="govuk-notification-banner__link" href="#">example@department.gov.uk</a> if you think there's a problem.</p>
+{% endset %}
+{{ govukNotificationBanner({
html: html,
type: 'success'
}) }}
-
+
diff --git a/deploy/public/components/pagination/index.html b/deploy/public/components/pagination/index.html
index 114391e91c..9e7077a9a6 100644
--- a/deploy/public/components/pagination/index.html
+++ b/deploy/public/components/pagination/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
pagination
example in a new tab
@@ -1182,8 +1181,6 @@
-
-
@@ -1191,8 +1188,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1201,7 +1197,6 @@
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
@@ -1212,7 +1207,6 @@
-
items
array
@@ -1270,7 +1264,6 @@
-
number
string
@@ -1326,7 +1319,6 @@
-
text
string
@@ -1368,7 +1360,6 @@
-
text
string
@@ -1401,14 +1392,13 @@
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -1432,7 +1422,7 @@
]
}) }}
-
+
@@ -1458,8 +1448,7 @@ For smaller numbers of pages
- Open this
-
+ Open this
pagination with number labels
example in a new tab
@@ -1494,8 +1483,6 @@ For smaller numbers of pages
-
-
@@ -1503,8 +1490,7 @@ For smaller numbers of pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1513,7 +1499,6 @@
For smaller numbers of pages
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
@@ -1524,7 +1509,6 @@ For smaller numbers of pages
-
items
array
@@ -1582,7 +1566,6 @@ For smaller numbers of pages
-
number
string
@@ -1638,7 +1621,6 @@ For smaller numbers of pages
-
text
string
@@ -1680,7 +1662,6 @@ For smaller numbers of pages
-
text
string
@@ -1713,14 +1694,13 @@ For smaller numbers of pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
labelText: "1 of 3",
href: "#"
@@ -1731,7 +1711,7 @@
For smaller numbers of pages
}
}) }}
-
+
@@ -1742,8 +1722,7 @@ Add link labels to describe pages
- Open this
-
+ Open this
pagination with text labels
example in a new tab
@@ -1778,8 +1757,6 @@ Add link labels to describe pages
-
-
@@ -1787,8 +1764,7 @@ Add link labels to describe pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1797,7 +1773,6 @@
Add link labels to describe pages
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
@@ -1808,7 +1783,6 @@ Add link labels to describe pages
-
items
array
@@ -1866,7 +1840,6 @@ Add link labels to describe pages
-
number
string
@@ -1922,7 +1895,6 @@ Add link labels to describe pages
-
text
string
@@ -1964,7 +1936,6 @@ Add link labels to describe pages
-
text
string
@@ -1997,14 +1968,13 @@ Add link labels to describe pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
labelText: "Applying for a provisional lorry or bus licence",
href: "#"
@@ -2015,7 +1985,7 @@
Add link labels to describe pages
-
+
@@ -2026,8 +1996,7 @@ For larger numbers of pages
- Open this
-
+ Open this
large number of pages
example in a new tab
@@ -2089,8 +2058,6 @@ For larger numbers of pages
-
-
@@ -2098,8 +2065,7 @@ For larger numbers of pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2108,7 +2074,6 @@
For larger numbers of pages
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
@@ -2119,7 +2084,6 @@ For larger numbers of pages
-
items
array
@@ -2177,7 +2141,6 @@ For larger numbers of pages
-
number
string
@@ -2233,7 +2196,6 @@ For larger numbers of pages
-
text
string
@@ -2275,7 +2237,6 @@ For larger numbers of pages
-
text
string
@@ -2308,14 +2269,13 @@ For larger numbers of pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -2353,7 +2313,7 @@
For larger numbers of pages
]
}) }}
-
+
@@ -2389,8 +2349,7 @@ First and last pages
- Open this
-
+ Open this
first page
example in a new tab
@@ -2433,8 +2392,6 @@ First and last pages
-
-
@@ -2442,8 +2399,7 @@ First and last pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2452,7 +2408,6 @@
First and last pages
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
@@ -2463,7 +2418,6 @@ First and last pages
-
items
array
@@ -2521,7 +2475,6 @@ First and last pages
-
number
string
@@ -2577,7 +2530,6 @@ First and last pages
-
text
string
@@ -2619,7 +2571,6 @@ First and last pages
-
text
string
@@ -2652,14 +2603,13 @@ First and last pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
next: {
href: "#"
},
@@ -2680,7 +2630,7 @@
First and last pages
]
}) }}
-
+
@@ -2695,8 +2645,7 @@ First and last pages
- Open this
-
+ Open this
last page
example in a new tab
@@ -2741,8 +2690,6 @@ First and last pages
-
-
@@ -2750,8 +2697,7 @@ First and last pages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2760,7 +2706,6 @@
First and last pages
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
@@ -2771,7 +2716,6 @@ First and last pages
-
items
array
@@ -2829,7 +2773,6 @@ First and last pages
-
number
string
@@ -2885,7 +2828,6 @@ First and last pages
-
text
string
@@ -2927,7 +2869,6 @@ First and last pages
-
text
string
@@ -2960,14 +2901,13 @@ First and last pages
-
-
+
{% from "govuk/components/pagination/macro.njk" import govukPagination %}
-{{ govukPagination({
+{{ govukPagination({
previous: {
href: "#"
},
@@ -2988,7 +2928,7 @@
First and last pages
]
}) }}
-
+
diff --git a/deploy/public/components/panel/index.html b/deploy/public/components/panel/index.html
index f2bafd77e2..b52b2c495f 100644
--- a/deploy/public/components/panel/index.html
+++ b/deploy/public/components/panel/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
panel
example in a new tab
@@ -1159,8 +1158,6 @@
-
-
@@ -1168,8 +1165,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1178,7 +1174,6 @@
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
@@ -1189,7 +1184,6 @@
-
titleText
string
@@ -1253,19 +1247,18 @@
-
-
+
{% from "govuk/components/panel/macro.njk" import govukPanel %}
-{{ govukPanel({
+{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
-
+
@@ -1281,8 +1274,7 @@ How it works
- Open this
-
+ Open this
panel second
example in a new tab
@@ -1309,8 +1301,6 @@ How it works
-
-
@@ -1318,8 +1308,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1328,7 +1317,6 @@
How it works
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
@@ -1339,7 +1327,6 @@ How it works
-
titleText
string
@@ -1403,19 +1390,18 @@ How it works
-
-
+
{% from "govuk/components/panel/macro.njk" import govukPanel %}
-{{ govukPanel({
+{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
}) }}
-
+
diff --git a/deploy/public/components/phase-banner/index.html b/deploy/public/components/phase-banner/index.html
index dcf87bc02b..18e29372a1 100644
--- a/deploy/public/components/phase-banner/index.html
+++ b/deploy/public/components/phase-banner/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
phase banner
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
text
string
@@ -1213,32 +1207,31 @@
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
@@ -1262,8 +1255,7 @@ How it works
- Open this
-
+ Open this
phase banner second
example in a new tab
@@ -1292,8 +1284,6 @@ How it works
-
-
@@ -1301,8 +1291,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1311,7 +1300,6 @@
How it works
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
@@ -1322,7 +1310,6 @@ How it works
-
text
string
@@ -1344,32 +1331,31 @@ How it works
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
@@ -1393,8 +1379,7 @@ How it works
- Open this
-
+ Open this
phase banner with beta text
example in a new tab
@@ -1423,8 +1408,6 @@ How it works
-
-
@@ -1432,8 +1415,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1442,7 +1424,6 @@
How it works
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
@@ -1453,7 +1434,6 @@ How it works
-
text
string
@@ -1475,32 +1455,31 @@ How it works
object
Options for the tag component.
-
- See tag.
-
-
-
- classes
- string
-
- Classes to add to the phase banner container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the phase banner container.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
{{ govukPhaseBanner({
tag: {
diff --git a/deploy/public/components/radios/index.html b/deploy/public/components/radios/index.html
index 37a75451d9..a2844867e3 100644
--- a/deploy/public/components/radios/index.html
+++ b/deploy/public/components/radios/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
stacked radios
example in a new tab
@@ -1180,32 +1179,27 @@
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1216,336 +1210,329 @@
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -1568,7 +1555,7 @@
]
}) }}
-
+
@@ -1599,8 +1586,7 @@ If you’re asking one questio
- Open this
-
+ Open this
stacked radios second
example in a new tab
@@ -1649,32 +1635,27 @@ If you’re asking one questio
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1685,336 +1666,329 @@ If you’re asking one questio
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -2037,7 +2011,7 @@
If you’re asking one questio
]
}) }}
-
+
@@ -2048,8 +2022,7 @@ If you’re asking m
- Open this
-
+ Open this
radios without a heading
example in a new tab
@@ -2096,32 +2069,27 @@ If you’re asking m
</div>
</div>
- </fieldset>
+
</fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2132,329 +2100,322 @@ If you’re asking m
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
+{{ govukRadios({
idPrefix: "where-do-you-live",
name: "where-do-you-live",
fieldset: {
@@ -2482,7 +2443,7 @@
If you’re asking m
]
}) }}
-
+
@@ -2499,8 +2460,7 @@ Inline radios
- Open this
-
+ Open this
inline radios
example in a new tab
@@ -2540,32 +2500,27 @@ Inline radios
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2576,337 +2531,330 @@ Inline radios
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
- classes: "govuk-radios--inline",
+{{ 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: {
@@ -2924,7 +2872,7 @@
Inline radios
]
}) }}
-
+
@@ -2935,8 +2883,7 @@ Radio items with hints
- Open this
-
+ Open this
radio items with hint
example in a new tab
@@ -2982,32 +2929,27 @@ Radio items with hints
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3018,336 +2960,329 @@ Radio items with hints
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: {
@@ -3371,7 +3306,7 @@
Radio items with hints
]
}) }}
-
+
@@ -3382,8 +3317,7 @@ Radio items with a text divider
- Open this
-
+ Open this
radios with a text divider
example in a new tab
@@ -3439,32 +3373,27 @@ Radio items with a text divider
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3475,336 +3404,329 @@ Radio items with a text divider
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -3834,7 +3756,7 @@
Radio items with a text divider
]
}) }}
-
+
@@ -3846,8 +3768,7 @@ Conditionally revealing a re
- Open this
-
+ Open this
radios with conditionally revealing content
example in a new tab
@@ -3887,65 +3808,60 @@ Conditionally revealing a re
<input class="govuk-input govuk-!-width-one-third" id="contact-by-email" name="contact-by-email" type="email" spellcheck="false" 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>
+<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>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3956,330 +3872,323 @@ Conditionally revealing a re
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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-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-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-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-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-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-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-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-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-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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -4291,9 +4200,8 @@
Conditionally revealing a re
text: "Email address"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -4304,9 +4212,8 @@
Conditionally revealing a re
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -4317,16 +4224,15 @@
Conditionally revealing a re
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you prefer to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -4357,7 +4263,7 @@
Conditionally revealing a re
]
}) }}
-
+
@@ -4376,8 +4282,7 @@ Smaller radios
- Open this
-
+ Open this
small radios
example in a new tab
@@ -4414,32 +4319,27 @@ Smaller radios
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -4450,337 +4350,330 @@ Smaller radios
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-small-radios-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-small-radios-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for each radio item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of radio items objects.
+ See <a href="#options-small-radios-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the radio container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the radio input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each radio item label.
+
+ See <a href="#options-small-radios-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each radio item.
+
+ See <a href="#options-small-radios-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate radio items, for example the text '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-small-radios-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-small-radios-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ govukRadios({
- classes: "govuk-radios--small",
+{{ govukRadios({
+ classes: "govuk-radios–small",
idPrefix: "changed-name",
name: "changed-name",
fieldset: {
legend: {
text: "Filter",
isPageHeading: true,
- classes: "govuk-fieldset__legend--m"
+ classes: "govuk-fieldset__legend–m"
}
},
items: [
@@ -4795,372 +4688,99 @@
Smaller radios
]
}) }}
-
+
Small radios can work well on information dense screens in services designed for repeat use, like caseworking systems.
-In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.
-Error messages
-Display an error message if the user has not:
-
-- selected any radios
-- answered a conditionally revealed question
-
-Error messages should be styled like this:
-
-
-
-
-
-
-
- <div class="govuk-form-group govuk-form-group--error">
- <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <p id="where-do-you-live-error" class="govuk-error-message">
- <span class="govuk-visually-hidden">Error:</span> Select the country where you live
- </p>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-
-
-
-
-
-
-
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- fieldset
- object
-
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
+In services like these, the risk that they will not be noticed is lower because users return to the screen multiple times.
+Error messages
+Display an error message if the user has not:
+
+- selected any radios
+- answered a conditionally revealed question
+
+Error messages should be styled like this:
+
+
+
+
+
+
+
+ <div class="govuk-form-group govuk-form-group--error">
+ <fieldset class="govuk-fieldset" aria-describedby="where-do-you-live-error">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+ <h1 class="govuk-fieldset__heading">
+ Where do you live?
+ </h1>
+ </legend>
+ <p id="where-do-you-live-error" class="govuk-error-message">
+ <span class="govuk-visually-hidden">Error:</span> Select the country where you live
+ </p>
+ <div class="govuk-radios" data-module="govuk-radios">
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live">
+ England
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
+ Scotland
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
+ Wales
+ </label>
+ </div>
+ <div class="govuk-radios__item">
+ <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
+ <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
+ Northern Ireland
+ </label>
+ </div>
+ </div>
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
+ </fieldset>
+</div>
+
+
+
+
+
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -5169,69 +4789,329 @@ Error messages
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
+ fieldset
object
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ Options for the fieldset component (for example legend).
+See <a href="/components/fieldset/#options-fieldset-example">fieldset</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component (for example text).
+
+ See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-inline-radios-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">idPrefix</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ String to prefix ID for each radio item if no ID is specified on each item. If <code>idPrefix</code> is not passed, fallback to using the <code>name</code> attribute instead.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">name</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Name attribute for each radio item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">items</th>
+ <td class="govuk-table__cell ">array</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Array of radio items objects.
+ See <a href="#options-inline-radios-with-error-example--items">items</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value for the radio which should be checked when the page loads. Use this as an alternative to setting the <code>checked</code> option on each individual item.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the radio container.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the radio input tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--items">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for items</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within each radio item label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Specific ID attribute for the radio item. If omitted, then <code>idPrefix</code> string will be applied.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">value</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Value for the radio input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">label</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide attributes and classes to each radio item label.
+
+ See <a href="#options-inline-radios-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Provide hint to each radio item.
+
+ See <a href="#options-inline-radios-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">divider</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Divider text to separate radio items, for example the text '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-with-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-inline-radios-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{{ 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: [
@@ -5257,7 +5137,7 @@
Error messages
}
}) }}
-
+
@@ -5275,8 +5155,7 @@ If it’s a conditionally reve
- Open this
-
+ Open this
radios with conditionally revealing content showing an error
example in a new tab
@@ -5319,65 +5198,60 @@ If it’s a conditionally reve
<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>
+<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>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -5388,330 +5262,323 @@ If it’s a conditionally reve
-
fieldset
object
- Options for the fieldset component (for example legend).
-
- See fieldset.
-
-
-
- hint
- object
-
- Options for the hint component (for example text).
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- idPrefix
- 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.
-
-
-
- name
- string
-
- Required.
- Name attribute for each radio item.
-
-
-
- items
- array
-
- Required.
- Array of radio items objects.
- See items.
-
-
-
- value
- 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.
-
-
-
- classes
- string
-
- Classes to add to the radio container.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Specific ID attribute for the radio item. If omitted, then idPrefix string will be applied.
-
-
-
- value
- string
-
- Required.
- Value for the radio input.
-
-
-
- label
- object
-
- Provide attributes and classes to each radio item label.
-
- See label.
-
-
-
- hint
- object
-
- Provide hint to each radio item.
-
- See hint.
-
-
-
- divider
- string
-
- Divider text to separate radio items, for example the text 'or'.
-
-
-
- checked
- boolean
-
- Whether the radio should be checked when the page loads. Takes precedence over the top-level value option.
-
-
-
- conditional
- string
-
- If true, content provided will be revealed when the item is checked.
-
-
-
- conditional.html
- html
-
- Provide content for the conditional reveal.
-
-
-
- disabled
- boolean
-
- If true, radio will be disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the radio input tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
-
+ 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>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% set emailHtml %}
+{% set emailHtml %}
{{ govukInput({
id: "contact-by-email",
name: "contact-by-email",
@@ -5726,9 +5593,8 @@
If it’s a conditionally reve
text: "Email address cannot be blank"
}
}) }}
-{% endset -%}
-
-{% set phoneHtml %}
+{% endset -%}
+
{% set phoneHtml %}
{{ govukInput({
id: "contact-by-phone",
name: "contact-by-phone",
@@ -5739,9 +5605,8 @@
If it’s a conditionally reve
text: "Phone number"
}
}) }}
-{% endset -%}
-
-{% set textHtml %}
+{% endset -%}
+
{% set textHtml %}
{{ govukInput({
id: "contact-by-text",
name: "contact-by-text",
@@ -5752,16 +5617,15 @@
If it’s a conditionally reve
text: "Mobile phone number"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "contact",
name: "contact",
fieldset: {
legend: {
text: "How would you prefer to be contacted?",
isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
+ classes: "govuk-fieldset__legend–l"
}
},
hint: {
@@ -5793,7 +5657,7 @@
If it’s a conditionally reve
]
}) }}
-
+
diff --git a/deploy/public/components/select/index.html b/deploy/public/components/select/index.html
index a61d635550..1492768589 100644
--- a/deploy/public/components/select/index.html
+++ b/deploy/public/components/select/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
select
example in a new tab
@@ -1161,8 +1160,6 @@
-
-
@@ -1170,8 +1167,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1180,7 +1176,6 @@
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
@@ -1191,7 +1186,6 @@
-
id
string
@@ -1236,237 +1230,232 @@
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "sort",
name: "sort",
label: {
@@ -1493,7 +1482,7 @@
]
}) }}
-
+
@@ -1511,8 +1500,7 @@ How it works
- Open this
-
+ Open this
select second
example in a new tab
@@ -1542,8 +1530,6 @@ How it works
-
-
@@ -1551,8 +1537,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1561,7 +1546,6 @@
How it works
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
@@ -1572,7 +1556,6 @@ How it works
-
id
string
@@ -1617,237 +1600,232 @@ How it works
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "sort",
name: "sort",
label: {
@@ -1874,7 +1852,7 @@
How it works
]
}) }}
-
+
@@ -1885,8 +1863,7 @@ Select with hint
- Open this
-
+ Open this
select with hint
example in a new tab
@@ -1925,8 +1902,6 @@ Select with hint
-
-
@@ -1934,8 +1909,7 @@ Select with hint
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1944,7 +1918,6 @@
Select with hint
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
@@ -1955,7 +1928,6 @@ Select with hint
-
id
string
@@ -2000,237 +1972,232 @@ Select with hint
object
Label text or HTML by specifying value for either text or html keys.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the select.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the select.
-
-
-
-
-
- Options for items
-
-
- Name
- Type
- Description
-
-
-
-
-
- value
- string
-
- Value for the option item. Defaults to an empty string.
-
-
-
- text
- string
-
- Required.
- Text for the option item.
-
-
-
- selected
- boolean
-
- Whether the option should be selected when the page loads. Takes precedence over the top-level value option.
-
-
-
- disabled
- boolean
-
- Sets the option item as disabled.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the option.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/select/macro.njk" import govukSelect %}
-{{ govukSelect({
+{{ govukSelect({
id: "subject",
name: "subject",
label: {
@@ -2281,11 +2248,10 @@
Select with hint
value: "yorkshire",
text: "Yorkshire and the Humber"
}
- ]
-
-}) }}
+ ]
+}) }}
-
+
diff --git a/deploy/public/components/skip-link/index.html b/deploy/public/components/skip-link/index.html
index a3a05a4c83..84ccef4608 100644
--- a/deploy/public/components/skip-link/index.html
+++ b/deploy/public/components/skip-link/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
skip link
example in a new tab
@@ -1149,31 +1148,26 @@
<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>
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1184,7 +1178,6 @@
-
text
string
@@ -1223,23 +1216,20 @@
-
-
-
+
-
+
<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({
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}
-
+
@@ -1257,8 +1247,7 @@ How it works
- Open this
-
+ Open this
skip link second
example in a new tab
@@ -1275,31 +1264,26 @@ 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>
+<a href="#content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1310,7 +1294,6 @@ How it works
-
text
string
@@ -1349,23 +1332,20 @@ 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>
-{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
-
-{{ govukSkipLink({
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
+{{ govukSkipLink({
text: "Skip to main content",
href: "#content"
}) }}
-
+
diff --git a/deploy/public/components/summary-list/index.html b/deploy/public/components/summary-list/index.html
index 10d1aa3703..f1c8a0b980 100644
--- a/deploy/public/components/summary-list/index.html
+++ b/deploy/public/components/summary-list/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
summary list
example in a new tab
@@ -1206,8 +1205,6 @@
-
-
@@ -1215,8 +1212,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1225,7 +1221,6 @@
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
@@ -1236,7 +1231,6 @@
-
rows
array
@@ -1272,7 +1266,6 @@
-
classes
string
@@ -1293,123 +1286,121 @@
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -1467,7 +1458,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: [
@@ -1482,7 +1473,7 @@
]
}) }}
-
+
@@ -1499,8 +1490,7 @@ How it works
- Open this
-
+ Open this
without actions – summary list
example in a new tab
@@ -1554,8 +1544,6 @@ How it works
-
-
@@ -1563,8 +1551,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1573,7 +1560,6 @@
How it works
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
@@ -1584,7 +1570,6 @@ How it works
-
rows
array
@@ -1620,7 +1605,6 @@ How it works
-
classes
string
@@ -1641,123 +1625,121 @@ How it works
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -1788,13 +1770,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>'
}
}
]
}) }}
-
+
@@ -1808,8 +1790,7 @@ Adding actions to each row
- Open this
-
+ Open this
summary list second
example in a new tab
@@ -1883,8 +1864,6 @@ Adding actions to each row
-
-
@@ -1892,8 +1871,7 @@ Adding actions to each row
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1902,7 +1880,6 @@
Adding actions to each row
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
@@ -1913,7 +1890,6 @@ Adding actions to each row
-
rows
array
@@ -1949,7 +1925,6 @@ Adding actions to each row
-
classes
string
@@ -1970,123 +1945,121 @@ Adding actions to each row
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -2144,7 +2117,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: [
@@ -2159,7 +2132,7 @@ Adding actions to each row
]
}) }}
-
+
@@ -2169,8 +2142,7 @@ Adding actions to each row
- Open this
-
+ Open this
summary list with a mix of rows with and without actions
example in a new tab
@@ -2239,8 +2211,6 @@ Adding actions to each row
-
-
@@ -2248,8 +2218,7 @@ Adding actions to each row
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2258,7 +2227,6 @@
Adding actions to each row
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
@@ -2269,7 +2237,6 @@ Adding actions to each row
-
rows
array
@@ -2305,7 +2272,6 @@ Adding actions to each row
-
classes
string
@@ -2326,123 +2292,121 @@ Adding actions to each row
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
+{{ govukSummaryList({
rows: [
{
key: {
@@ -2491,7 +2455,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: [
@@ -2506,7 +2470,7 @@ Adding actions to each row
]
}) }}
-
+
@@ -2518,8 +2482,7 @@ Removing the borders
- Open this
-
+ Open this
without borders – summary list
example in a new tab
@@ -2573,8 +2536,6 @@ Removing the borders
-
-
@@ -2582,8 +2543,7 @@ Removing the borders
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2592,7 +2552,6 @@
Removing the borders
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
@@ -2603,7 +2562,6 @@ Removing the borders
-
rows
array
@@ -2639,7 +2597,6 @@ Removing the borders
-
classes
string
@@ -2660,124 +2617,122 @@ Removing the borders
string
Required.
-
-
-
-
- key.classes
- string
-
- Classes to add to the key wrapper.
-
-
-
- value.text
- 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.
-
-
-
- value.html
- 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.
-
-
-
- value.classes
- string
-
- Classes to add to the value wrapper.
-
-
-
- actions.classes
- string
-
- Classes to add to the actions wrapper.
-
-
-
- actions.items
- array
-
- Array of action item objects.
- See actions.items.
-
-
-
-
-
- Options for actions.items
-
-
- Name
- Type
- Description
-
-
-
-
-
- href
- string
-
- Required.
- The value of the link's href attribute for an action item.
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- visuallyHiddenText
- 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.
-
-
-
- classes
- string
-
- Classes to add to the action item.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the action item.
-
-
-
-
-
-
+
+</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>
+
-
+
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{{ govukSummaryList({
- classes: 'govuk-summary-list--no-border',
+{{ govukSummaryList({
+ classes: 'govuk-summary-list–no-border',
rows: [
{
key: {
@@ -2808,13 +2763,13 @@
Removing the borders
text: "Contact details"
},
value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
}
}
]
}) }}
-
+
diff --git a/deploy/public/components/table/index.html b/deploy/public/components/table/index.html
index 58afb4cd1a..11169acc20 100644
--- a/deploy/public/components/table/index.html
+++ b/deploy/public/components/table/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
table
example in a new tab
@@ -1174,8 +1173,6 @@
-
-
@@ -1183,8 +1180,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1193,7 +1189,6 @@
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
@@ -1204,7 +1199,6 @@
-
rows
array
@@ -1269,7 +1263,6 @@
-
text
string
@@ -1333,7 +1326,6 @@
-
text
string
@@ -1386,16 +1378,15 @@
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Dates and amounts",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -1433,7 +1424,7 @@
]
}) }}
-
+
@@ -1450,8 +1441,7 @@ Table captions
- Open this
-
+ Open this
custom caption size
example in a new tab
@@ -1493,8 +1483,6 @@ Table captions
-
-
@@ -1502,8 +1490,7 @@ Table captions
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1512,7 +1499,6 @@
Table captions
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
@@ -1523,7 +1509,6 @@ Table captions
-
rows
array
@@ -1588,7 +1573,6 @@ Table captions
-
text
string
@@ -1652,7 +1636,6 @@ Table captions
-
text
string
@@ -1705,16 +1688,15 @@ Table captions
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Months and rates",
- captionClasses: "govuk-table__caption--l",
+ captionClasses: "govuk-table__caption–l",
firstCellIsHeader: true,
head: [
{
@@ -1752,7 +1734,7 @@
Table captions
]
}) }}
-
+
@@ -1764,8 +1746,7 @@ Table headers
- Open this
-
+ Open this
table second
example in a new tab
@@ -1807,8 +1788,6 @@ Table headers
-
-
@@ -1816,8 +1795,7 @@ Table headers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1826,7 +1804,6 @@
Table headers
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
@@ -1837,7 +1814,6 @@ Table headers
-
rows
array
@@ -1902,7 +1878,6 @@ Table headers
-
text
string
@@ -1966,7 +1941,6 @@ Table headers
-
text
string
@@ -2019,16 +1993,15 @@ Table headers
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Dates and amounts",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2066,7 +2039,7 @@
Table headers
]
}) }}
-
+
@@ -2077,8 +2050,7 @@ Numbers in a table
- Open this
-
+ Open this
numbers in a table
example in a new tab
@@ -2124,8 +2096,6 @@ Numbers in a table
-
-
@@ -2133,8 +2103,7 @@ Numbers in a table
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2143,7 +2112,6 @@
Numbers in a table
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
@@ -2154,7 +2122,6 @@ Numbers in a table
-
rows
array
@@ -2219,7 +2186,6 @@ Numbers in a table
-
text
string
@@ -2283,7 +2249,6 @@ Numbers in a table
-
text
string
@@ -2336,16 +2301,15 @@ Numbers in a table
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Months and rates",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2403,7 +2367,7 @@
Numbers in a table
]
}) }}
-
+
@@ -2414,8 +2378,7 @@ Custom column widths
- Open this
-
+ Open this
custom width using override classes – table
example in a new tab
@@ -2461,8 +2424,6 @@ Custom column widths
-
-
@@ -2470,8 +2431,7 @@ Custom column widths
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2480,7 +2440,6 @@
Custom column widths
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
@@ -2491,7 +2450,6 @@ Custom column widths
-
rows
array
@@ -2556,7 +2514,6 @@ Custom column widths
-
text
string
@@ -2620,7 +2577,6 @@ Custom column widths
-
text
string
@@ -2673,16 +2629,15 @@ Custom column widths
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Month you apply",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -2735,7 +2690,7 @@
Custom column widths
]
}) }}
-
+
@@ -2746,8 +2701,7 @@ Custom column widths
- Open this
-
+ Open this
custom width using custom classes – table
example in a new tab
@@ -2793,8 +2747,6 @@ Custom column widths
-
-
@@ -2802,8 +2754,7 @@ Custom column widths
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2812,7 +2763,6 @@
Custom column widths
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
@@ -2823,7 +2773,6 @@ Custom column widths
-
rows
array
@@ -2888,7 +2837,6 @@ Custom column widths
-
text
string
@@ -2952,7 +2900,6 @@ Custom column widths
-
text
string
@@ -3005,16 +2952,15 @@ Custom column widths
-
-
+
{% from "govuk/components/table/macro.njk" import govukTable %}
-{{ govukTable({
+{{ govukTable({
caption: "Month you apply",
- captionClasses: "govuk-table__caption--m",
+ captionClasses: "govuk-table__caption–m",
firstCellIsHeader: true,
head: [
{
@@ -3067,7 +3013,7 @@
Custom column widths
]
}) }}
-
+
diff --git a/deploy/public/components/tabs/index.html b/deploy/public/components/tabs/index.html
index 1a96c1b46a..e57a1a347d 100644
--- a/deploy/public/components/tabs/index.html
+++ b/deploy/public/components/tabs/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
tabs
example in a new tab
@@ -1209,8 +1208,8 @@
</tbody>
</table>
- </div>
- <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+
</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">
@@ -1237,10 +1236,9 @@
<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">
@@ -1267,10 +1265,9 @@
<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">
@@ -1297,34 +1294,28 @@
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
- </table>
-
- </div>
+ </table>
+
</div>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1335,7 +1326,6 @@
-
id
string
@@ -1392,7 +1382,6 @@
-
id
string
@@ -1437,7 +1426,6 @@
-
text
string
@@ -1462,17 +1450,15 @@
-
-
-
+
-
+
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
-{% set pastDayHtml %}
+{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
{{ govukTable({
head: [
@@ -1522,9 +1508,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastWeekHtml %}
+{% endset -%}
+
{% set pastWeekHtml %}
<h2 class="govuk-heading-l">Past week</h2>
{{ govukTable({
head: [
@@ -1574,9 +1559,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastMonthHtml %}
+{% endset -%}
+
{% set pastMonthHtml %}
<h2 class="govuk-heading-l">Past month</h2>
{{ govukTable({
head: [
@@ -1626,9 +1610,8 @@
]
]
}) }}
-{% endset -%}
-
-{% set pastYearHtml %}
+{% endset -%}
+
{% set pastYearHtml %}
<h2 class="govuk-heading-l">Past year</h2>
{{ govukTable({
head: [
@@ -1678,9 +1661,8 @@
]
]
}) }}
-{% endset -%}
-
-{{ govukTabs({
+{% endset -%}
+
{{ govukTabs({
items: [
{
label: "Past day",
@@ -1713,7 +1695,7 @@
]
}) }}
-
+
@@ -1756,8 +1738,7 @@ How it works
- Open this
-
+ Open this
tabs second
example in a new tab
@@ -1827,8 +1808,8 @@ How it works
</tbody>
</table>
- </div>
- <div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
+ </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">
@@ -1855,10 +1836,9 @@
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">
@@ -1885,10 +1865,9 @@
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">
@@ -1915,34 +1894,28 @@
How it works
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
- </table>
-
- </div>
+ </table>
+ </div>
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1953,7 +1926,6 @@ How it works
-
id
string
@@ -2010,7 +1982,6 @@ How it works
-
id
string
@@ -2055,7 +2026,6 @@ How it works
-
text
string
@@ -2080,17 +2050,15 @@ How it works
-
-
-
+
-
+
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
-{% set pastDayHtml %}
+{% set pastDayHtml %}
<h2 class="govuk-heading-l">Past day</h2>
{{ govukTable({
head: [
@@ -2140,9 +2108,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastWeekHtml %}
+{% endset -%}
+{% set pastWeekHtml %}
<h2 class="govuk-heading-l">Past week</h2>
{{ govukTable({
head: [
@@ -2192,9 +2159,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastMonthHtml %}
+{% endset -%}
+{% set pastMonthHtml %}
<h2 class="govuk-heading-l">Past month</h2>
{{ govukTable({
head: [
@@ -2244,9 +2210,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{% set pastYearHtml %}
+{% endset -%}
+{% set pastYearHtml %}
<h2 class="govuk-heading-l">Past year</h2>
{{ govukTable({
head: [
@@ -2296,9 +2261,8 @@
How it works
]
]
}) }}
-{% endset -%}
-
-{{ govukTabs({
+{% endset -%}
+{{ govukTabs({
items: [
{
label: "Past day",
@@ -2331,7 +2295,7 @@
How it works
]
}) }}
-
+
diff --git a/deploy/public/components/tag/index.html b/deploy/public/components/tag/index.html
index fbc13fb0f4..6dbf59ab1c 100644
--- a/deploy/public/components/tag/index.html
+++ b/deploy/public/components/tag/index.html
@@ -1131,8 +1131,7 @@
- Open this
-
+ Open this
tag
example in a new tab
@@ -1154,8 +1153,6 @@
-
-
@@ -1163,8 +1160,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1173,7 +1169,6 @@
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
@@ -1184,7 +1179,6 @@
-
text
string
@@ -1218,18 +1212,17 @@
-
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-{{ govukTag({
+{{ govukTag({
text: "completed"
}) }}
-
+
@@ -1247,8 +1240,7 @@ Showing one or two statuses
- Open this
-
+ Open this
multiple tags
example in a new tab
@@ -1280,100 +1272,96 @@ Showing one or two statuses
Inactive
</strong>
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Jesse Smith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Joshua Wessel
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachael Pepper
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Stuart Say
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Laura Frith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag">
- Active
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Tim Harvey
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--grey">
- Inactive
-</strong>
-
- </td>
- </tr>
- </tbody>
+<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>
+ Jesse Smith
+ <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--grey"</span>></span>
+
+ 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>
+ Joshua Wessel
+ <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"</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>
+ Rachael Pepper
+ <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"</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>
+ Stuart Say
+ <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--grey"</span>></span>
+
+ 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>
+ Laura Frith
+ <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"</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>
+ Tim Harvey
+ <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--grey"</span>></span>
+
+ Inactive
+</strong>
+<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1384,7 +1372,6 @@ Showing one or two statuses
-
text
string
@@ -1416,16 +1403,14 @@ Showing one or two statuses
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Name of user </th>
@@ -1440,7 +1425,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1451,7 +1436,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1482,7 +1467,7 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
@@ -1503,14 +1488,14 @@ Showing one or two statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
</tbody>
</table>
-
+
@@ -1521,8 +1506,7 @@ Showing multiple statuses
- Open this
-
+ Open this
coloured tags
example in a new tab
@@ -1554,101 +1538,97 @@ Showing multiple statuses
Urgent
</strong>
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachel Silver
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Laura Frith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Paul French
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Jesse Smith
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--blue">
- New
-</strong>
-
- </td>
- </tr>
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Rachael Pepper
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--green">
- Finished
-</strong>
-
- </td>
- </tr>
-
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Emma Tennant
- </td>
- <td class="govuk-table__cell">
- <strong class="govuk-tag govuk-tag--yellow">
- Waiting on
-</strong>
-
- </td>
- </tr>
- </tbody>
+<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>
+ Rachel Silver
+ <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>
+
+ 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>
+ Laura Frith
+ <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>
+
+ 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>
+ Paul French
+ <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>
+
+ 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>
+ Jesse Smith
+ <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>
+
+ 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>
+ Rachael Pepper
+ <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>
+
+ Finished
+</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>
+ Emma Tennant
+ <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>
+
+ Waiting on
+</strong>
+<span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1659,7 +1639,6 @@ Showing multiple statuses
-
text
string
@@ -1691,16 +1670,14 @@ Showing multiple statuses
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Application </th>
@@ -1715,7 +1692,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Urgent",
- classes: "govuk-tag--red"
+ classes: "govuk-tag–red"
})}}
</td>
</tr>
@@ -1726,7 +1703,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1737,7 +1714,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1748,7 +1725,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1759,7 +1736,7 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
@@ -1770,26 +1747,26 @@ Showing multiple statuses
<td class="govuk-table__cell">
{{govukTag({
text: "Finished",
- classes: "govuk-tag--green"
- })}}
- </td>
- </tr>
-
- <tr class="govuk-table__row">
- <td class="govuk-table__cell">
- Emma Tennant
- </td>
- <td class="govuk-table__cell">
- {{govukTag({
- text: "Waiting on",
- classes: "govuk-tag--yellow"
+ classes: "govuk-tag–green"
})}}
</td>
- </tr>
- </tbody>
+ </tr>
+<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>
+ Emma Tennant
+ <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>
+ {{govukTag({
+ text: "Waiting on",
+ classes: "govuk-tag--yellow"
+ })}}
+ <span class="hljs-tag"></<span class="hljs-name">td</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">tr</span>></span>
+
+ </tbody>
</table>
-
+
@@ -1804,8 +1781,7 @@ Additional colours
- Open this
-
+ Open this
all tag colours
example in a new tab
@@ -1837,122 +1813,118 @@ Additional colours
Inactive
</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>
+<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>
</table>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -1963,7 +1935,6 @@ Additional colours
-
text
string
@@ -1995,16 +1966,14 @@ Additional colours
-
-
-
+
-
+
{%- from "govuk/components/tag/macro.njk" import govukTag -%}
-<table class="govuk-table">
+<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col"> Class name </th>
@@ -2014,107 +1983,107 @@ Additional colours
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--grey </code>
+ <code> govuk-tag–grey </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Inactive",
- classes: "govuk-tag--grey"
+ classes: "govuk-tag–grey"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--green </code>
+ <code> govuk-tag–green </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "New",
- classes: "govuk-tag--green"
+ classes: "govuk-tag–green"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--turquoise </code>
+ <code> govuk-tag–turquoise </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Active",
- classes: "govuk-tag--turquoise"
+ classes: "govuk-tag–turquoise"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--blue </code>
+ <code> govuk-tag–blue </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Pending",
- classes: "govuk-tag--blue"
+ classes: "govuk-tag–blue"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--purple </code>
+ <code> govuk-tag–purple </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Received",
- classes: "govuk-tag--purple"
+ classes: "govuk-tag–purple"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--pink </code>
+ <code> govuk-tag–pink </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Sent",
- classes: "govuk-tag--pink"
+ classes: "govuk-tag–pink"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--red </code>
+ <code> govuk-tag–red </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Rejected",
- classes: "govuk-tag--red"
+ classes: "govuk-tag–red"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--orange </code>
+ <code> govuk-tag–orange </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Declined",
- classes: "govuk-tag--orange"
+ classes: "govuk-tag–orange"
})}}
</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">
- <code> govuk-tag--yellow </code>
+ <code> govuk-tag–yellow </code>
</td>
<td class="govuk-table__cell">
{{govukTag({
text: "Delayed",
- classes: "govuk-tag--yellow"
+ classes: "govuk-tag–yellow"
})}}
</td>
</tr>
</tbody>
</table>
-
+
diff --git a/deploy/public/components/text-input/index.html b/deploy/public/components/text-input/index.html
index e36f6f5e05..9b349cdfc7 100644
--- a/deploy/public/components/text-input/index.html
+++ b/deploy/public/components/text-input/index.html
@@ -1130,8 +1130,7 @@
- Open this
-
+ Open this
text input
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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
@@ -1187,7 +1182,6 @@
-
id
string
@@ -1238,321 +1232,315 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ 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"
}) }}
-
+
@@ -1579,8 +1567,7 @@ If you’re asking one questio
- Open this
-
+ Open this
text input second
example in a new tab
@@ -1606,8 +1593,6 @@ If you’re asking one questio
-
-
@@ -1615,8 +1600,7 @@ If you’re asking one questio
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1625,7 +1609,6 @@
If you’re asking one questio
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
@@ -1636,7 +1619,6 @@ If you’re asking one questio
-
id
string
@@ -1687,322 +1669,316 @@ If you’re asking one questio
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+
{{ govukInput({
+ label: {
+ text: "What is the name of the event?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -2012,8 +1988,7 @@ If you’re asking m
- Open this
-
+ Open this
text input without a heading
example in a new tab
@@ -2038,8 +2013,6 @@ If you’re asking m
-
-
@@ -2047,8 +2020,7 @@ If you’re asking m
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2057,7 +2029,6 @@
If you’re asking m
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
@@ -2068,7 +2039,6 @@ If you’re asking m
-
id
string
@@ -2119,320 +2089,314 @@ If you’re asking m
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?"
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+
{{ govukInput({
+ label: {
+ text: "What is the name of the event?"
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -2448,8 +2412,7 @@ Fixed width inputs
- Open this
-
+ Open this
fixed width inputs
example in a new tab
@@ -2471,64 +2434,55 @@ Fixed width inputs
<input class="govuk-input govuk-input--width-20" id="width-20" name="width-20" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="width-10">
10 character width
</label>
- <input class="govuk-input govuk-input--width-10" id="width-10" name="width-10" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="width-10" name="width-10" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-5">
5 character width
</label>
- <input class="govuk-input govuk-input--width-5" id="width-5" name="width-5" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="width-5" name="width-5" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-4">
4 character width
</label>
- <input class="govuk-input govuk-input--width-4" id="width-4" name="width-4" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-4" id="width-4" name="width-4" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-3">
3 character width
</label>
- <input class="govuk-input govuk-input--width-3" id="width-3" name="width-3" type="text">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-3" id="width-3" name="width-3" type="text">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="width-2">
2 character width
</label>
- <input class="govuk-input govuk-input--width-2" id="width-2" name="width-2" type="text">
+ <input class="govuk-input govuk-input–width-2" id="width-2" name="width-2" type="text">
</div>
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -2539,7 +2493,6 @@ Fixed width inputs
-
id
string
@@ -2589,367 +2542,355 @@ Fixed width inputs
object
Required.
- Options for the label component.
+ Options for the label component.
+See <a href="#options-fixed-width-inputs-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-fixed-width-inputs-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-fixed-width-inputs-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-fixed-width-inputs-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-fixed-width-inputs-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-fixed-width-inputs-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fixed-width-inputs-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "20 character width"
- },
- classes: "govuk-input--width-20",
- id: "width-20",
- name: "width-20"
-}) }}
-
-{{ govukInput({
- label: {
- text: "10 character width"
- },
- classes: "govuk-input--width-10",
- id: "width-10",
- name: "width-10"
-}) }}
-
-{{ govukInput({
- label: {
- text: "5 character width"
- },
- classes: "govuk-input--width-5",
- id: "width-5",
- name: "width-5"
-}) }}
-
-{{ govukInput({
- label: {
- text: "4 character width"
- },
- classes: "govuk-input--width-4",
- id: "width-4",
- name: "width-4"
-}) }}
-
-{{ govukInput({
- label: {
- text: "3 character width"
- },
- classes: "govuk-input--width-3",
- id: "width-3",
- name: "width-3"
-}) }}
-
-{{ govukInput({
- label: {
- text: "2 character width"
- },
- classes: "govuk-input--width-2",
- id: "width-2",
- name: "width-2"
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "20 character width"
+ },
+ classes: "govuk-input–width-20",
+ id: "width-20",
+ name: "width-20"
+}) }}
+{{ govukInput({
+ label: {
+ text: "10 character width"
+ },
+ classes: "govuk-input–width-10",
+ id: "width-10",
+ name: "width-10"
+}) }}
+{{ govukInput({
+ label: {
+ text: "5 character width"
+ },
+ classes: "govuk-input–width-5",
+ id: "width-5",
+ name: "width-5"
+}) }}
+{{ govukInput({
+ label: {
+ text: "4 character width"
+ },
+ classes: "govuk-input–width-4",
+ id: "width-4",
+ name: "width-4"
+}) }}
+{{ govukInput({
+ label: {
+ text: "3 character width"
+ },
+ classes: "govuk-input–width-3",
+ id: "width-3",
+ name: "width-3"
+}) }}
+{{ govukInput({
+ label: {
+ text: "2 character width"
+ },
+ classes: "govuk-input–width-2",
+ id: "width-2",
+ name: "width-2"
+}) }}
+
+
+
@@ -2960,8 +2901,7 @@ Fluid width inputs
- Open this
-
+ Open this
fluid width inputs
example in a new tab
@@ -2983,35 +2923,31 @@ Fluid width inputs
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
@@ -3020,27 +2956,22 @@
Fluid width inputs
-
-
-
-
+
Nunjucks macro options
-
-
+
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.
+ 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.
+ 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
@@ -3051,7 +2982,6 @@ Fluid width inputs
-
id
string
@@ -3101,357 +3031,345 @@ Fluid width inputs
object
Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+See <a href="#options-fluid-width-inputs-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-fluid-width-inputs-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-fluid-width-inputs-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-fluid-width-inputs-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-fluid-width-inputs-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-fluid-width-inputs-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-fluid-width-inputs-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full width"
},
classes: "govuk-!-width-full",
id: "full",
name: "full"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "Three-quarters width"
},
classes: "govuk-!-width-three-quarters",
id: "three-quarters",
name: "three-quarters"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "Two-thirds width"
},
classes: "govuk-!-width-two-thirds",
id: "two-thirds",
name: "two-thirds"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-half width"
},
classes: "govuk-!-width-one-half",
id: "one-half",
name: "one-half"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-third width"
},
classes: "govuk-!-width-one-third",
id: "one-third",
name: "one-third"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "One-quarter width"
},
@@ -3460,7 +3378,7 @@
Fluid width inputs
name: "one-quarter"
}) }}
-
+
@@ -3471,8 +3389,7 @@ Hint text
- Open this
-
+ Open this
hint text
example in a new tab
@@ -3501,8 +3418,6 @@ Hint text
-
-
@@ -3510,8 +3425,7 @@ Hint text
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -3520,7 +3434,6 @@
Hint text
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
@@ -3531,7 +3444,6 @@ Hint text
-
id
string
@@ -3582,325 +3494,319 @@ Hint text
Required.
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>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is the name of the event?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "The name you’ll use on promotional material"
- },
- id: "event-name",
- name: "event-name"
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "What is the name of the event?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "The name you’ll use on promotional material"
+ },
+ id: "event-name",
+ name: "event-name"
+}) }}
+
+
+
@@ -3916,8 +3822,7 @@ Asking for whole numbers
- Open this
-
+ Open this
number input
example in a new tab
@@ -3946,8 +3851,6 @@ Asking for whole numbers
-
-
@@ -3955,8 +3858,7 @@ Asking for whole numbers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -3965,7 +3867,6 @@
Asking for whole numbers
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
@@ -3976,7 +3877,6 @@ Asking for whole numbers
-
id
string
@@ -4027,328 +3927,322 @@ Asking for whole numbers
Required.
Options for the label component.
+
+See <a href="#options-number-input-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-number-input-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-number-input-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-number-input-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-number-input-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-number-input-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-number-input-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "What is your account number?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- classes: "govuk-input--width-10",
- hint: {
- text: "Must be between 6 and 8 digits long"
- },
- id: "account-number",
- name: "account-number",
- inputmode: "numeric",
- spellcheck: false
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "What is your account number?",
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ classes: "govuk-input–width-10",
+ hint: {
+ text: "Must be between 6 and 8 digits long"
+ },
+ id: "account-number",
+ name: "account-number",
+ inputmode: "numeric",
+ spellcheck: false
+}) }}
+
+
+
@@ -4365,8 +4259,7 @@ Asking for decimal numbers
- Open this
-
+ Open this
example of an input asking for numbers with decimal places
example in a new tab
@@ -4393,8 +4286,6 @@ Asking for decimal numbers
-
-
@@ -4402,8 +4293,7 @@ Asking for decimal numbers
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -4412,7 +4302,6 @@
Asking for decimal numbers
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
@@ -4423,7 +4312,6 @@ Asking for decimal numbers
-
id
string
@@ -4474,325 +4362,319 @@ Asking for decimal numbers
Required.
Options for the label component.
+
+See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-example-of-an-input-asking-for-numbers-with-decimal-places-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-example-of-an-input-asking-for-numbers-with-decimal-places-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
+
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "Weight, in kilograms"
- },
- classes: "govuk-input--width-5",
- id: "weight",
- name: "weight",
- suffix: {
- text: "kg"
- },
- spellcheck: false
-}) }}
-
-
-
+{{ govukInput({
+ label: {
+ text: "Weight, in kilograms"
+ },
+ classes: "govuk-input–width-5",
+ id: "weight",
+ name: "weight",
+ suffix: {
+ text: "kg"
+ },
+ spellcheck: false
+}) }}
+
+
+Prefixes and suffixes
- Open this
-
+ Open this
text input with prefix and suffix
example in a new tab
@@ -4835,8 +4716,6 @@
Prefixes and suffixes
-
-
@@ -4844,8 +4723,7 @@
@@ -4844,8 +4723,7 @@ Prefixes and suffixes
-
-
-
-
-
-
-
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -4854,7 +4732,6 @@
Prefixes and suffixes
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.
-| id | string | @@ -4916,197 +4792,383 @@
Required.
Options for the label component.
+
+ |
-
|---|---|---|
| hint | -object | -
- Options for the hint component.
+
+ |
-
| errorMessage | -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.
+{{ govukInput({ + id: "cost-per-item", + name: "cost-per-item", + label: { + text: "What is the cost per item, in pounds?", + classes: "govuk-label–l", + isPageHeading: true + }, + prefix: { + text: "£" + }, + suffix: { + text: "per item" + }, + classes: "govuk-input–width-5", + spellcheck: false +}) }} + + + - See errorMessage. - |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | @@ -5115,184 +5177,415 @@|||
|---|---|---|---|
| text | +id | 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.
+ The ID of the input.
|
| html | +name | 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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
- |
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -|
| classes | -string | -- Classes to add to the label tag. - | -|
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. + The name of the input, which is submitted with the form data. |
| Name | -Type | -Description | -|
|---|---|---|---|
| text | +type | 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.
+ Type of input control to render, for example, a password input control. Defaults to text.
|
| html | +inputmode | 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.
+ Optional value for inputmode.
|
| id | +value | string | - Optional ID attribute to add to the hint span tag. + Optional initial value of the input. |
| classes | +describedBy | string |
- Classes to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
|
| attributes | +label | object | - HTML attributes (for example data attributes) to add to the hint span tag. - | -
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>
+
+
-
+ {% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
- id: "cost-per-item",
- name: "cost-per-item",
+{{ govukInput({
+ id: "cost",
+ name: "cost",
label: {
- text: "What is the cost per item, in pounds?",
- classes: "govuk-label--l",
+ text: "What is the cost in pounds?",
+ classes: "govuk-label–l",
isPageHeading: true
},
prefix: {
text: "£"
},
- suffix: {
- text: "per item"
- },
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
spellcheck: false
}) }}
Prefixes and suffixes are useful when there’s a commonly understood symbol or abbreviation for the type of information you’re asking for. Do not rely on prefixes or suffixes alone, because screen readers will not read them out.
-If you need a specific type of information, say so in the input label or hint text as well. For example, put ‘Cost, in pounds’ in the input label and use the ‘£’ symbol in the prefix.
-Position prefixes and suffixes so that they’re outside of their input. This is to avoid interfering with some browsers that might insert an icon into the input (for example to show or generate a password).
-Some users may miss that the input already has a suffix or prefix, and enter a prefix or suffix into the input. Allow for this in your validation and do not show an error.
-Text inputs with a prefix
-
+
Text inputs with a suffix
+
-
+
-
+
-
-
+
+
-
-
<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?
+ <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">
- <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">
+ <div class="govuk-input__wrapper"><input class="govuk-input govuk-input--width-5" id="weight" name="weight" type="text" spellcheck="false">
+ <div class="govuk-input__suffix" aria-hidden="true">kg</div>
</div>
</div>
-
-
-
+
+
+
Nunjucks macro options
-
-
+
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -5301,8 +5594,7 @@
Text inputs with a prefix
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.
- -| id | string | @@ -5363,91 +5654,364 @@
Required.
Options for the label component.
+
+ |
-
|---|---|---|
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
+
+ |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | @@ -5456,104 +6020,414 @@|||
|---|---|---|---|
| text | +id | 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.
+ The ID of the input.
|
| html | +name | 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.
+ The name of the input, which is submitted with the form data.
|
| classes | +type | string | - Classes to add to the prefix. - | -
| attributes | -object | -
- HTML attributes (for example data attributes) to add to the prefix element.
+ Type of input control to render, for example, a password input control. Defaults to text.
|
| Name | -Type | -Description | -|
|---|---|---|---|
| text | +inputmode | 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.
+ Optional value for inputmode.
|
| html | +value | 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.
+ Optional initial value of the input.
|
| classes | +describedBy | string |
- Classes to add to the suffix element.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
|
| attributes | +label | object | - HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | @@ -5562,1405 +6436,355 @@|||
|---|---|---|---|
| text | +id | 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.
+ The ID of the input.
|
| html | +name | 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.
+ The name of the input, which is submitted with the form data.
|
| for | +type | string |
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -
- Whether the label also acts as the heading for the page.
+ Type of input control to render, for example, a password input control. Defaults to text.
|
|
| classes | +inputmode | string | - Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. + Optional value for inputmode. |
| Name | -Type | -Description | -||
|---|---|---|---|---|
| text | +value | 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.
+ Optional initial value of the input.
|
|
| html | +describedBy | 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.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
|
|
| id | -string | +label | +object | - Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -||
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
-
- {% 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",
- isPageHeading: true
- },
- prefix: {
- text: "£"
- },
- 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__suffix" aria-hidden="true">kg</div>
- </div>
-</div>
-
-
-
-
-
-
- - - Nunjucks macro options - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-- 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. -
- -| Name | -Type | -Description | -
|---|---|---|
| id | -string | -- Required. - The ID of the input. - | -
| name | -string | -- Required. - The name of the input, which is submitted with the form data. - | -
| type | -string | -
- Type of input control to render, for example, a password input control. Defaults to text.
- |
-
| inputmode | -string | -- Optional value for inputmode. - | -
| value | -string | -- Optional initial value of the input. - | -
| describedBy | -string | -
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- |
-
| label | -object | -- Required. - Options for the label component. - - See label. - | -
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
-
- {% 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",
- isPageHeading: true
- },
- suffix: {
- text: "kg"
- },
- classes: "govuk-input--width-5",
- spellcheck: false
-}) }}Use the autocomplete attribute
-Use the autocomplete attribute on text inputs to help users complete forms more quickly. This lets you specify an input’s purpose so browsers can autofill the information on a user’s behalf if they’ve entered it previously.
For example, to enable autofill on a postcode field, set the autocomplete attribute to postal-code. See how to do this in the HTML and Nunjucks tabs in the following example.
-
-
-
-
-
-
-
-
-
-
-
-
- <div class="govuk-form-group">
- <label class="govuk-label" for="postcode">
- Postcode
- </label>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
-</div>
-
-
-
-
-
-
- - - Nunjucks macro options - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-- 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. -
- -| Name | -Type | -Description | -
|---|---|---|
| id | -string | -- Required. - The ID of the input. - | -
| name | -string | -- Required. - The name of the input, which is submitted with the form data. - | -
| type | -string | -
- Type of input control to render, for example, a password input control. Defaults to text.
- |
-
| inputmode | -string | -- Optional value for inputmode. - | -
| value | -string | -- Optional initial value of the input. - | -
| describedBy | -string | -
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- |
-
| label | -object | -- Required. - Options for the label component. - - See label. - | -
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
- label: {
- text: "Postcode"
- },
- classes: "govuk-input--width-10",
- id: "postcode",
- name: "postcode",
- autocomplete: "postal-code"
-}) }}If you are working in production and there is a relevant input purpose, you’ll need to use the autocomplete attribute 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 disable copy and paste
-Users often need to copy and paste information into a text input, so do not stop them from doing this.
-How and when to spellcheck a user’s input
-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.
-
-
-
-
@@ -6981,8 +6805,7 @@
-
-
-
-
- <div class="govuk-form-group">
- <label class="govuk-label" for="name">
- Reference number
- </label>
- <input class="govuk-input" id="name" name="name" type="text" spellcheck="false">
-</div>
-
-
-
-
- - - Nunjucks macro options - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Required.
+ Options for the label component.
+
+
- 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. -
- -| Name | -Type | -Description | -
|---|---|---|
| id | -string | -- Required. - The ID of the input. - | -
| name | -string | -- Required. - The name of the input, which is submitted with the form data. - | -
| type | -string | -
- Type of input control to render, for example, a password input control. Defaults to text.
- |
-
| inputmode | -string | -- Optional value for inputmode. - | -
| value | -string | -- Optional initial value of the input. - | -
| describedBy | -string | -
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- |
-
| label | -object | -- Required. - Options for the label component. - - See label. - | -
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
See <a href="#options-text-input-with-spellcheck-disabled-example-open--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-spellcheck-disabled-example-open--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-spellcheck-disabled-example-open--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-spellcheck-disabled-example-open--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
-
+ {% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Reference number"
},
@@ -6969,7 +6793,7 @@
How and when to spellcheck a u
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
text input with errors
example in a new tab
@@ -7014,8 +6837,6 @@
Error messages
-
-
@@ -7023,326 +6844,17 @@
@@ -7023,326 +6844,17 @@ Error messages
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
+ label
+ object
+
+ Required.
+ Options for the label component.
+
+If the input has a prefix or a su
+
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. -
- -| Name | -Type | -Description | -
|---|---|---|
| id | -string | -- Required. - The ID of the input. - | -
| name | -string | -- Required. - The name of the input, which is submitted with the form data. - | -
| type | -string | -
- Type of input control to render, for example, a password input control. Defaults to text.
- |
-
| inputmode | -string | -- Optional value for inputmode. - | -
| value | -string | -- Optional initial value of the input. - | -
| describedBy | -string | -
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- |
-
| label | -object | -- Required. - Options for the label component. - - See label. - | -
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | @@ -7351,58 +6863,358 @@||||
|---|---|---|---|---|
| text | +id | 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.
+ The ID of the input.
|
|
| html | +name | 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.
+ The name of the input, which is submitted with the form data.
|
|
| id | +type | +string | +
+ Type of input control to render, for example, a password input control. Defaults to text.
+ |
+ |
| inputmode | string | - Optional ID attribute to add to the hint span tag. + Optional value for inputmode. | ||
| classes | +value | string | - Classes to add to the hint span tag. + Optional initial value of the input. | |
| attributes | -object | +describedBy | +string |
- HTML attributes (for example data attributes) to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
|
See <a href="#options-text-input-with-errors-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-errors-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-errors-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-errors-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-errors-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-errors-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-errors-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
-
+
@@ -7425,8 +7237,7 @@ {% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "What is the name of the event?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
id: "event-name",
@@ -7415,7 +7227,7 @@
Error messages
}
}) }}If the input has a prefix or a su
- Open this
-
+ Open this
text input with prefix and suffix with error
example in a new tab
@@ -7459,8 +7270,6 @@ If the input has a prefix or a su
-
-
@@ -7468,8 +7277,7 @@ If the input has a prefix or a su
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -7478,7 +7286,6 @@
If the input has a prefix or a su
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
@@ -7489,7 +7296,6 @@ If the input has a prefix or a su
-
id
string
@@ -7540,316 +7346,310 @@ If the input has a prefix or a su
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- prefix
- object
-
- Options for the prefix element.
- See prefix.
-
-
-
- suffix
- object
-
- Options for the suffix element.
- See suffix.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the input.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used.
-
-
-
- pattern
- string
-
- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the input.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the input.
-
-
-
-
-
- Options for prefix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the prefix.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the prefix element.
-
-
-
-
-
- Options for suffix
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- classes
- string
-
- Classes to add to the suffix element.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the suffix element.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-with-error-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
id: "cost-per-item-error",
name: "cost-per-item-error",
label: {
text: "What is the cost per item, in pounds?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
prefix: {
@@ -7861,11 +7661,11 @@
If the input has a prefix or a su
errorMessage: {
text: "Enter a cost per item, in pounds"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
spellcheck: false
}) }}
- Open this
-
+ Open this
textarea
example in a new tab
@@ -1160,8 +1159,6 @@
-
-
@@ -1169,8 +1166,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1179,7 +1175,6 @@
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
@@ -1190,7 +1185,6 @@
-
id
string
@@ -1241,200 +1235,196 @@
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+See <a href="#options-textarea-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -1442,7 +1432,7 @@
}
}) }}
How it works
- Open this
-
+ Open this
textarea second
example in a new tab
@@ -1491,8 +1480,6 @@ How it works
-
-
@@ -1500,8 +1487,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1510,7 +1496,6 @@
How it works
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
@@ -1521,7 +1506,6 @@ How it works
-
id
string
@@ -1572,726 +1556,573 @@ How it works
Required.
Options for the label component.
+
+See <a href="#options-textarea-second-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-second-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-second-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-second-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% 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",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information, like your National Insurance number or credit card details."
+ }
+}) }}
Use appropriately-sized textareas
+Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the rows attribute.
+
+
+
+
+
+
+
+ <div class="govuk-form-group">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
+ Can you provide more detail?
+ </label>
+ </h1>
+ <div id="more-detail-hint" class="govuk-hint">
+ Do not include personal or financial information, like your National Insurance number or credit card details.
+ </div>
+ <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
+
+
+ Name
+ Type
+ Description
+
+
+
+
+ id
+ string
+
+ Required.
+ The ID of the textarea.
- hint
- object
+ name
+ string
- Options for the hint component.
-
- See hint.
+ Required.
+ The name of the textarea, which is submitted with the form data.
- errorMessage
- object
+ spellcheck
+ boolean
- 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.
+ Optional field to enable or disable the spellcheck attribute on the textarea.
- formGroup
- object
+ rows
+ string
- Options for the form-group wrapper.
- See formGroup.
+ Optional number of textarea rows (default is 5 rows).
- classes
+ value
string
- Classes to add to the textarea.
+ Optional initial value of the textarea.
- autocomplete
+ describedBy
string
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
-
-
-
-
- {% 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",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information, like your National Insurance number or credit card details."
- }
-}) }}Use appropriately-sized textareas
-Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the rows attribute.
-
-
-
-
-
-
-
- <div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="more-detail">
- Can you provide more detail?
- </label>
- </h1>
- <div id="more-detail-hint" class="govuk-hint">
- Do not include personal or financial information, like your National Insurance number or credit card details.
- </div>
- <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="8" aria-describedby="more-detail-hint"></textarea>
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the textarea.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Options for the label component.
+
+See <a href="#options-textarea-appropriately-sized-with-rows-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-appropriately-sized-with-rows-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-appropriately-sized-with-rows-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-appropriately-sized-with-rows-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "more-detail",
id: "more-detail",
rows: "8",
label: {
text: "Can you provide more detail?",
- classes: "govuk-label--l",
- isPageHeading: true
- },
- hint: {
- text: "Do not include personal or financial information, like your National Insurance number or credit card details."
- }
-}) }}
Do not disable copy and paste
-Users will often need to copy and paste information into a textarea, so do not stop them from doing this.
-If you’re asking more than one question on the page
-If you’re asking more than one question on the page, 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>
-</div>
-
- Nunjucks macro options
-
-
-
-
-
- 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
-
-
- Name
- Type
- Description
-
-
-
-
-
- id
- string
-
- Required.
- The ID of the textarea.
-
-
-
- name
- string
-
- Required.
- The name of the textarea, which is submitted with the form data.
-
-
-
- spellcheck
- boolean
-
- Optional field to enable or disable the spellcheck attribute on the textarea.
-
-
-
- rows
- string
-
- Optional number of textarea rows (default is 5 rows).
-
-
-
- value
- string
-
- Optional initial value of the textarea.
-
-
-
- describedBy
- string
-
- One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
-
-
-
- label
- object
-
- Required.
- Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
+ classes: "govuk-label–l",
+ isPageHeading: true
+ },
+ hint: {
+ text: "Do not include personal or financial information, like your National Insurance number or credit card details."
+ }
+}) }}
+
+
+
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
+
+
+Do not disable copy and paste
+Users will often need to copy and paste information into a textarea, so do not stop them from doing this.
+If you’re asking more than one question on the page
+If you’re asking more than one question on the page, 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>
+</div>
+
+ Nunjucks macro options
+
+
+
+
+ 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
Name
@@ -2300,112 +2131,241 @@ If you’re asking m
-
- text
+ id
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.
+ The ID of the textarea.
- html
+ name
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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
+ The name of the textarea, which is submitted with the form data.
- isPageHeading
+ spellcheck
boolean
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
+ Optional field to enable or disable the spellcheck attribute on the textarea.
- html
+ rows
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.
+ Optional number of textarea rows (default is 5 rows).
- id
+ value
string
- Optional ID attribute to add to the hint span tag.
+ Optional initial value of the textarea.
- classes
+ describedBy
string
- Classes to add to the hint span tag.
+ One or more element IDs to add to the aria-describedby attribute, used to provide additional descriptive information for screenreader users.
- attributes
+ label
object
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+ Required.
+ 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>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "more-detail",
id: "more-detail",
label: {
@@ -2413,7 +2373,7 @@
If you’re asking m
}
}) }}
Error messages
- Open this
-
+ Open this
textarea with error
example in a new tab
@@ -2459,8 +2418,6 @@ Error messages
-
-
@@ -2468,8 +2425,7 @@ Error messages
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -2478,7 +2434,6 @@
Error messages
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
@@ -2489,7 +2444,6 @@ Error messages
-
id
string
@@ -2540,200 +2494,196 @@ Error messages
Required.
Options for the label component.
-
- See label.
-
-
-
- hint
- object
-
- Options for the hint component.
-
- See hint.
-
-
-
- errorMessage
- 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.
-
-
-
- formGroup
- object
-
- Options for the form-group wrapper.
- See formGroup.
-
-
-
- classes
- string
-
- Classes to add to the textarea.
-
-
-
- autocomplete
- string
-
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the textarea.
-
-
-
-
-
- Options for formGroup
-
-
- Name
- Type
- Description
-
-
-
-
-
- classes
- string
-
- Classes to add to the form group (for example to show error state for the whole group).
-
-
-
-
-
- Options for label
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- for
- string
-
- The value of the for attribute, the ID of the input the label is associated with.
-
-
-
- isPageHeading
- boolean
-
- Whether the label also acts as the heading for the page.
-
-
-
- classes
- string
-
- Classes to add to the label tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the label tag.
-
-
-
-
-
- Options for hint
-
-
- Name
- Type
- Description
-
-
-
-
-
- text
- 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.
-
-
-
- html
- 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.
-
-
-
- id
- string
-
- Optional ID attribute to add to the hint span tag.
-
-
-
- classes
- string
-
- Classes to add to the hint span tag.
-
-
-
- attributes
- object
-
- HTML attributes (for example data attributes) to add to the hint span tag.
-
-
-
-
-
-
+
+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>
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -2744,7 +2694,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
warning text
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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
@@ -1187,7 +1182,6 @@
-
text
string
@@ -1229,19 +1223,18 @@
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
How it works
- Open this
-
+ Open this
warning text second
example in a new tab
@@ -1281,8 +1273,6 @@ How it works
-
-
@@ -1290,8 +1280,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1300,7 +1289,6 @@
How it works
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
@@ -1311,7 +1299,6 @@ How it works
-
text
string
@@ -1353,19 +1340,18 @@ How it works
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
Avoid overwriting GOV.UK Des
If you make a modification involving CSS you might decide to write a selector that targets a GOV.UK Design System class and change its CSS properties.
This will work in the short term but may break if you install an update relying on the component’s previous behaviour.
For example, if you want to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button"> Inverse button </button> </div>
-css .app-interruption-card .govuk-button { background-color: white; color: blue; }
+<div class="app-interruption-card">
+ <button class="govuk-button">
+ Inverse button
+ </button>
+</div>
+.app-interruption-card .govuk-button {
+ background-color: white;
+ color: blue;
+}
+This would work in the short term, but if the GOV.UK Design System team changes how the button component works it could break when you update your service. For examples like this, consider using small modifications to components.
Use a unique prefix for component names
The GOV.UK Design System team uses prefixes, sometimes called namespacing, to make sure the code in the GOV.UK Design System does not unintentionally break your application code.
@@ -1067,14 +1076,29 @@ Use a unique prefix for compone
Custom override classes
If you need to specify some custom override classes which do not belong to a particular component, you can define these using your prefix and the -!- convention from the GOV.UK Design System.
For example, to define a custom width for a specific reference number in your services you might do this.
-css .app-\!-reference-number-width { width: 10ch !important; }
-html <span class="app-!-reference-number-width"> 7446868939 </span>
+.app-\!-reference-number-width {
+ width: 10ch !important;
+}
+<span class="app-!-reference-number-width">
+ 7446868939
+</span>
+Small modifications to components
The GOV.UK Design System uses a naming convention called Block Element Modifier (BEM) which makes it easier to ensure styling is isolated to individual components. You can use this convention to make modifications to components.
When making small modifications to components you can make use of the modifier convention from BEM, which uses a suffix of -- plus a name, alongside your own prefix.
For example, if you wanted to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button app-button--inverse"> Inverse button </button> </div>
-css .app-button--inverse { background-color: govuk-colour("white"); color: govuk-colour("blue"); }
+<div class="app-interruption-card">
+ <button class="govuk-button app-button--inverse">
+ Inverse button
+ </button>
+</div>
+.app-button--inverse {
+ background-color: govuk-colour("white");
+ color: govuk-colour("blue");
+}
+You should not use modifiers when:
- you’re modifying most of the component
diff --git a/deploy/public/get-started/focus-states/index.html b/deploy/public/get-started/focus-states/index.html
index 1a1e28421c..2c1811e36c 100644
--- a/deploy/public/get-started/focus-states/index.html
+++ b/deploy/public/get-started/focus-states/index.html
@@ -1037,7 +1037,10 @@ Mak
Make focusable text accessible
If you use Sass, you should include the govuk-focused-text mixin in your component’s :focus selector if that component is focusable text. For example, the component is a link in body text, or the details component:
-.app-component:focus { @include govuk-focused-text; }
+.app-component:focus {
+ @include govuk-focused-text;
+}
+Make other focusable elements accessible
If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
The 3 Sass variables are:
diff --git a/deploy/public/get-started/labels-legends-headings/index.html b/deploy/public/get-started/labels-legends-headings/index.html
index c0efed0370..417bc22856 100644
--- a/deploy/public/get-started/labels-legends-headings/index.html
+++ b/deploy/public/get-started/labels-legends-headings/index.html
@@ -1034,8 +1034,7 @@ Labels as page headings
- Open this
-
+ Open this
labels as page headings - making labels and legends headings
example in a new tab
@@ -1063,23 +1062,23 @@ Labels as page headings
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
- text: "govuk-label--l",
- classes: "govuk-label--l",
+ text: "govuk-label–l",
+ classes: "govuk-label–l",
isPageHeading: true
},
hint: {
- text: "This example shows an <h1> around a <label> with the class of govuk-label--l"
+ text: "This example shows an <h1> around a <label> with the class of govuk-label–l"
},
id: "example",
name: "example"
}) }}
Legends as page headings
- Open this
-
+ Open this
legends as page headings - making labels and legends headings
example in a new tab
@@ -1138,15 +1136,14 @@ Legends as page headings
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1175,7 +1172,7 @@
Legends as page headings
]
}) }}
-
+ Styling labels
- Open this
-
+ Open this
styling labels - making labels and legends headings
example in a new tab
@@ -1213,22 +1209,21 @@ Styling labels
<input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>
-<div class="govuk-form-group">
- <label class="govuk-label govuk-label--s" for="example-2">
- govuk-label--s
+<div class="govuk-form-group">
+ <label class="govuk-label govuk-label–s" for="example-2">
+ govuk-label–s
</label>
<div id="example-2-hint" class="govuk-hint">
- This example shows a <label> with the class of govuk-label--s
+ This example shows a <label> with the class of govuk-label–s
</div>
<input class="govuk-input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint">
</div>
-
- {% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "govuk-label--m",
classes: "govuk-label--m"
@@ -1238,9 +1233,8 @@
Styling labels
},
id: "example",
name: "example"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "govuk-label--s",
classes: "govuk-label--s"
@@ -1252,7 +1246,7 @@
Styling labels
name: "example-2"
}) }}
-
+ Styling legends
- Open this
-
+ Open this
styling legends - making labels and legends headings
example in a new tab
@@ -1307,16 +1300,15 @@ Styling legends
</div>
</div>
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </fieldset>
+</div>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="checkbox-2-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- govuk-fieldset__legend--s
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–s">
+ govuk-fieldset__legend–s
</legend>
<div id="checkbox-2-hint" class="govuk-hint">
- This example shows a <legend> with the class of govuk-fieldset__legend--s.
+ This example shows a <legend> with the class of govuk-fieldset__legend–s.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
@@ -1337,17 +1329,15 @@
Styling legends
Checkbox 3
</label>
</div>
- </div>
-
- </fieldset>
+ </div>
+ </fieldset>
</div>
-
- {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1373,9 +1363,8 @@
Styling legends
text: "Checkbox 3"
}
]
-}) }}
-
-{{ govukCheckboxes({
+}) }}
+{{ govukCheckboxes({
idPrefix: "checkbox-2",
name: "checkbox-2",
fieldset: {
@@ -1403,7 +1392,7 @@
Styling legends
]
}) }}
-
+ Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1085,8 +1084,6 @@ Using components
-
-
@@ -1094,8 +1091,7 @@ Using components
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1104,7 +1100,6 @@
Using components
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
@@ -1115,7 +1110,6 @@ Using components
-
element
string
@@ -1205,18 +1199,17 @@ Using components
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1054,8 +1053,6 @@ Using components
-
-
@@ -1063,8 +1060,7 @@ Using components
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1073,7 +1069,6 @@
Using components
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
@@ -1084,7 +1079,6 @@ Using components
-
element
string
@@ -1174,18 +1168,17 @@ Using components
-
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Nunjucks
-
- :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" }) }}
+<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” }) }}
{% endblock %}
See the skip link component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- 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 %}
+
+<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 %}
See the header component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the footer component for more details.
-
-
-
- :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 %}
+
+<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 %}
See the footer component for more details.
-
-
-
- :licence_message
-
- No equivalent. Raise an issue if you need this.
-
-
-
-
- :body_end
- bodyEnd
-
+
+<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>
+
@@ -1465,18 +1466,19 @@ Form related class names
Width override classes
-
- 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
-
+<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>
+
diff --git a/deploy/public/patterns/addresses/index.html b/deploy/public/patterns/addresses/index.html
index 5f51765c52..f70fdbd452 100644
--- a/deploy/public/patterns/addresses/index.html
+++ b/deploy/public/patterns/addresses/index.html
@@ -1144,8 +1144,7 @@ Multiple text inputs
- Open this
-
+ Open this
multiple text inputs addresses
example in a new tab
@@ -1167,76 +1166,67 @@ Multiple text inputs
</h1>
</legend>
- <div class="govuk-form-group">
+ <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({
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+{% call govukFieldset({
legend: {
text: "What is your address?",
classes: "govuk-fieldset__legend--l",
isPageHeading: true
}
-}) %}
-
- {{ govukInput({
+}) %}
+ {{ govukInput({
label: {
text: 'Address line 1'
},
id: "address-line-1",
name: "address-line-1",
autocomplete: "address-line1"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: 'Address line 2 (optional)'
},
id: "address-line-2",
name: "address-line-2",
autocomplete: "address-line2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Town or city"
},
@@ -1244,18 +1234,16 @@
Multiple text inputs
id: "address-town",
name: "address-town",
autocomplete: "address-level2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "County (optional)"
},
classes: "govuk-!-width-two-thirds",
id: "address-county",
name: "address-county"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Postcode"
},
@@ -1263,11 +1251,10 @@
Multiple text inputs
id: "address-postcode",
name: "address-postcode",
autocomplete: "postal-code"
- }) }}
-
-{% endcall %}{% endcall %}
-
+
@@ -1307,8 +1294,7 @@ Error messages
- Open this
-
+ Open this
postcode error
example in a new tab
@@ -1335,14 +1321,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Postcode"
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "address-postcode",
name: "address-postcode",
value: "Not a postcode",
@@ -1352,7 +1338,7 @@
Error messages
autocomplete: "postal-code"
}) }}Textarea
- Open this
-
+ Open this
textarea addresses
example in a new tab
@@ -1419,10 +1404,10 @@ Textarea
-
+
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "address",
id: "address",
autocomplete: "street-address",
@@ -1431,7 +1416,7 @@
Textarea
}
}) }}
- Open this
-
+ Open this
bank or building society account details
example in a new tab
@@ -1162,56 +1161,50 @@
<h1 class="govuk-heading-l">Bank or building society account details</h1>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="name-on-the-account">
Name on the account
</label>
<input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="sort-code">
Sort code
</label>
<div id="sort-code-hint" class="govuk-hint">
Must be 6 digits long
</div>
- <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="account-number">
Account number
</label>
<div id="account-number-hint" class="govuk-hint">
Must be between 6 and 8 digits long
</div>
- <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="roll-number">
Building society roll number (if you have one)
</label>
<div id="roll-number-hint" class="govuk-hint">
You can find it on your card, statement or passbook
</div>
- <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Bank or building society account details</h1>
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Bank or building society account details</h1>
+{{ govukInput({
label: {
text: "Name on the account"
},
@@ -1219,9 +1212,8 @@
name: "name-on-the-account",
autocomplete: "name",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Sort code"
},
@@ -1233,9 +1225,8 @@
name: "sort-code",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Account number"
},
@@ -1247,9 +1238,8 @@
name: "account-number",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Building society roll number (if you have one)"
},
@@ -1260,13 +1250,12 @@
id: "roll-number",
name: "roll-number",
spellcheck: false
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Turn off HTML5 validation
- Open this
-
+ Open this
branch question
example in a new tab
@@ -1350,20 +1338,18 @@ Turn off HTML5 validation
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "method-of-payment",
name: "method-of-payment",
fieldset: {
@@ -1394,13 +1380,12 @@
Turn off HTML5 validation
}
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
International bank account details
- Open this
-
+ Open this
international bank account details
example in a new tab
@@ -1447,7 +1431,7 @@ International bank account details<input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
</div>
-<div class="govuk-form-group">
+
<div class="govuk-form-group">
<label class="govuk-label" for="iban">
IBAN
</label>
@@ -1459,11 +1443,10 @@
International bank account details
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "BIC or SWIFT code"
},
@@ -1474,9 +1457,8 @@
International bank account detailsid: "bic-code",
name: "bic-code",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "IBAN"
},
@@ -1488,7 +1470,7 @@
International bank account detailsspellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
errors
example in a new tab
@@ -1530,14 +1511,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Sort code"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
hint: {
text: "Must be 6 digits long"
},
@@ -1551,7 +1532,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
check answers
example in a new tab
@@ -1156,338 +1155,336 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Name"
- },
- value: {
- text: "Sarah Philips"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "name"
- }
- ]
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+ <h2 class="govuk-heading-m">Personal details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Name"
+ },
+ value: {
+ text: "Sarah Philips"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "name"
}
- },
- {
- key: {
- text: "Date of birth"
- },
- value: {
- text: "5 January 1978"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "date of birth"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Date of birth"
+ },
+ value: {
+ text: "5 January 1978"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "date of birth"
}
- },
- {
- key: {
- text: "Address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "address"
}
- },
- {
- key: {
- text: "Contact details"
- },
- value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "contact details"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Contact details"
+ },
+ value: {
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "contact details"
}
- }
- ]
- }) }}
-
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Previous application number"
- },
- value: {
- text: "502135326"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "previous application number"
- }
- ]
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+ <h2 class="govuk-heading-m">Application details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Previous application number"
+ },
+ value: {
+ text: "502135326"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "previous application number"
}
- },
- {
- key: {
- text: "Licence type"
- },
- value: {
- text: "For personal use"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence type"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence type"
+ },
+ value: {
+ text: "For personal use"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence type"
}
- },
- {
- key: {
- text: "Home address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "home address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Home address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "home address"
}
- },
- {
- key: {
- text: "Licence period"
- },
- value: {
- text: "Valid for 6 months"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence period"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence period"
+ },
+ value: {
+ text: "Valid for 6 months"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence period"
}
- }
- ]
- }) }}
+ ]
+ }
+ }
+ ]
+ }) }}
- <h2 class="govuk-heading-m">Now send your application</h2>
+ <h2 class="govuk-heading-m">Now send your application</h2>
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+ <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
- <form action="/form-handler" method="post" novalidate>
+ <form action="/form-handler" method="post" novalidate>
- <input type="hidden" name="answers-checked" value="true">
+ <input type="hidden" name="answers-checked" value="true">
- {{ govukButton({
- text: "Accept and send"
- }) }}
+ {{ govukButton({
+ text: "Accept and send"
+ }) }}
- </form>
+ </form>
- </div>
- </div>
+</div>
+
+ </div>
{% endblock %}
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1226,8 +1217,7 @@ When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@ When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1304,8 +1286,7 @@ When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@ When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1406,8 +1375,7 @@ When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@ When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1489,8 +1447,7 @@ Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1572,8 +1521,7 @@ Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html
index 64d437478f..cbe8d2f713 100644
--- a/deploy/public/patterns/confirmation-pages/index.html
+++ b/deploy/public/patterns/confirmation-pages/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
@@ -1183,8 +1182,7 @@ How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@ Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-</div>
+</div>
-
- {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@ Expanding contact information
<li>We aim to respond within 2 working days</li>
</ul>
- </div>
+ </div>
</details>
-
- {% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
text input with prefix and suffix with error
example in a new tab
@@ -7459,8 +7270,6 @@
If the input has a prefix or a su
-
-
@@ -7468,8 +7277,7 @@
-
@@ -7468,8 +7277,7 @@ If the input has a prefix or a su
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -7478,7 +7286,6 @@
If the input has a prefix or a su
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.
-| id | string | @@ -7540,316 +7346,310 @@Required. Options for the label component. - - See label. - | -
|---|---|---|
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| prefix | -object | -- Options for the prefix element. - See prefix. - | -
| suffix | -object | -- Options for the suffix element. - See suffix. - | -
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the input. - | -
| autocomplete | -string | -- Attribute to identify input purpose, for instance "postal-code" or "username". See autofill for full list of attributes that can be used. - | -
| pattern | -string | -- Attribute to provide a regular expression pattern, used to match allowed character combinations for the input value. - | -
| spellcheck | -boolean | -
- Optional field to enable or disable the spellcheck attribute on the input.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the input. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the prefix. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the prefix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| classes | -string | -- Classes to add to the suffix element. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the suffix element. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">prefix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the prefix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--prefix">prefix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">suffix</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the suffix element.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--suffix">suffix</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-text-input-with-prefix-and-suffix-with-error-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the input.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for instance "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-with-error-example--prefix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for prefix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ Required. If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the prefix.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the prefix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--suffix">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for suffix</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the suffix element.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the suffix element.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-text-input-with-prefix-and-suffix-with-error-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
-
+ {% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
id: "cost-per-item-error",
name: "cost-per-item-error",
label: {
text: "What is the cost per item, in pounds?",
- classes: "govuk-label--l",
+ classes: "govuk-label–l",
isPageHeading: true
},
prefix: {
@@ -7861,11 +7661,11 @@
If the input has a prefix or a su
errorMessage: {
text: "Enter a cost per item, in pounds"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
spellcheck: false
}) }}
- Open this
-
+ Open this
textarea
example in a new tab
@@ -1160,8 +1159,6 @@
-
-
@@ -1169,8 +1166,7 @@
-
@@ -1169,8 +1166,7 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1179,7 +1175,6 @@
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.
-| id | string | @@ -1241,200 +1235,196 @@Required. Options for the label component. - - See label. - | -
|---|---|---|
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the textarea. - | -
| autocomplete | -string | -
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the textarea. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
See <a href="#options-textarea-example--label">label</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">hint</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the hint component.
+
+ See <a href="#options-textarea-example--hint">hint</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">errorMessage</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the error message component. The error message component will not display if you use a falsy value for <code>errorMessage</code>, for example <code>false</code> or <code>null</code>.
+
+ See <a href="/components/error-message/#options-error-message-example">errorMessage</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">formGroup</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ Options for the form-group wrapper.
+ See <a href="#options-textarea-example--formGroup">formGroup</a>.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the textarea.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">autocomplete</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Attribute to <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">identify input purpose</a>, for example <code>postal-code</code> or <code>username</code>. See <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">autofill</a> for full list of attributes that can be used.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the textarea.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--formGroup">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for formGroup</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the form group (for example to show error state for the whole group).
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--label">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for label</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the label. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">for</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ The value of the <code>for</code> attribute, the ID of the input the label is associated with.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">isPageHeading</th>
+ <td class="govuk-table__cell ">boolean</td>
+ <td class="govuk-table__cell ">
+ Whether the label also acts as the heading for the page.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the label tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the label tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="govuk-table app-options__table" id="options-textarea-example--hint">
+ <caption class="govuk-table__caption govuk-heading-m ">Options for hint</caption>
+ <thead class="govuk-table__head">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Name</th>
+ <th class="govuk-table__header app-options__limit-table-cell" scope="col">Type</th>
+ <th class="govuk-table__header" scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody class="govuk-table__body">
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">text</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>html</code> is set, this is not required. Text to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">html</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ <strong>Required.</strong>
+ If <code>text</code> is set, this is not required. HTML to use within the hint. If <code>html</code> is provided, the <code>text</code> option will be ignored.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">id</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Optional ID attribute to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">classes</th>
+ <td class="govuk-table__cell ">string</td>
+ <td class="govuk-table__cell ">
+ Classes to add to the hint span tag.
+ </td>
+ </tr>
+ <tr class="govuk-table__row">
+ <th class="govuk-table__header" scope="row">attributes</th>
+ <td class="govuk-table__cell ">object</td>
+ <td class="govuk-table__cell ">
+ HTML attributes (for example data attributes) to add to the hint span tag.
+ </td>
+ </tr>
+ </tbody>
+ </table>
+
+
-
+ {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -1442,7 +1432,7 @@
}
}) }}
How it works
- Open this
-
+ Open this
textarea second
example in a new tab
@@ -1491,8 +1480,6 @@
How it works
-
-
@@ -1500,8 +1487,7 @@
@@ -1500,8 +1487,7 @@ How it works
-
-
- 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 5f51765c52..f70fdbd452 100644
--- a/deploy/public/patterns/addresses/index.html
+++ b/deploy/public/patterns/addresses/index.html
@@ -1144,8 +1144,7 @@
-
@@ -1307,8 +1294,7 @@
-
@@ -1394,8 +1380,7 @@
-
diff --git a/deploy/public/patterns/bank-details/index.html b/deploy/public/patterns/bank-details/index.html
index 2f75169685..78eaaf7176 100644
--- a/deploy/public/patterns/bank-details/index.html
+++ b/deploy/public/patterns/bank-details/index.html
@@ -1144,8 +1144,7 @@
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1510,7 +1496,6 @@
How it works
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.
-| id | string | @@ -1572,726 +1556,573 @@
Required.
Options for the label component.
+
+
+
+
+
+
+
- See label.
+Use appropriately-sized textareas+Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
+
-
- + + Nunjucks macro options + ++
+
-+ 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. + +
-
- Use appropriately-sized textareas-Make the height of a textarea proportional to the amount of text you expect users to enter. You can set the height of a textarea by by specifying the
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - Nunjucks macro options - --
-
-
- 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. - - -
+
-Do not disable copy and paste-Users will often need to copy and paste information into a textarea, so do not stop them from doing this. -If you’re asking more than one question on the page-If you’re asking more than one question on the page, do not set the contents of the
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - Nunjucks macro options - --
-
- - 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. - - -
+
+ Error messages
- Open this
-
+ Open this
textarea with error
example in a new tab
@@ -2459,8 +2418,6 @@
Error messages
-
-
@@ -2468,8 +2425,7 @@
|
|---|
| id | string | @@ -2540,200 +2494,196 @@Required. Options for the label component. - - See label. - | -
|---|---|---|
| hint | -object | -- Options for the hint component. - - See hint. - | -
| errorMessage | -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.
- |
-
| formGroup | -object | -- Options for the form-group wrapper. - See formGroup. - | -
| classes | -string | -- Classes to add to the textarea. - | -
| autocomplete | -string | -
- Attribute to identify input purpose, for example postal-code or username. See autofill for full list of attributes that can be used.
- |
-
| attributes | -object | -- HTML attributes (for example data attributes) to add to the textarea. - | -
| Name | -Type | -Description | -
|---|---|---|
| classes | -string | -- Classes to add to the form group (for example to show error state for the whole group). - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| for | -string | -
- The value of the for attribute, the ID of the input the label is associated with.
- |
-
| isPageHeading | -boolean | -- Whether the label also acts as the heading for the page. - | -
| classes | -string | -- Classes to add to the label tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the label tag. - | -
| Name | -Type | -Description | -
|---|---|---|
| text | -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.
- |
-
| html | -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.
- |
-
| id | -string | -- Optional ID attribute to add to the hint span tag. - | -
| classes | -string | -- Classes to add to the hint span tag. - | -
| attributes | -object | -- HTML attributes (for example data attributes) to add to the hint span tag. - | -
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>
+
+
-
+ {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ 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: {
@@ -2744,7 +2694,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
warning text
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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
@@ -1187,7 +1182,6 @@
-
text
string
@@ -1229,19 +1223,18 @@
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
How it works
- Open this
-
+ Open this
warning text second
example in a new tab
@@ -1281,8 +1273,6 @@ How it works
-
-
@@ -1290,8 +1280,7 @@ How it works
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1300,7 +1289,6 @@
How it works
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
@@ -1311,7 +1299,6 @@ How it works
-
text
string
@@ -1353,19 +1340,18 @@ How it works
-
-
+
{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
Avoid overwriting GOV.UK Des
- Open this
-
+ Open this
warning text
example in a new tab
@@ -1157,8 +1156,6 @@
-
-
@@ -1166,8 +1163,7 @@
-
@@ -1166,8 +1163,7 @@
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1176,7 +1172,6 @@
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.
-| text | string | @@ -1229,19 +1223,18 @@
|---|
+
-
+ {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
- Open this
-
+ Open this
warning text second
example in a new tab
@@ -1281,8 +1273,6 @@
How it works
-
-
@@ -1290,8 +1280,7 @@
-
@@ -1290,8 +1280,7 @@ How it works
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1300,7 +1289,6 @@
How it works
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.
-| text | string | @@ -1353,19 +1340,18 @@
|---|
+
-
+ {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
-{{ govukWarningText({
+{{ govukWarningText({
text: "You can be fined up to £5,000 if you do not register.",
iconFallbackText: "Warning"
}) }}
If you make a modification involving CSS you might decide to write a selector that targets a GOV.UK Design System class and change its CSS properties.
This will work in the short term but may break if you install an update relying on the component’s previous behaviour.
For example, if you want to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button"> Inverse button </button> </div>
css .app-interruption-card .govuk-button { background-color: white; color: blue; }
<div class="app-interruption-card">
+ <button class="govuk-button">
+ Inverse button
+ </button>
+</div>
+.app-interruption-card .govuk-button {
+ background-color: white;
+ color: blue;
+}
+This would work in the short term, but if the GOV.UK Design System team changes how the button component works it could break when you update your service. For examples like this, consider using small modifications to components.
Use a unique prefix for component names
The GOV.UK Design System team uses prefixes, sometimes called namespacing, to make sure the code in the GOV.UK Design System does not unintentionally break your application code.
@@ -1067,14 +1076,29 @@Use a unique prefix for compone
Custom override classes
If you need to specify some custom override classes which do not belong to a particular component, you can define these using your prefix and the -!- convention from the GOV.UK Design System.
For example, to define a custom width for a specific reference number in your services you might do this.
-css .app-\!-reference-number-width { width: 10ch !important; }
html <span class="app-!-reference-number-width"> 7446868939 </span>
.app-\!-reference-number-width {
+ width: 10ch !important;
+}
+<span class="app-!-reference-number-width">
+ 7446868939
+</span>
+Small modifications to components
The GOV.UK Design System uses a naming convention called Block Element Modifier (BEM) which makes it easier to ensure styling is isolated to individual components. You can use this convention to make modifications to components.
When making small modifications to components you can make use of the modifier convention from BEM, which uses a suffix of -- plus a name, alongside your own prefix.
For example, if you wanted to override the button component you could do the following.
-html <div class="app-interruption-card"> <button class="govuk-button app-button--inverse"> Inverse button </button> </div>
css .app-button--inverse { background-color: govuk-colour("white"); color: govuk-colour("blue"); }
<div class="app-interruption-card">
+ <button class="govuk-button app-button--inverse">
+ Inverse button
+ </button>
+</div>
+.app-button--inverse {
+ background-color: govuk-colour("white");
+ color: govuk-colour("blue");
+}
+You should not use modifiers when:
- you’re modifying most of the component diff --git a/deploy/public/get-started/focus-states/index.html b/deploy/public/get-started/focus-states/index.html index 1a1e28421c..2c1811e36c 100644 --- a/deploy/public/get-started/focus-states/index.html +++ b/deploy/public/get-started/focus-states/index.html @@ -1037,7 +1037,10 @@
Mak
Make focusable text accessible
If you use Sass, you should include the govuk-focused-text mixin in your component’s :focus selector if that component is focusable text. For example, the component is a link in body text, or the details component:
.app-component:focus { @include govuk-focused-text; }
.app-component:focus {
+ @include govuk-focused-text;
+}
+Make other focusable elements accessible
If you use Sass, you can use 3 GOV.UK Frontend variables if your component has a background colour or border. For example a text input or checkbox.
The 3 Sass variables are:
diff --git a/deploy/public/get-started/labels-legends-headings/index.html b/deploy/public/get-started/labels-legends-headings/index.html index c0efed0370..417bc22856 100644 --- a/deploy/public/get-started/labels-legends-headings/index.html +++ b/deploy/public/get-started/labels-legends-headings/index.html @@ -1034,8 +1034,7 @@Labels as page headings
- Open this
-
+ Open this
labels as page headings - making labels and legends headings
example in a new tab
@@ -1063,23 +1062,23 @@
Labels as page headings
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
- text: "govuk-label--l",
- classes: "govuk-label--l",
+ text: "govuk-label–l",
+ classes: "govuk-label–l",
isPageHeading: true
},
hint: {
- text: "This example shows an <h1> around a <label> with the class of govuk-label--l"
+ text: "This example shows an <h1> around a <label> with the class of govuk-label–l"
},
id: "example",
name: "example"
}) }}
Legends as page headings
- Open this
-
+ Open this
legends as page headings - making labels and legends headings
example in a new tab
@@ -1138,15 +1136,14 @@
Legends as page headings
</div> </div> - </fieldset> +</fieldset> </div>
-
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1175,7 +1172,7 @@
Legends as page headings
]
}) }}
-
+ Styling labels
- Open this
-
+ Open this
styling labels - making labels and legends headings
example in a new tab
@@ -1213,22 +1209,21 @@
Styling labels
<input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint"> </div> -<div class="govuk-form-group"> - <label class="govuk-label govuk-label--s" for="example-2"> - govuk-label--s +<div class="govuk-form-group"> + <label class="govuk-label govuk-label–s" for="example-2"> + govuk-label–s </label> <div id="example-2-hint" class="govuk-hint"> - This example shows a <label> with the class of govuk-label--s + This example shows a <label> with the class of govuk-label–s </div> <input class="govuk-input" id="example-2" name="example-2" type="text" aria-describedby="example-2-hint"> </div>
-
{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+
+ {% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "govuk-label--m",
classes: "govuk-label--m"
@@ -1238,9 +1233,8 @@
Styling labels
},
id: "example",
name: "example"
-}) }}
-
-{{ govukInput({
+}) }}
+{{ govukInput({
label: {
text: "govuk-label--s",
classes: "govuk-label--s"
@@ -1252,7 +1246,7 @@
Styling labels
name: "example-2"
}) }}
-
+ Styling legends
- Open this
-
+ Open this
styling legends - making labels and legends headings
example in a new tab
@@ -1307,16 +1300,15 @@
Styling legends
</div> </div> - </fieldset> -</div> - -<div class="govuk-form-group"> +</fieldset> +</div>
+<div class="govuk-form-group"> <fieldset class="govuk-fieldset" aria-describedby="checkbox-2-hint"> - <legend class="govuk-fieldset__legend govuk-fieldset__legend--s"> - govuk-fieldset__legend--s + <legend class="govuk-fieldset__legend govuk-fieldset__legend–s"> + govuk-fieldset__legend–s </legend> <div id="checkbox-2-hint" class="govuk-hint"> - This example shows a <legend> with the class of govuk-fieldset__legend--s. + This example shows a <legend> with the class of govuk-fieldset__legend–s. </div> <div class="govuk-checkboxes" data-module="govuk-checkboxes"> <div class="govuk-checkboxes__item"> @@ -1337,17 +1329,15 @@
Styling legends
Checkbox 3 </label> </div> - </div> - - </fieldset> + </div> +</fieldset> </div>
-
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-
-{{ govukCheckboxes({
+
+ {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
+{{ govukCheckboxes({
idPrefix: "checkbox",
name: "checkbox",
fieldset: {
@@ -1373,9 +1363,8 @@
Styling legends
text: "Checkbox 3"
}
]
-}) }}
-
-{{ govukCheckboxes({
+}) }}
+{{ govukCheckboxes({
idPrefix: "checkbox-2",
name: "checkbox-2",
fieldset: {
@@ -1403,7 +1392,7 @@
Styling legends
]
}) }}
-
+ Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1085,8 +1084,6 @@
Using components
-
-
@@ -1094,8 +1091,7 @@
-
@@ -1094,8 +1091,7 @@ Using components
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1104,7 +1100,6 @@
Using components
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.
-| element | string | @@ -1205,18 +1199,17 @@
|---|
+
-
+ {% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Using components
- Open this
-
+ Open this
button
example in a new tab
@@ -1054,8 +1053,6 @@
Using components
-
-
@@ -1063,8 +1060,7 @@
-
@@ -1063,8 +1060,7 @@ Using components
-
-
-
+
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
@@ -1073,7 +1069,6 @@
Using components
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.
-| element | string | @@ -1174,18 +1168,17 @@
|---|
+
-
+ {% from "govuk/components/button/macro.njk" import govukButton %}
-{{ govukButton({
+{{ govukButton({
text: "Save and continue"
}) }}
Nunjucks
-<!DOCTYPE html> will result in broken pages for users of older Internet Explorer versions.
- You can now entirely replace the skip link by rendering your own,
- which can include custom text
-
{% block skipLink %}
- {{ govukSkipLink({ text: "custom text" }) }}
+<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” }) }}
{% endblock %}
See the skip link component for more details.
- 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 %}<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 %}
See the header component for more details.
- - -
- You can now entirely replace the header component by rendering your own,
- which can include custom homepageUrl
-
{% block header %}
- {{ govukHeader({ homepageUrl: "/custom-url" }) }}
-{% endblock %}<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 %}
See the header component for more details.
- - -
- 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 %}<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 %}
See the header component for more details.
- - -
- You can now entirely replace the header component by rendering your own,
- which can include a custom navigation
-
{% block header %}
- {{ govukHeader({ navigation: [] }) }}
-{% endblock %}<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 %}
See the header component for more details.
- - -- 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.
-
- You can now entirely replace the footer component by rendering your own,
- which can include a custom navigation
-
{% block header %}
- {{ govukFooter({ navigation: [] }) }}
-{% endblock %}<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 %}
See the footer component for more details.
- - -
- You can now entirely replace the footer component by rendering your own,
- which can include custom meta links
-
{% block header %}
- {{ govukFooter({ meta: [] }) }}
-{% endblock %}<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 %}
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>
+Form related class names
<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>
+Multiple text inputs
- Open this
-
+ Open this
multiple text inputs addresses
example in a new tab
@@ -1167,76 +1166,67 @@
Multiple text inputs
</h1> </legend> - <div class="govuk-form-group"> +<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({
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+{% call govukFieldset({
legend: {
text: "What is your address?",
classes: "govuk-fieldset__legend--l",
isPageHeading: true
}
-}) %}
-
- {{ govukInput({
+}) %}
+ {{ govukInput({
label: {
text: 'Address line 1'
},
id: "address-line-1",
name: "address-line-1",
autocomplete: "address-line1"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: 'Address line 2 (optional)'
},
id: "address-line-2",
name: "address-line-2",
autocomplete: "address-line2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Town or city"
},
@@ -1244,18 +1234,16 @@
Multiple text inputs
id: "address-town",
name: "address-town",
autocomplete: "address-level2"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "County (optional)"
},
classes: "govuk-!-width-two-thirds",
id: "address-county",
name: "address-county"
- }) }}
-
- {{ govukInput({
+ }) }}
+ {{ govukInput({
label: {
text: "Postcode"
},
@@ -1263,11 +1251,10 @@
Multiple text inputs
id: "address-postcode",
name: "address-postcode",
autocomplete: "postal-code"
- }) }}
-
-{% endcall %}{% endcall %}
Error messages
- Open this
-
+ Open this
postcode error
example in a new tab
@@ -1335,14 +1321,14 @@
Error messages
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Postcode"
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "address-postcode",
name: "address-postcode",
value: "Not a postcode",
@@ -1352,7 +1338,7 @@
Error messages
autocomplete: "postal-code"
}) }}Textarea
- Open this
-
+ Open this
textarea addresses
example in a new tab
@@ -1419,10 +1404,10 @@
Textarea
+
-
+
{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
-{{ govukTextarea({
+{{ govukTextarea({
name: "address",
id: "address",
autocomplete: "street-address",
@@ -1431,7 +1416,7 @@
Textarea
}
}) }}
- Open this
-
+ Open this
bank or building society account details
example in a new tab
@@ -1162,56 +1161,50 @@
<h1 class="govuk-heading-l">Bank or building society account details</h1>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="name-on-the-account">
Name on the account
</label>
<input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="sort-code">
Sort code
</label>
<div id="sort-code-hint" class="govuk-hint">
Must be 6 digits long
</div>
- <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="account-number">
Account number
</label>
<div id="account-number-hint" class="govuk-hint">
Must be between 6 and 8 digits long
</div>
- <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="roll-number">
Building society roll number (if you have one)
</label>
<div id="roll-number-hint" class="govuk-hint">
You can find it on your card, statement or passbook
</div>
- <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Bank or building society account details</h1>
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Bank or building society account details</h1>
+{{ govukInput({
label: {
text: "Name on the account"
},
@@ -1219,9 +1212,8 @@
name: "name-on-the-account",
autocomplete: "name",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Sort code"
},
@@ -1233,9 +1225,8 @@
name: "sort-code",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Account number"
},
@@ -1247,9 +1238,8 @@
name: "account-number",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Building society roll number (if you have one)"
},
@@ -1260,13 +1250,12 @@
id: "roll-number",
name: "roll-number",
spellcheck: false
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Turn off HTML5 validation
- Open this
-
+ Open this
branch question
example in a new tab
@@ -1350,20 +1338,18 @@ Turn off HTML5 validation
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "method-of-payment",
name: "method-of-payment",
fieldset: {
@@ -1394,13 +1380,12 @@
Turn off HTML5 validation
}
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
International bank account details
- Open this
-
+ Open this
international bank account details
example in a new tab
@@ -1447,7 +1431,7 @@ International bank account details<input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
</div>
-<div class="govuk-form-group">
+
<div class="govuk-form-group">
<label class="govuk-label" for="iban">
IBAN
</label>
@@ -1459,11 +1443,10 @@
International bank account details
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "BIC or SWIFT code"
},
@@ -1474,9 +1457,8 @@
International bank account detailsid: "bic-code",
name: "bic-code",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "IBAN"
},
@@ -1488,7 +1470,7 @@
International bank account detailsspellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
errors
example in a new tab
@@ -1530,14 +1511,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Sort code"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
hint: {
text: "Must be 6 digits long"
},
@@ -1551,7 +1532,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
check answers
example in a new tab
@@ -1156,338 +1155,336 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Name"
- },
- value: {
- text: "Sarah Philips"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "name"
- }
- ]
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+ <h2 class="govuk-heading-m">Personal details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Name"
+ },
+ value: {
+ text: "Sarah Philips"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "name"
}
- },
- {
- key: {
- text: "Date of birth"
- },
- value: {
- text: "5 January 1978"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "date of birth"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Date of birth"
+ },
+ value: {
+ text: "5 January 1978"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "date of birth"
}
- },
- {
- key: {
- text: "Address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "address"
}
- },
- {
- key: {
- text: "Contact details"
- },
- value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "contact details"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Contact details"
+ },
+ value: {
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "contact details"
}
- }
- ]
- }) }}
-
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Previous application number"
- },
- value: {
- text: "502135326"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "previous application number"
- }
- ]
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+ <h2 class="govuk-heading-m">Application details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Previous application number"
+ },
+ value: {
+ text: "502135326"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "previous application number"
}
- },
- {
- key: {
- text: "Licence type"
- },
- value: {
- text: "For personal use"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence type"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence type"
+ },
+ value: {
+ text: "For personal use"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence type"
}
- },
- {
- key: {
- text: "Home address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "home address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Home address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "home address"
}
- },
- {
- key: {
- text: "Licence period"
- },
- value: {
- text: "Valid for 6 months"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence period"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence period"
+ },
+ value: {
+ text: "Valid for 6 months"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence period"
}
- }
- ]
- }) }}
+ ]
+ }
+ }
+ ]
+ }) }}
- <h2 class="govuk-heading-m">Now send your application</h2>
+ <h2 class="govuk-heading-m">Now send your application</h2>
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+ <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
- <form action="/form-handler" method="post" novalidate>
+ <form action="/form-handler" method="post" novalidate>
- <input type="hidden" name="answers-checked" value="true">
+ <input type="hidden" name="answers-checked" value="true">
- {{ govukButton({
- text: "Accept and send"
- }) }}
+ {{ govukButton({
+ text: "Accept and send"
+ }) }}
- </form>
+ </form>
- </div>
- </div>
+</div>
+
+ </div>
{% endblock %}
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1226,8 +1217,7 @@ When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@ When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1304,8 +1286,7 @@ When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@ When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1406,8 +1375,7 @@ When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@ When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1489,8 +1447,7 @@ Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1572,8 +1521,7 @@ Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html
index 64d437478f..cbe8d2f713 100644
--- a/deploy/public/patterns/confirmation-pages/index.html
+++ b/deploy/public/patterns/confirmation-pages/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
@@ -1183,8 +1182,7 @@ How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@ Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-</div>
+</div>
-
- {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@ Expanding contact information
<li>We aim to respond within 2 working days</li>
</ul>
- </div>
+ </div>
</details>
-
- {% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
bank or building society account details
example in a new tab
@@ -1162,56 +1161,50 @@
-
<h1 class="govuk-heading-l">Bank or building society account details</h1>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="name-on-the-account">
Name on the account
</label>
<input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="sort-code">
Sort code
</label>
<div id="sort-code-hint" class="govuk-hint">
Must be 6 digits long
</div>
- <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="account-number">
Account number
</label>
<div id="account-number-hint" class="govuk-hint">
Must be between 6 and 8 digits long
</div>
- <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="roll-number">
Building society roll number (if you have one)
</label>
<div id="roll-number-hint" class="govuk-hint">
You can find it on your card, statement or passbook
</div>
- <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
<h1 class="govuk-heading-l">Bank or building society account details</h1>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="name-on-the-account">
Name on the account
</label>
<input class="govuk-input" id="name-on-the-account" name="name-on-the-account" type="text" spellcheck="false" autocomplete="name">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="sort-code">
Sort code
</label>
<div id="sort-code-hint" class="govuk-hint">
Must be 6 digits long
</div>
- <input class="govuk-input govuk-input--width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-5" id="sort-code" name="sort-code" type="text" spellcheck="false" aria-describedby="sort-code-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="account-number">
Account number
</label>
<div id="account-number-hint" class="govuk-hint">
Must be between 6 and 8 digits long
</div>
- <input class="govuk-input govuk-input--width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
-</div>
-
-<div class="govuk-form-group">
+ <input class="govuk-input govuk-input–width-10" id="account-number" name="account-number" type="text" spellcheck="false" aria-describedby="account-number-hint" inputmode="numeric">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="roll-number">
Building society roll number (if you have one)
</label>
<div id="roll-number-hint" class="govuk-hint">
You can find it on your card, statement or passbook
</div>
- <input class="govuk-input govuk-input--width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-10" id="roll-number" name="roll-number" type="text" spellcheck="false" aria-describedby="roll-number-hint">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Bank or building society account details</h1>
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Bank or building society account details</h1>
+{{ govukInput({
label: {
text: "Name on the account"
},
@@ -1219,9 +1212,8 @@
name: "name-on-the-account",
autocomplete: "name",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Sort code"
},
@@ -1233,9 +1225,8 @@
name: "sort-code",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Account number"
},
@@ -1247,9 +1238,8 @@
name: "account-number",
inputmode: "numeric",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "Building society roll number (if you have one)"
},
@@ -1260,13 +1250,12 @@
id: "roll-number",
name: "roll-number",
spellcheck: false
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Turn off HTML5 validation
- Open this
-
+ Open this
branch question
example in a new tab
@@ -1350,20 +1338,18 @@
Turn off HTML5 validation
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "method-of-payment",
name: "method-of-payment",
fieldset: {
@@ -1394,13 +1380,12 @@
Turn off HTML5 validation
}
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
International bank account details
- Open this
-
+ Open this
international bank account details
example in a new tab
@@ -1447,7 +1431,7 @@ International bank account details<input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint">
</div>
-<div class="govuk-form-group">
+
<div class="govuk-form-group">
<label class="govuk-label" for="iban">
IBAN
</label>
@@ -1459,11 +1443,10 @@
International bank account details
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "BIC or SWIFT code"
},
@@ -1474,9 +1457,8 @@
International bank account detailsid: "bic-code",
name: "bic-code",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "IBAN"
},
@@ -1488,7 +1470,7 @@
International bank account detailsspellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
errors
example in a new tab
@@ -1530,14 +1511,14 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Sort code"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
hint: {
text: "Must be 6 digits long"
},
@@ -1551,7 +1532,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
check answers
example in a new tab
@@ -1156,338 +1155,336 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Name"
- },
- value: {
- text: "Sarah Philips"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "name"
- }
- ]
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+ <h2 class="govuk-heading-m">Personal details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Name"
+ },
+ value: {
+ text: "Sarah Philips"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "name"
}
- },
- {
- key: {
- text: "Date of birth"
- },
- value: {
- text: "5 January 1978"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "date of birth"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Date of birth"
+ },
+ value: {
+ text: "5 January 1978"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "date of birth"
}
- },
- {
- key: {
- text: "Address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "address"
}
- },
- {
- key: {
- text: "Contact details"
- },
- value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "contact details"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Contact details"
+ },
+ value: {
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "contact details"
}
- }
- ]
- }) }}
-
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Previous application number"
- },
- value: {
- text: "502135326"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "previous application number"
- }
- ]
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+ <h2 class="govuk-heading-m">Application details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Previous application number"
+ },
+ value: {
+ text: "502135326"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "previous application number"
}
- },
- {
- key: {
- text: "Licence type"
- },
- value: {
- text: "For personal use"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence type"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence type"
+ },
+ value: {
+ text: "For personal use"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence type"
}
- },
- {
- key: {
- text: "Home address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "home address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Home address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "home address"
}
- },
- {
- key: {
- text: "Licence period"
- },
- value: {
- text: "Valid for 6 months"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence period"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence period"
+ },
+ value: {
+ text: "Valid for 6 months"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence period"
}
- }
- ]
- }) }}
+ ]
+ }
+ }
+ ]
+ }) }}
- <h2 class="govuk-heading-m">Now send your application</h2>
+ <h2 class="govuk-heading-m">Now send your application</h2>
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+ <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
- <form action="/form-handler" method="post" novalidate>
+ <form action="/form-handler" method="post" novalidate>
- <input type="hidden" name="answers-checked" value="true">
+ <input type="hidden" name="answers-checked" value="true">
- {{ govukButton({
- text: "Accept and send"
- }) }}
+ {{ govukButton({
+ text: "Accept and send"
+ }) }}
- </form>
+ </form>
- </div>
- </div>
+</div>
+
+ </div>
{% endblock %}
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1226,8 +1217,7 @@ When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@ When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1304,8 +1286,7 @@ When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@ When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1406,8 +1375,7 @@ When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@ When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1489,8 +1447,7 @@ Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1572,8 +1521,7 @@ Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html
index 64d437478f..cbe8d2f713 100644
--- a/deploy/public/patterns/confirmation-pages/index.html
+++ b/deploy/public/patterns/confirmation-pages/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
@@ -1183,8 +1182,7 @@ How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@ Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-</div>
+</div>
-
- {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@ Expanding contact information
<li>We aim to respond within 2 working days</li>
</ul>
- </div>
+ </div>
</details>
-
- {% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
International bank account details<input class="govuk-input govuk-input--width-10" id="bic-code" name="bic-code" type="text" spellcheck="false" aria-describedby="bic-code-hint"> </div> -<div class="govuk-form-group"> +
<div class="govuk-form-group"> <label class="govuk-label" for="iban"> IBAN </label> @@ -1459,11 +1443,10 @@
International bank account details
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-{{ govukInput({
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{{ govukInput({
label: {
text: "BIC or SWIFT code"
},
@@ -1474,9 +1457,8 @@
International bank account detailsid: "bic-code",
name: "bic-code",
spellcheck: false
-}) }}
-
-{{ govukInput({
+}) }}
+
{{ govukInput({
label: {
text: "IBAN"
},
@@ -1488,7 +1470,7 @@
International bank account detailsspellcheck: false
}) }}
- Open this
-
+ Open this
errors
example in a new tab
@@ -1530,14 +1511,14 @@
Error messages
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Sort code"
},
- classes: "govuk-input--width-5",
+ classes: "govuk-input–width-5",
hint: {
text: "Must be 6 digits long"
},
@@ -1551,7 +1532,7 @@
Error messages
}
}) }}
- Open this
-
+ Open this
check answers
example in a new tab
@@ -1156,338 +1155,336 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Name
- </dt>
- <dd class="govuk-summary-list__value">
- Sarah Philips
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> name</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Date of birth
- </dt>
- <dd class="govuk-summary-list__value">
- 5 January 1978
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> date of birth</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Contact details
- </dt>
- <dd class="govuk-summary-list__value">
- <p class="govuk-body">07700 900457</p>
- <p class="govuk-body">sarah.phillips@example.com</p>
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> contact details</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- <dl class="govuk-summary-list govuk-!-margin-bottom-9">
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Previous application number
- </dt>
- <dd class="govuk-summary-list__value">
- 502135326
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> previous application number</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence type
- </dt>
- <dd class="govuk-summary-list__value">
- For personal use
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence type</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Home address
- </dt>
- <dd class="govuk-summary-list__value">
- 72 Guild Street<br>London<br>SE23 6FH
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> home address</span>
- </a>
- </dd>
- </div>
- <div class="govuk-summary-list__row">
- <dt class="govuk-summary-list__key">
- Licence period
- </dt>
- <dd class="govuk-summary-list__value">
- Valid for 6 months
- </dd>
- <dd class="govuk-summary-list__actions">
- <a class="govuk-link" href="#">
- Change<span class="govuk-visually-hidden"> licence period</span>
- </a>
- </dd>
- </div>
- </dl>
-
- <h2 class="govuk-heading-m">Now send your application</h2>
-
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <input type="hidden" name="answers-checked" value="true">
-
- <button class="govuk-button" data-module="govuk-button">
- Accept and send
- </button>
-
- </form>
-
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>Check your answers before sending your application<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Personal details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Name
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Sarah Philips
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> name<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Date of birth
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 5 January 1978
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> date of birth<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Contact details
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</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>07700 900457<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>sarah.phillips@example.com<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> contact details<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Application details<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">dl</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list govuk-!-margin-bottom-9"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Previous application number
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 502135326
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> previous application number<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence type
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ For personal use
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence type<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Home address
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ 72 Guild Street<span class="hljs-tag"><<span class="hljs-name">br</span>></span>London<span class="hljs-tag"><<span class="hljs-name">br</span>></span>SE23 6FH
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> home address<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</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-summary-list__row"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dt</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__key"</span>></span>
+ Licence period
+ <span class="hljs-tag"></<span class="hljs-name">dt</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__value"</span>></span>
+ Valid for 6 months
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">dd</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-summary-list__actions"</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>
+ Change<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> licence period<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">a</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dd</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+ <span class="hljs-tag"></<span class="hljs-name">dl</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>Now send your application<span class="hljs-tag"></<span class="hljs-name">h2</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>By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"answers-checked"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</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>
+ Accept and send
+ <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>
+
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back",
href: "#"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds-from-desktop">
-
- <h1 class="govuk-heading-l">Check your answers before sending your application</h1>
-
- <h2 class="govuk-heading-m">Personal details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Name"
- },
- value: {
- text: "Sarah Philips"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "name"
- }
- ]
+ <div class="govuk-grid-column-two-thirds-from-desktop">
+<h1 class="govuk-heading-l">Check your answers before sending your application</h1>
+
+ <h2 class="govuk-heading-m">Personal details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Name"
+ },
+ value: {
+ text: "Sarah Philips"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "name"
}
- },
- {
- key: {
- text: "Date of birth"
- },
- value: {
- text: "5 January 1978"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "date of birth"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Date of birth"
+ },
+ value: {
+ text: "5 January 1978"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "date of birth"
}
- },
- {
- key: {
- text: "Address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "address"
}
- },
- {
- key: {
- text: "Contact details"
- },
- value: {
- html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "contact details"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Contact details"
+ },
+ value: {
+ html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>'
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "contact details"
}
- }
- ]
- }) }}
-
-
- <h2 class="govuk-heading-m">Application details</h2>
-
- {{ govukSummaryList({
- classes: 'govuk-!-margin-bottom-9',
- rows: [
- {
- key: {
- text: "Previous application number"
- },
- value: {
- text: "502135326"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "previous application number"
- }
- ]
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+ <h2 class="govuk-heading-m">Application details</h2>
+
+ {{ govukSummaryList({
+ classes: 'govuk-!-margin-bottom-9',
+ rows: [
+ {
+ key: {
+ text: "Previous application number"
+ },
+ value: {
+ text: "502135326"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "previous application number"
}
- },
- {
- key: {
- text: "Licence type"
- },
- value: {
- text: "For personal use"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence type"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence type"
+ },
+ value: {
+ text: "For personal use"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence type"
}
- },
- {
- key: {
- text: "Home address"
- },
- value: {
- html: "72 Guild Street<br>London<br>SE23 6FH"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "home address"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Home address"
+ },
+ value: {
+ html: "72 Guild Street<br>London<br>SE23 6FH"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "home address"
}
- },
- {
- key: {
- text: "Licence period"
- },
- value: {
- text: "Valid for 6 months"
- },
- actions: {
- items: [
- {
- href: "#",
- text: "Change",
- visuallyHiddenText: "licence period"
- }
- ]
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Licence period"
+ },
+ value: {
+ text: "Valid for 6 months"
+ },
+ actions: {
+ items: [
+ {
+ href: "#",
+ text: "Change",
+ visuallyHiddenText: "licence period"
}
- }
- ]
- }) }}
+ ]
+ }
+ }
+ ]
+ }) }}
- <h2 class="govuk-heading-m">Now send your application</h2>
+ <h2 class="govuk-heading-m">Now send your application</h2>
- <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
+ <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p>
- <form action="/form-handler" method="post" novalidate>
+ <form action="/form-handler" method="post" novalidate>
- <input type="hidden" name="answers-checked" value="true">
+ <input type="hidden" name="answers-checked" value="true">
- {{ govukButton({
- text: "Accept and send"
- }) }}
+ {{ govukButton({
+ text: "Accept and send"
+ }) }}
- </form>
+ </form>
- </div>
- </div>
+</div>
+
+ </div>
{% endblock %}
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1226,8 +1217,7 @@ When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@ When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1304,8 +1286,7 @@ When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@ When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1406,8 +1375,7 @@ When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@ When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
-
+
@@ -1489,8 +1447,7 @@ Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
@@ -1572,8 +1521,7 @@ Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@ Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
-
+
diff --git a/deploy/public/patterns/confirmation-pages/index.html b/deploy/public/patterns/confirmation-pages/index.html
index 64d437478f..cbe8d2f713 100644
--- a/deploy/public/patterns/confirmation-pages/index.html
+++ b/deploy/public/patterns/confirmation-pages/index.html
@@ -1138,8 +1138,7 @@
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
@@ -1183,8 +1182,7 @@ How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@ Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-</div>
+</div>
-
- {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@ Expanding contact information
<li>We aim to respond within 2 working days</li>
</ul>
- </div>
+ </div>
</details>
-
- {% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1155,32 +1154,26 @@
-
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1190,15 +1183,13 @@
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
When the user creates an account
- Open this
-
+ Open this
default – confirm a phone number
example in a new tab
@@ -1244,32 +1234,26 @@
- When the user creates an account
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group">
<label class="govuk-label" for="security-code">
Security code
</label>
- <input class="govuk-input govuk-input--width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4" id="security-code" name="security-code" type="text" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1279,15 +1263,13 @@
When the user creates an account
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
When the user creates an account
- Open this
-
+ Open this
request a new security code (first time) – security code
example in a new tab
@@ -1322,11 +1303,9 @@
- When the user creates an account
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Change where the text message is sent
@@ -1337,35 +1316,28 @@
When the user creates an account
<label class="govuk-label" for="mobile-number">
Mobile number
</label>
- <input class="govuk-input govuk-input--width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
- </div>
-
- </div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-20" id="mobile-number" name="mobile-number" type="tel" value="07700 900000" autocomplete="tel">
+ </div>
+ </div>
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
+
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-{% set mobileNumberHtml %}
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{% set mobileNumberHtml %}
{{ govukInput({
label: {
text: "Mobile number"
@@ -1377,17 +1349,14 @@
When the user creates an account
autocomplete: "tel",
classes: "govuk-input--width-20"
}) }}
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: "Change where the text message is sent",
html: mobileNumberHtml
-}) }}
-
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
When the user signs in
- Open this
-
+ Open this
request a new security code – security code
example in a new tab
@@ -1424,11 +1392,9 @@
- When the user signs in
<a href="#" class="govuk-back-link">Back</a>
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-<details class="govuk-details" data-module="govuk-details">
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
I do not have access to the phone
@@ -1437,38 +1403,30 @@
When the user signs in
<div class="govuk-details__text">
<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Request a new code
</button>
+
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-
-{{ govukBackLink({
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{{ govukBackLink({
text: "Back",
href: "#"
-}) }}
-
-<h1 class="govuk-heading-l">Request a new security code</h1>
-
-<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
-
-
-{{ govukDetails({
+}) }}
+<h1 class="govuk-heading-l">Request a new security code</h1>
+<p class="govuk-body">Text messages sometimes take a few minutes to arrive. If you do not receive the text message, you can request a new one.</p>
+{{ govukDetails({
summaryText: "I do not have access to the phone",
html: '<p class="govuk-body">If you cannot access the phone number for this account, <a href="#" class="govuk-link">contact the Tax Credits Helpline</a> to get help signing in.</p>'
-}) }}
-
-{{ govukButton({text: "Request a new code"}) }}
{{ govukButton({text: "Request a new code"}) }}
Error messages
- Open this
-
+ Open this
error, incorrect security code – confirm a phone number
example in a new tab
@@ -1507,35 +1464,29 @@
- Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Enter a correct security code
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1548,15 +1499,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
Error messages
- Open this
-
+ Open this
error, security code expired – confirm a phone number
example in a new tab
@@ -1590,35 +1538,29 @@
- Error messages
<h1 class="govuk-heading-l">Check your phone</h1>
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-<div class="govuk-form-group govuk-form-group--error">
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+<div class="govuk-form-group govuk-form-group–error">
<label class="govuk-label" for="security-code">
Security code
</label>
<p id="security-code-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> The security code has expired. New code sent.
</p>
- <input class="govuk-input govuk-input--width-4 govuk-input--error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ <input class="govuk-input govuk-input–width-4 govuk-input–error" id="security-code" name="security-code" type="text" aria-describedby="security-code-error" autocomplete="one-time-code" inputmode="numeric">
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
-</button>
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<h1 class="govuk-heading-l">Check your phone</h1>
-
-<p class="govuk-body">We’ve sent you a text message with a security code.</p>
-
-{{ govukInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<h1 class="govuk-heading-l">Check your phone</h1>
+<p class="govuk-body">We’ve sent you a text message with a security code.</p>
+{{ govukInput({
label: {
text: "Security code"
},
@@ -1631,15 +1573,13 @@
Error messages
autocomplete: "one-time-code",
classes: "govuk-input--width-4",
inputmode: "numeric"
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
-}) }}
-
-<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
<p class="govuk-body"><a href="#" class="govuk-link">Not received a text message?</a></p>
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+
</main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+ How it works
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@ How it works
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+ </main>
</div>
-
- {% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
+
- Open this
-
+ Open this
confirmation pages
example in a new tab
@@ -1167,59 +1166,58 @@
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+
</div>
</div>
- <p class="govuk-body">We have sent you a confirmation email.</p>
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</span>></span>We have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+</main> </div>
-
{% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
confirmation pages second
example in a new tab
@@ -1270,59 +1267,58 @@
How it works
</div> </div> - <p class="govuk-body">We have sent you a confirmation email.</p> +<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <h2 class="govuk-heading-m">What happens next</h2>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
+ <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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
- </main>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body"</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">class</span>=<span class="hljs-string">"govuk-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <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>
+</main> </div>
-
{% set mainClasses = "govuk-main-wrapper--l" %}
-
-{% from "govuk/components/panel/macro.njk" import govukPanel %}
-
-{% block content %}
+
+ {% set mainClasses = "govuk-main-wrapper--l" %}
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
{{ govukPanel({
titleText: "Application complete",
html: "Your reference number<br><strong>HDJ2123F</strong>"
- }) }}
-
- <p class="govuk-body">We have sent you a confirmation email.</p>
-
- <h2 class="govuk-heading-m">What happens next</h2>
-
- <p class="govuk-body">
- We’ve sent your application to Hackney Electoral Register Office.
- </p>
- <p class="govuk-body">
- They will contact you either to confirm your registration, or to ask for more information.
- </p>
-
- <p class="govuk-body">
- <a href="#" class="govuk-link">What did you think of this service?</a> (takes 30 seconds)
- </p>
- </div>
- </div>
+ }) }}
+<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 have sent you a confirmation email.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>What happens next<span class="hljs-tag"></<span class="hljs-name">h2</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’ve sent your application to Hackney Electoral Register Office.
+ <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>
+ They will contact you either to confirm your registration, or to ask for more information.
+ <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>
+ <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-link"</span>></span>What did you think of this service?<span class="hljs-tag"></<span class="hljs-name">a</span>></span> (takes 30 seconds)
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </div>
{% endblock %}
-
+
- Open this
-
+ Open this
contact a department or service team
example in a new tab
@@ -1162,7 +1161,7 @@
+
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1170,7 +1169,7 @@
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
How it works
- Open this
-
+ Open this
all contact information
example in a new tab
@@ -1201,11 +1199,9 @@
-
+ How it works
<h2 class="govuk-heading-m">Get help with your application</h2>
-<h3 class="govuk-heading-s">Telephone</h3>
-
-<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
-
-<ul class="govuk-list">
+<h3 class="govuk-heading-s">Telephone</h3>
+<p class="govuk-body">If you have a unique reference number, have it with you when you call.</p>
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Textphone: 020 7946 0102</li>
<li>Monday to Friday, 8am to 6pm</li>
@@ -1215,39 +1211,30 @@
How it works
</ul>
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
-</p>
-
-<h3 class="govuk-heading-s">Email</h3>
-
-<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+</p>
+<h3 class="govuk-heading-s">Email</h3>
+<ul class="govuk-list">
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
-</ul>
-
-<h3 class="govuk-heading-s">Webchat</h3>
-
-<ul class="govuk-list">
+</ul>
+<h3 class="govuk-heading-s">Webchat</h3>
+<ul class="govuk-list">
<li><a class="govuk-link" href="#">Speak to an adviser now</a></li>
<li>Current waiting time is 17 minutes</li>
-</ul>
-
-<h3 class="govuk-heading-s">Address</h3>
-
-<p class="govuk-body">
+</ul>
+<h3 class="govuk-heading-s">Address</h3>
+<p class="govuk-body">
49 to 53 Cherry Street<br>
London<br>
AB1 2DC
-</p>
-
-<h3 class="govuk-heading-s">Social media</h3>
-
-<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
-
-<p class="govuk-body">
+</p>
+<h3 class="govuk-heading-s">Social media</h3>
+<p class="govuk-body">You can use Twitter to get general help. We cannot discuss specific cases or individual applications, so please do not give any personal details.</p>
+<p class="govuk-body">
Twitter: @GOVUK
</p>
Explain any charges
- Open this
-
+ Open this
contact a department or service team second
example in a new tab
@@ -1289,7 +1275,7 @@
-
+ Explain any charges
<h2 class="govuk-heading-m">Get help with your application</h2>
-<ul class="govuk-list">
+<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 9am to 5pm (except public holidays)</li>
</ul>
@@ -1297,7 +1283,7 @@
Explain any charges
<a class="govuk-link" href="#">Find out about call charges</a>
</p>Inset contact information
- Open this
-
+ Open this
contact information inset text
example in a new tab
@@ -1346,14 +1331,13 @@
Inset contact information
<a class="govuk-link" href="#">Find out about call charges</a> </p> -</div> +</div>
-
{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
-
-{% set contactInformation %}
+
+ {% 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">
<li>Telephone: 020 7946 0101</li>
@@ -1363,13 +1347,12 @@ Inset contact information
<p class="govuk-body">
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
-{% endset %}
-
-{{ govukInsetText({
+{% endset %}
+{{ govukInsetText({
html: contactInformation
}) }}
-
+ Expanding contact information
- Open this
-
+ Open this
contact information details component
example in a new tab
@@ -1418,15 +1400,14 @@
Expanding contact information
<li>We aim to respond within 2 working days</li> </ul> - </div> +</div> </details>
-
{% from "govuk/components/details/macro.njk" import govukDetails %}
-
-{% set contactInformation %}
+
+ {% from "govuk/components/details/macro.njk" import govukDetails %}
+{% set contactInformation %}
<ul class="govuk-list">
<li>Telephone: 020 7946 0101</li>
<li>Monday to Friday, 8am to 6pm (except public holidays)</li>
@@ -1436,17 +1417,16 @@
Expanding contact information
<a class="govuk-link" href="#">Find out about call charges</a>
</p>
<ul class="govuk-list">
- <li><a class="govuk-link" href="#">name@example.com</a></li>
+ <li><a class="govuk-link" href="#">name@example.com</a></li>
<li>We aim to respond within 2 working days</li>
</ul>
-{% endset %}
-
-{{ govukDetails({
+{% endset %}
+{{ govukDetails({
summaryText: 'If you need help completing this form',
html: contactInformation
}) }}
-
+ Letting user
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
</div>
</div>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
Letting user
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@ Letting user
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
cookie preferences form - cookies page
example in a new tab
@@ -1240,46 +1239,46 @@ Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+
Letting user
</div>
</div>
- </fieldset>
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
- Do you want to accept analytics cookies?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies" name="analytics-cookies" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="analytics-cookies">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="analytics-cookies-2" name="analytics-cookies" type="radio" value="no" checked>
- <label class="govuk-label govuk-radios__label" for="analytics-cookies-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Save cookie settings
- </button>
- </form>
- </div>
+<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">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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <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">fieldset</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-form-group"</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>
+ <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--s"</span>></span>
+ Do you want to accept analytics cookies?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"analytics-cookies"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"analytics-cookies"</span>></span>
+ Yes
+ <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__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">"analytics-cookies-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"analytics-cookies"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</span> <span class="hljs-attr">checked</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">"analytics-cookies-2"</span>></span>
+ No
+ <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>
+
+ <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>
+ Save cookie settings
+ <span class="hljs-tag"></<span class="hljs-name">button</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+</div> </div>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-<div class="govuk-grid-row">
+{% from "govuk/components/button/macro.njk" import govukButton %}
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
<form action="/form-handler" method="post" novalidate>
@@ -1303,38 +1302,38 @@ Letting user
checked: true
}
]
- }) }}
-
- {{ govukRadios({
- idPrefix: "analytics-cookies",
- name: "analytics-cookies",
- fieldset: {
- legend: {
- text: "Do you want to accept analytics cookies?",
- classes: "govuk-fieldset__legend--s"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No",
- checked: true
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Save cookie settings"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukRadios({
+ idPrefix: "analytics-cookies",
+ name: "analytics-cookies",
+ fieldset: {
+ legend: {
+ text: "Do you want to accept analytics cookies?",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No",
+ checked: true
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Save cookie settings"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
- Open this
-
+ Open this
cookie preferences updated - cookies page
example in a new tab
@@ -1375,21 +1373,20 @@
Letting user
+
-
+
{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
-{% set html %}
+{% set html %}
<p class="govuk-notification-banner__heading">
You’ve set your cookie preferences. <a class="govuk-notification-banner__link" href="#">Go back to the page you were looking at</a>.
</p>
-{% endset %}
-
-{{ govukNotificationBanner({
+{% endset %}
+{{ govukNotificationBanner({
type: "success",
html: html
}) }}
If
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@ If
-
+
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@ Asking about date of birth (age)
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@ Asking about disability
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@ Asking about ethnic group
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@ Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</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">
+<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">
Continue
</button>
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
no javascript - cookies page
example in a new tab
@@ -1430,7 +1426,7 @@
If
+
-
@@ -1301,8 +1290,7 @@
-
@@ -1414,8 +1399,7 @@
-
@@ -1515,8 +1496,7 @@
-
@@ -1635,8 +1612,7 @@
-
@@ -1766,8 +1739,7 @@
-
@@ -1916,8 +1884,7 @@
-
@@ -2066,8 +2029,7 @@
-
@@ -2226,8 +2184,7 @@
-
@@ -2366,8 +2319,7 @@
-
@@ -2493,8 +2441,7 @@ Asking about marriage
-
@@ -1325,8 +1323,7 @@
-
diff --git a/deploy/public/patterns/national-insurance-numbers/index.html b/deploy/public/patterns/national-insurance-numbers/index.html
index 279078e525..afb722ad08 100644
--- a/deploy/public/patterns/national-insurance-numbers/index.html
+++ b/deploy/public/patterns/national-insurance-numbers/index.html
@@ -1138,8 +1138,7 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h2 class="govuk-heading-l">Change your cookie settings</h2>
diff --git a/deploy/public/patterns/dates/index.html b/deploy/public/patterns/dates/index.html
index 325bdf8ad3..2ae38c58e8 100644
--- a/deploy/public/patterns/dates/index.html
+++ b/deploy/public/patterns/dates/index.html
@@ -1151,8 +1151,7 @@ Asking for memorable dates
- Open this
-
+ Open this
asking for dates from documents
example in a new tab
@@ -1204,15 +1203,14 @@ Asking for memorable dates
</div>
</div>
- </fieldset>
+ </fieldset>
</div>
-
- {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-
-{{ govukDateInput({
+
+ {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
+{{ govukDateInput({
id: "passport-issued",
namePrefix: "passport-issued",
fieldset: {
@@ -1227,7 +1225,7 @@
Asking for memorable dates
}
}) }}
-
+
diff --git a/deploy/public/patterns/email-addresses/index.html b/deploy/public/patterns/email-addresses/index.html
index 08f63b5d7e..dd734b17cf 100644
--- a/deploy/public/patterns/email-addresses/index.html
+++ b/deploy/public/patterns/email-addresses/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
email addresses
example in a new tab
@@ -1165,10 +1164,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1182,7 +1181,7 @@
spellcheck: false
}) }}
-
+
@@ -1201,8 +1200,7 @@ How it works
- Open this
-
+ Open this
email addresses second
example in a new tab
@@ -1229,10 +1227,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1246,7 +1244,7 @@
How it works
spellcheck: false
}) }}
-
+
@@ -1283,8 +1281,7 @@ Error messages
- Open this
-
+ Open this
email input with errors
example in a new tab
@@ -1314,10 +1311,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Email address"
},
@@ -1330,12 +1327,12 @@
Error messages
value: "Not an email address",
autocomplete: "email",
errorMessage: {
- text: "Enter an email address in the correct format, like name@example.com"
+ text: "Enter an email address in the correct format, like name@example.com"
},
spellcheck: false
}) }}
-
+
diff --git a/deploy/public/patterns/equality-information/index.html b/deploy/public/patterns/equality-information/index.html
index 9c152a498c..b8b1eaafb3 100644
--- a/deploy/public/patterns/equality-information/index.html
+++ b/deploy/public/patterns/equality-information/index.html
@@ -1155,8 +1155,7 @@ Where to place equality questions
- Open this
-
+ Open this
explainer screen for equality information questions
example in a new tab
@@ -1173,37 +1172,34 @@ Where to place equality questions
<h1 class="govuk-heading-l">We have received your application</h1>
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-<div class="govuk-form-group">
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="equalities-info-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+ <legend class="govuk-fieldset__legend govuk-fieldset__legend–m">
Do you want to answer the equality questions?
</legend>
<div id="equalities-info-hint" class="govuk-hint">
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
- <p>Your answers will not affect your application.</p>
-
- </div>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info" name="equalities-info" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="equalities-info">
- Yes, answer the equality questions (takes 2 minutes)
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="equalities-info-2" name="equalities-info" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="equalities-info-2">
- No, skip the equality questions
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<details class="govuk-details" data-module="govuk-details">
+ <p>Your answers will not affect your application.</p>
+<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"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"equalities-info"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"equalities-info"</span>></span>
+ Yes, answer the equality questions (takes 2 minutes)
+ <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__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">"equalities-info-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"equalities-info"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"equalities-info-2"</span>></span>
+ No, skip the equality questions
+ <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>
+<details class="govuk-details" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
Why we ask equality questions
@@ -1212,29 +1208,24 @@
Where to place equality questions
<div class="govuk-details__text">
[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information].
</div>
-</details>
-
-<button class="govuk-button" data-module="govuk-button">
+</details>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
{% from "govuk/components/details/macro.njk" import govukDetails %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% set hintHtml %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% set hintHtml %}
<p class="govuk-!-margin-top-0">These questions are optional. [Add a couple of sentences explaining why you’re asking the questions and what you’ll do with the information].</p>
<p>Your answers will not affect your application.</p>
-{% endset -%}
-
-<h1 class="govuk-heading-l">We have received your application</h1>
-
-<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
-
-{{ govukRadios({
+{% endset -%}
+<h1 class="govuk-heading-l">We have received your application</h1>
+<p class="govuk-body">Before you finish using the service, we’d like to ask some equality questions.</p>
+{{ govukRadios({
idPrefix: "equalities-info",
name: "equalities-info",
fieldset: {
@@ -1256,18 +1247,16 @@
Where to place equality questions
text: "No, skip the equality questions"
}
]
-}) }}
-
-{{ govukDetails({
+}) }}
+{{ govukDetails({
summaryText: "Why we ask equality questions",
text: "[Consider adding an optional longer explanation of what you’re asking the questions and what you’ll do with the information]."
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about date of birth (age)
- Open this
-
+ Open this
date of birth equality question
example in a new tab
@@ -1354,20 +1342,18 @@
Asking about date of birth (age)
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -1397,13 +1383,12 @@
Asking about date of birth (age)
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability equality question
example in a new tab
@@ -1459,20 +1443,18 @@
Asking about disability
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1499,13 +1481,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about disability
- Open this
-
+ Open this
disability impact equality question
example in a new tab
@@ -1569,20 +1549,18 @@
Asking about disability
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "disability",
name: "disability",
fieldset: {
@@ -1616,13 +1594,12 @@
Asking about disability
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
ethnic group equality question
example in a new tab
@@ -1698,20 +1674,18 @@
Asking about ethnic group
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -1750,13 +1724,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
white ethnicity equality question
example in a new tab
@@ -1822,31 +1794,29 @@
Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </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"> +<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"> Continue </button>
+
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -1856,9 +1826,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -1896,13 +1865,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
multiple ethnicity equality question
example in a new tab
@@ -1972,31 +1939,29 @@
Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </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"> +<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"> Continue </button>
+
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2006,9 +1971,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2046,13 +2010,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
asian ethnicity equality question
example in a new tab
@@ -2128,31 +2090,29 @@
Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </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"> +<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"> Continue </button>
+
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2162,9 +2122,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2206,13 +2165,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
black ethnicity equality question
example in a new tab
@@ -2276,31 +2233,29 @@
Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </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"> +<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"> Continue </button>
+
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2310,9 +2265,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2346,13 +2300,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about ethnic group
- Open this
-
+ Open this
other ethnicity equality question
example in a new tab
@@ -2410,31 +2362,29 @@
Asking about ethnic group
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </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"> +<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"> Continue </button>
+
-
+
{% 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 %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set ethnicityHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2444,9 +2394,8 @@
Asking about ethnic group
text: "How would you describe your background? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "ethnicity-detail",
name: "ethnicity-detail",
fieldset: {
@@ -2476,13 +2425,12 @@
Asking about ethnic group
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about marriage
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@ Asking about marriage
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+
</fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about religion
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@ Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="religion-10">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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">
Continue
</button>
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Asking about sex and gender identi
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@ Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text">
</div>
- </div>
- <div class="govuk-radios__divider">or</div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="sexual-orientation-6">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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">
Continue
</button>
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@ Validation and error messages
</div>
</div>
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </fieldset>
+</div>
+<button class="govuk-button" data-module="govuk-button">
Continue
</button>
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
- Open this
-
+ Open this
marriage or civil partnership status equality question
example in a new tab
@@ -2580,20 +2527,18 @@
Asking about marriage </div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +
</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
-{% from "govuk/components/radios/macro.njk" import govukRadios %}
-
-{{ govukRadios({
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{{ govukRadios({
idPrefix: "marriage-civil-partnership",
name: "marriage-civil-partnership",
fieldset: {
@@ -2648,13 +2593,12 @@
Asking about marriage
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
religion equality question
example in a new tab
@@ -2749,31 +2692,29 @@
Asking about religion
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </div> - </div> - <div class="govuk-radios__divider">or</div> - <div class="govuk-radios__item"> - <input class="govuk-radios__input" id="religion-10" name="religion" type="radio" value="skip"> - <label class="govuk-label govuk-radios__label" for="religion-10"> - Prefer not to say - </label> - </div> - </div> - - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +<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">"religion-10"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"religion"</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">"religion-10"</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"> Continue </button>
+
-
+
{% 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 religionHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set religionHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -2783,9 +2724,8 @@
Asking about religion
text: "What is your religion? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "religion",
name: "religion",
fieldset: {
@@ -2842,13 +2782,12 @@
Asking about religion
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
sex and gender equality question
example in a new tab
@@ -2877,9 +2815,9 @@ Asking about sex and gender identi
- Asking about sex and gender identi
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
<h1 class="govuk-heading-l">Sex and gender identity</h1>
-<div class="govuk-form-group">
+<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">
What is your sex?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2901,14 +2839,12 @@
Asking about sex and gender identi
Prefer not to say
</label>
</div>
- </div>
-
- </fieldset>
-</div>
-
-<div class="govuk-form-group">
+ </div>
+
</fieldset>
+</div>
+<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">
Is the gender you identify with the same as your sex registered at birth?
</legend>
<div class="govuk-radios" data-module="govuk-radios">
@@ -2924,40 +2860,36 @@
Asking about sex and gender identi
No
</label>
</div>
- <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-gender-identity-2">
+ <div class="govuk-radios__conditional govuk-radios__conditional–hidden" id="conditional-gender-identity-2">
<div class="govuk-form-group">
<label class="govuk-label" for="gender-description">
What is your gender identity? (optional)
</label>
<input class="govuk-input govuk-!-width-one-half" id="gender-description" name="gender-description" type="text">
- </div>
-
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="gender-identity-3" name="gender-identity" type="radio" value="skip">
- <label class="govuk-label govuk-radios__label" for="gender-identity-3">
- Prefer not to say
- </label>
- </div>
- </div>
-
- </fieldset>
-</div>
-
-<button class="govuk-button" data-module="govuk-button">
+ </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">"gender-identity-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender-identity"</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">"gender-identity-3"</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">
Continue
</button>
+
-
+
{% from "govuk/components/button/macro.njk" import govukButton %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/input/macro.njk" import govukInput %}
-
-<h1 class="govuk-heading-l">Sex and gender identity</h1>
-
-{% set genderHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+<h1 class="govuk-heading-l">Sex and gender identity</h1>
+{% set genderHtml %}
{{ govukInput({
id: "gender-description",
name: "gender-description",
@@ -2967,9 +2899,8 @@
Asking about sex and gender identi
text: "What is your gender identity? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+
{{ govukRadios({
idPrefix: "sex",
name: "sex",
fieldset: {
@@ -2992,9 +2923,8 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukRadios({
+}) }}
+
{{ govukRadios({
idPrefix: "gender-identity",
name: "gender-identity",
fieldset: {
@@ -3020,13 +2950,12 @@
Asking about sex and gender identi
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+
{{ govukButton({
text: "Continue"
}) }}
Asking about sexual orientation
- Open this
-
+ Open this
sexual orientation equality question
example in a new tab
@@ -3093,31 +3021,29 @@
Asking about sexual orientation
<input class="govuk-input govuk-!-width-one-half" id="other-description" name="other-description" type="text"> </div> - </div> - <div class="govuk-radios__divider">or</div> - <div class="govuk-radios__item"> - <input class="govuk-radios__input" id="sexual-orientation-6" name="sexual-orientation" type="radio" value="skip"> - <label class="govuk-label govuk-radios__label" for="sexual-orientation-6"> - Prefer not to say - </label> - </div> - </div> - - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +<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">"sexual-orientation-6"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sexual-orientation"</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">"sexual-orientation-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"> Continue </button>
+
-
+
{% 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 sexualOrientationHtml %}
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% set sexualOrientationHtml %}
{{ govukInput({
id: "other-description",
name: "other-description",
@@ -3127,9 +3053,8 @@
Asking about sexual orientation
text: "How would you describe your sexual orientation? (optional)"
}
}) }}
-{% endset -%}
-
-{{ govukRadios({
+{% endset -%}
+{{ govukRadios({
idPrefix: "sexual-orientation",
name: "sexual-orientation",
fieldset: {
@@ -3167,13 +3092,12 @@
Asking about sexual orientation
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
ethnicity question with error
example in a new tab
@@ -3251,20 +3174,18 @@
Validation and error messages
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukRadios({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukRadios({
idPrefix: "ethnicity",
name: "ethnicity",
fieldset: {
@@ -3306,13 +3227,12 @@
Validation and error messages
text: "Prefer not to say"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
Validation and error messages
- Open this
-
+ Open this
date of birth equality question with error
example in a new tab
@@ -3383,20 +3302,18 @@
Validation and error messages
</div> </div> - </fieldset> -</div> - -<button class="govuk-button" data-module="govuk-button"> +</fieldset> +</div>
+<button class="govuk-button" data-module="govuk-button"> Continue </button>
+
-
+
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{{ govukDateInput({
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{{ govukDateInput({
id: "date-of-birth",
namePrefix: "date-of-birth",
fieldset: {
@@ -3429,13 +3346,12 @@
Validation and error messages
autocomplete: "bday-year"
}
]
-}) }}
-
-{{ govukButton({
+}) }}
+{{ govukButton({
text: "Continue"
}) }}
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}Do not spellcheck user’s names
- Open this
-
+ Open this
names
example in a new tab
@@ -1161,10 +1160,10 @@
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1174,7 +1173,7 @@
spellcheck: false
}) }}
- Open this
-
+ Open this
names second
example in a new tab
@@ -1213,10 +1211,10 @@
How it works
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1226,7 +1224,7 @@
How it works
spellcheck: false
}) }}
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1304,7 +1302,7 @@
Do not spellcheck user’s names
spellcheck: false
}) }}Error messages
- Open this
-
+ Open this
name input with errors
example in a new tab
@@ -1353,10 +1350,10 @@
Error messages
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Full name"
},
@@ -1369,7 +1366,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
How it works
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@ How it works
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
Error messages
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@ How it works
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
- Open this
-
+ Open this
national insurance numbers
example in a new tab
@@ -1166,23 +1165,23 @@
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance numbers second
example in a new tab
@@ -1235,23 +1233,23 @@
How it works
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
spellcheck: false
}) }}
- Open this
-
+ Open this
national insurance number input with errors
example in a new tab
@@ -1293,17 +1290,17 @@
Error messages
+
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "National Insurance number"
},
hint: {
text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
},
- classes: "govuk-input--width-10",
+ classes: "govuk-input–width-10",
id: "national-insurance-number",
name: "national-insurance-number",
value: "12345678",
@@ -1313,7 +1310,7 @@
Error messages
spellcheck: false
}) }}
- Open this
-
+ Open this
page not found pages
example in a new tab
@@ -1181,10 +1180,10 @@
+
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1201,7 +1200,7 @@
</div>
{% endblock %}
How it works
- Open this
-
+ Open this
page not found pages second
example in a new tab
@@ -1276,10 +1274,10 @@
How it works
+
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Page not found</h1>
@@ -1296,7 +1294,7 @@ How it works
</div>
{% endblock %}
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
Ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
+
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1194,7 +1193,7 @@
</div>
{% endblock %}
+
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1279,7 +1277,7 @@ Ser
</div>
{% endblock %}
- Open this
-
+ Open this
service has offline support but no specific page that includes numbers and opening times
example in a new tab
@@ -1343,10 +1340,10 @@ Nunjucks
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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
Nunjucks
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1380,7 +1377,7 @@
A link to another service
- Open this
-
+ Open this
a link to another service – there is a problem with the service pages
example in a new tab
@@ -1425,10 +1421,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, there is a problem with the service</h1>
@@ -1443,7 +1439,7 @@ A link to another service
</div>
{% endblock %}
-
+
diff --git a/deploy/public/patterns/question-pages/index.html b/deploy/public/patterns/question-pages/index.html
index cc8381bc23..1a3c1a8b9e 100644
--- a/deploy/public/patterns/question-pages/index.html
+++ b/deploy/public/patterns/question-pages/index.html
@@ -1137,8 +1137,7 @@
- Open this
-
+ Open this
question pages
example in a new tab
@@ -1156,114 +1155,112 @@
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- Where do you live?
- </h1>
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live">
- England
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-2" name="where-do-you-live" type="radio" value="scotland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-2">
- Scotland
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-3" name="where-do-you-live" type="radio" value="wales">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-3">
- Wales
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="where-do-you-live-4" name="where-do-you-live" type="radio" value="northern-ireland">
- <label class="govuk-label govuk-radios__label" for="where-do-you-live-4">
- Northern Ireland
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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>
+ Where do you live?
+ <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">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"where-do-you-live"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"england"</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">"where-do-you-live"</span>></span>
+ England
+ <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__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">"where-do-you-live-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"scotland"</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">"where-do-you-live-2"</span>></span>
+ Scotland
+ <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__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">"where-do-you-live-3"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"wales"</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">"where-do-you-live-3"</span>></span>
+ Wales
+ <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__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">"where-do-you-live-4"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"where-do-you-live"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"northern-ireland"</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">"where-do-you-live-4"</span>></span>
+ Northern Ireland
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "where-do-you-live",
- name: "where-do-you-live",
- fieldset: {
- legend: {
- text: "Where do you live?",
- isPageHeading: true,
- classes: "govuk-fieldset__legend--l"
- }
- },
- items: [
- {
- value: "england",
- text: "England"
- },
- {
- value: "scotland",
- text: "Scotland"
- },
- {
- value: "wales",
- text: "Wales"
- },
- {
- value: "northern-ireland",
- text: "Northern Ireland"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <form action="/form-handler" method="post" novalidate>
+{{ 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"
+ }
+ },
+ items: [
+ {
+ value: "england",
+ text: "England"
+ },
+ {
+ value: "scotland",
+ text: "Scotland"
+ },
+ {
+ value: "wales",
+ text: "Wales"
+ },
+ {
+ value: "northern-ireland",
+ text: "Northern Ireland"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1308,8 +1305,7 @@ Start by asking one question per
- Open this
-
+ Open this
date of birth – question pages
example in a new tab
@@ -1327,74 +1323,72 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="dob-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
- <h1 class="govuk-fieldset__heading">
- What is your date of birth?
- </h1>
- </legend>
- <div id="dob-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="dob">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="dob-day" type="text" autocomplete="bday-day" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" autocomplete="bday-month" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="dob-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="dob-year" type="text" autocomplete="bday-year" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <form action="/form-handler" method="post" novalidate>
+<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">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">"dob-hint"</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>
+ What is your date of birth?
+ <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">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob"</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">"dob-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">"dob-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-day"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-day"</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">"dob-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">"dob-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-month"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-month"</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">"dob-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dob-year"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"bday-year"</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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1428,17 +1422,17 @@ Start by asking one question per
autocomplete: "bday-year"
}
]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1448,8 +1442,7 @@ Start by asking one question per
- Open this
-
+ Open this
postcode – question pages
example in a new tab
@@ -1467,41 +1460,39 @@ Start by asking one question per
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
<div class="govuk-form-group">
- <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="postcode">
+ <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label–l" for="postcode">
What is your home postcode?
</label>
</h1>
- <input class="govuk-input govuk-input--width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <input class="govuk-input govuk-input–width-10" id="postcode" name="postcode" type="text" autocomplete="postal-code">
+ </div>
+<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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<form action="/form-handler" method="post" novalidate>
@@ -1515,17 +1506,17 @@ Start by asking one question per
id: "postcode",
name: "postcode",
autocomplete: "postal-code"
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
+ }) }}
+{{ govukButton({
+ text: "Continue"
+ }) }}
+<span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+
+ </div>
</div>
{% endblock %}
-
+
@@ -1538,8 +1529,7 @@ Start by asking one question per
- Open this
-
+ Open this
section headings – question pages
example in a new tab
@@ -1572,8 +1562,7 @@ Asking complex questio
- Open this
-
+ Open this
explanatory text – question pages
example in a new tab
@@ -1591,134 +1580,132 @@ Asking complex questio
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Do you have any interview needs?
- </legend>
- <div class="govuk-radios" data-module="govuk-radios">
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs" name="interview-needs" type="radio" value="yes">
- <label class="govuk-label govuk-radios__label" for="interview-needs">
- Yes
- </label>
- </div>
- <div class="govuk-radios__item">
- <input class="govuk-radios__input" id="interview-needs-2" name="interview-needs" type="radio" value="no">
- <label class="govuk-label govuk-radios__label" for="interview-needs-2">
- No
- </label>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
- </form>
- </div>
- </div>
- </main>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-fieldset"</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--m"</span>></span>
+ Do you have any interview needs?
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-radios"</span> <span class="hljs-attr">data-module</span>=<span class="hljs-string">"govuk-radios"</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">"interview-needs"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"yes"</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">"interview-needs"</span>></span>
+ Yes
+ <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__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">"interview-needs-2"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"interview-needs"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"no"</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">"interview-needs-2"</span>></span>
+ No
+ <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>
+
+ <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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
-
- <h1 class="govuk-heading-l">
- Interview needs
- </h1>
-
- <p class="govuk-body">
- Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <a href="#" class="govuk-link">health condition or disability</a>.
- </p>
-
- <p class="govuk-body">
- However, if you need flexibility for other reasons you can tell us about it here.
- </p>
-
- <p class="govuk-body">
- For example, you have commitments like caring responsibilites or employment.
- </p>
-
- <p class="govuk-body">
- Contact your provider if you’re concerned about the interview process.
- </p>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukRadios({
- idPrefix: "interview-needs",
- name: "interview-needs",
- fieldset: {
- legend: {
- text: "Do you have any interview needs?",
- isPageHeading: false,
- classes: "govuk-fieldset__legend--m"
- }
- },
- items: [
- {
- value: "yes",
- text: "Yes"
- },
- {
- value: "no",
- text: "No"
- }
- ]
- }) }}
-
- {{ govukButton({
- text: "Continue"
- }) }}
- </form>
- </div>
- </div>
+ <div class="govuk-grid-column-two-thirds">
+<span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-l"</span>></span>
+ Interview needs
+ <span class="hljs-tag"></<span class="hljs-name">h1</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>
+ Providers do not usually have much flexibility when setting a date and time for interview unless you need adjustments due to a <span class="hljs-tag"><<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-link"</span>></span>health condition or disability<span class="hljs-tag"></<span class="hljs-name">a</span>></span>.
+ <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>
+ However, if you need flexibility for other reasons you can tell us about it here.
+ <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>
+ For example, you have commitments like caring responsibilites or employment.
+ <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>
+ Contact your provider if you’re concerned about the interview process.
+ <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
+
+ <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukRadios({
+ idPrefix: "interview-needs",
+ name: "interview-needs",
+ fieldset: {
+ legend: {
+ text: "Do you have any interview needs?",
+ isPageHeading: false,
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ }
+ ]
+ }) }}
+
+ {{ govukButton({
+ text: "Continue"
+ }) }}
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1732,8 +1719,7 @@ Asking multiple questions on a page
- Open this
-
+ Open this
passport – question pages
example in a new tab
@@ -1751,129 +1737,127 @@ Asking multiple questions on a page
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper " id="main-content" role="main">
+ <main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- <div class="govuk-form-group">
- <label class="govuk-label govuk-label--m" for="passport-number">
- Passport number
- </label>
- <div id="passport-number-hint" class="govuk-hint">
- For example, 502135326
- </div>
- <input class="govuk-input govuk-input--width-10" id="passport-number" name="passport-number" type="text" aria-describedby="passport-number-hint">
- </div>
-
- <div class="govuk-form-group">
- <fieldset class="govuk-fieldset" role="group" aria-describedby="expiry-hint">
- <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
- Expiry date
- </legend>
- <div id="expiry-hint" class="govuk-hint">
- For example, 31 3 1980
- </div>
- <div class="govuk-date-input" id="expiry">
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-day">
- Day
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-day" name="expiry-day" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-month">
- Month
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="expiry-month" name="expiry-month" type="text" inputmode="numeric">
- </div>
- </div>
- <div class="govuk-date-input__item">
- <div class="govuk-form-group">
- <label class="govuk-label govuk-date-input__label" for="expiry-year">
- Year
- </label>
- <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="expiry-year" name="expiry-year" type="text" inputmode="numeric">
- </div>
- </div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
- Continue
- </button>
-
- </form>
- </div>
- </div>
- </main>
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</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-label--m"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"passport-number"</span>></span>
+ Passport number
+ <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 502135326
+ <span class="hljs-tag"></<span class="hljs-name">div</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-input--width-10"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"passport-number"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">aria-describedby</span>=<span class="hljs-string">"passport-number-hint"</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-form-group"</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">"expiry-hint"</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--m"</span>></span>
+ Expiry date
+ <span class="hljs-tag"></<span class="hljs-name">legend</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-hint"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-hint"</span>></span>
+ For example, 31 3 1980
+ <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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry"</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">"expiry-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">"expiry-day"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-day"</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 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">"expiry-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">"expiry-month"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-month"</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 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">"expiry-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"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"expiry-year"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"expiry-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>
-
+
{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
-
-{% block beforeContent %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% block beforeContent %}
{{ govukBackLink({
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-l">Passport details</h1>
-
- <form action="/form-handler" method="post" novalidate>
-
- {{ govukInput({
- label: {
- text: "Passport number",
- classes: "govuk-label--m"
- },
- hint: {
- text: "For example, 502135326"
- },
- classes: "govuk-input--width-10",
- id: "passport-number",
- name: "passport-number"
- }) }}
-
- {{ govukDateInput({
- id: "expiry",
- namePrefix: "expiry",
- fieldset: {
- legend: {
- text: "Expiry date",
- classes: "govuk-fieldset__legend--m"
- }
- },
- hint: {
- text: "For example, 31 3 1980"
- }
- }) }}
+ <h1 class="govuk-heading-l">Passport details</h1>
+<span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/form-handler"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">"post"</span> <span class="hljs-attr">novalidate</span>></span>
+
+ {{ govukInput({
+ label: {
+ text: "Passport number",
+ classes: "govuk-label--m"
+ },
+ hint: {
+ text: "For example, 502135326"
+ },
+ classes: "govuk-input--width-10",
+ id: "passport-number",
+ name: "passport-number"
+ }) }}
+
+ {{ govukDateInput({
+ id: "expiry",
+ namePrefix: "expiry",
+ fieldset: {
+ legend: {
+ text: "Expiry date",
+ classes: "govuk-fieldset__legend--m"
+ }
+ },
+ hint: {
+ text: "For example, 31 3 1980"
+ }
+ }) }}
- {{ govukButton({
- text: "Continue"
- }) }}
+ {{ govukButton({
+ text: "Continue"
+ }) }}
- </form>
- </div>
- </div>
+ <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
+
+ </div>
{% endblock %}
-
+
@@ -1891,8 +1875,7 @@ Using progress indicators
- Open this
-
+ Open this
progress indicator – question pages
example in a new tab
@@ -1914,7 +1897,7 @@ Using progress indicators
-
+
<span class="govuk-caption-l">Question 3 of 9</span>
<h1 class="govuk-heading-l">
Your details
diff --git a/deploy/public/patterns/service-unavailable-pages/index.html b/deploy/public/patterns/service-unavailable-pages/index.html
index 3503b66a1b..1294261b51 100644
--- a/deploy/public/patterns/service-unavailable-pages/index.html
+++ b/deploy/public/patterns/service-unavailable-pages/index.html
@@ -1145,8 +1145,7 @@
- Open this
-
+ Open this
service unavailable
example in a new tab
@@ -1179,10 +1178,10 @@
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1196,7 +1195,7 @@
</div>
{% endblock %}
-
+
@@ -1231,8 +1230,7 @@ General page
- Open this
-
+ Open this
general page
example in a new tab
@@ -1268,10 +1266,10 @@ General page
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1288,7 +1286,7 @@ General page
</div>
{% endblock %}
-
+
@@ -1298,8 +1296,7 @@ When you know when a ser
- Open this
-
+ Open this
when you know when a service will be available
example in a new tab
@@ -1335,10 +1332,10 @@ When you know when a ser
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1355,7 +1352,7 @@ When you know when a ser
</div>
{% endblock %}
-
+
@@ -1365,8 +1362,7 @@ A link to another service
- Open this
-
+ Open this
a link to another service – service unavailable pages
example in a new tab
@@ -1402,10 +1398,10 @@ A link to another service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1422,7 +1418,7 @@ A link to another service
</div>
{% endblock %}
-
+
@@ -1434,8 +1430,7 @@ After a service closes
- Open this
-
+ Open this
after a service closes
example in a new tab
@@ -1477,10 +1472,10 @@ After a service closes
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1493,7 +1488,7 @@ After a service closes
<p class="govuk-body">
You can use the tax credits service to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1503,7 +1498,7 @@ After a service closes
</div>
{% endblock %}
-
+
@@ -1514,8 +1509,7 @@ Before a service opens
- Open this
-
+ Open this
before a service opens
example in a new tab
@@ -1556,10 +1550,10 @@ Before a service opens
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1572,7 +1566,7 @@ Before a service opens
<p class="govuk-body">
You can <a class="govuk-link" href="#">use the tax credits service</a> to:
</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li>find out more about your payments</li>
<li>see who is on your claim</li>
<li>make changes to your claim</li>
@@ -1581,7 +1575,7 @@ Before a service opens
</div>
{% endblock %}
-
+
@@ -1592,8 +1586,7 @@ Nothing has replaced the service
- Open this
-
+ Open this
nothing has replaced the service
example in a new tab
@@ -1632,10 +1625,10 @@ Nothing has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1655,7 +1648,7 @@ Nothing has replaced the service
</div>
{% endblock %}
-
+
@@ -1665,8 +1658,7 @@ Something has replaced the service
- Open this
-
+ Open this
something has replaced the service
example in a new tab
@@ -1703,10 +1695,10 @@ Something has replaced the service
-
+
{% set mainClasses = "govuk-main-wrapper--l" %}
-{% block content %}
+{% block content %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Sorry, the service is unavailable</h1>
@@ -1715,7 +1707,7 @@ Something has replaced the service</a>
if you need to speak to someone about your tax credits.
</p>
<p class="govuk-body">You can:</p>
- <ul class="govuk-list govuk-list--bullet">
+ <ul class="govuk-list govuk-list–bullet">
<li><a class="govuk-link" href="#">find out more about Universal Credit</a></li>
<li><a class="govuk-link" href="#">apply for Universal Credit</a></li>
<li><a class="govuk-link" href="#">sign in to your Universal Credit account</a></li>
@@ -1724,7 +1716,7 @@
Something has replaced the service
-
+
diff --git a/deploy/public/patterns/start-using-a-service/index.html b/deploy/public/patterns/start-using-a-service/index.html
index 6c9833d52d..284bbab57e 100644
--- a/deploy/public/patterns/start-using-a-service/index.html
+++ b/deploy/public/patterns/start-using-a-service/index.html
@@ -1170,7 +1170,8 @@ 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:
-plaintext {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 4c07ebd2ab..b6bd62b6c5 100644
--- a/deploy/public/patterns/step-by-step-navigation/index.html
+++ b/deploy/public/patterns/step-by-step-navigation/index.html
@@ -1164,10 +1164,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:
diff --git a/deploy/public/patterns/task-list-pages/index.html b/deploy/public/patterns/task-list-pages/index.html
index 78cf67a098..760c2a2335 100644
--- a/deploy/public/patterns/task-list-pages/index.html
+++ b/deploy/public/patterns/task-list-pages/index.html
@@ -1207,8 +1207,7 @@ Marking tasks as completed
- Open this
-
+ Open this
have you completed this section – task list pages
example in a new tab
@@ -1225,9 +1224,9 @@ Marking tasks as completed
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group">
+ <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">
@@ -1243,26 +1242,22 @@
Marking tasks as completed
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1282,15 +1277,13 @@
Marking tasks as completed
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
@@ -1302,8 +1295,7 @@ Error messages
- Open this
-
+ Open this
have you completed this section error – task list pages
example in a new tab
@@ -1320,9 +1312,9 @@ Error messages
<form action="/form-handler" method="post" novalidate>
- <div class="govuk-form-group govuk-form-group--error">
+ <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">
@@ -1341,26 +1333,22 @@
Error messages
No, I’ll come back to it later
</label>
</div>
- </div>
-
- </fieldset>
- </div>
-
- <button class="govuk-button" data-module="govuk-button">
+ </div>
+<span class="hljs-tag"></<span class="hljs-name">fieldset</span>></span>
+
+ </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({
+{% 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",
fieldset: {
@@ -1383,15 +1371,13 @@
Error messages
text: "No, I’ll come back to it later"
}
]
- }) }}
-
- {{ govukButton({
+ }) }}
+ {{ govukButton({
text: "Continue"
- }) }}
-
-</form>
+ }) }}
+</form>
-
+
diff --git a/deploy/public/patterns/telephone-numbers/index.html b/deploy/public/patterns/telephone-numbers/index.html
index 35681f0da7..f08eb67deb 100644
--- a/deploy/public/patterns/telephone-numbers/index.html
+++ b/deploy/public/patterns/telephone-numbers/index.html
@@ -1144,8 +1144,7 @@
- Open this
-
+ Open this
default – telephone numbers
example in a new tab
@@ -1169,10 +1168,10 @@
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1180,10 +1179,10 @@
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1206,8 +1205,7 @@ Error messages
- Open this
-
+ Open this
error, empty field – telephone numbers
example in a new tab
@@ -1234,10 +1232,10 @@ Error messages
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "UK telephone number"
},
@@ -1248,10 +1246,10 @@
Error messages
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1267,8 +1265,7 @@ Make it clear what
- Open this
-
+ Open this
international – telephone numbers
example in a new tab
@@ -1295,10 +1292,10 @@ Make it clear what
-
+
{% from "govuk/components/input/macro.njk" import govukInput %}
-{{ govukInput({
+{{ govukInput({
label: {
text: "Telephone number"
},
@@ -1309,10 +1306,10 @@
Make it clear what
name: "telephone-number",
type: "tel",
autocomplete: "tel",
- classes: "govuk-input--width-20"
+ classes: "govuk-input–width-20"
}) }}
-
+
@@ -1328,7 +1325,8 @@ Explain why you need a telephon
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:
-html <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.
diff --git a/deploy/public/styles/colour/index.html b/deploy/public/styles/colour/index.html
index c247b485aa..04fc1751ca 100644
--- a/deploy/public/styles/colour/index.html
+++ b/deploy/public/styles/colour/index.html
@@ -1024,212 +1024,213 @@ Main colours
use govuk-colour("red") rather than $govuk-error-colour.
-
-
-
-
- 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
-
-
-
-
-
+
+<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>
+
diff --git a/deploy/public/styles/images/index.html b/deploy/public/styles/images/index.html
index d93f6c7c6e..61f412acfa 100644
--- a/deploy/public/styles/images/index.html
+++ b/deploy/public/styles/images/index.html
@@ -1014,8 +1014,7 @@ Photography
- Open this
-
+ Open this
photography – images
example in a new tab
@@ -1033,8 +1032,7 @@ Illustrations or representative
- Open this
-
+ Open this
illustrations or representative – images
example in a new tab
@@ -1067,8 +1065,7 @@ Alternative text
- Open this
-
+ Open this
alt text – images
example in a new tab
diff --git a/deploy/public/styles/layout/index.html b/deploy/public/styles/layout/index.html
index 25f117182a..e8dae8da16 100644
--- a/deploy/public/styles/layout/index.html
+++ b/deploy/public/styles/layout/index.html
@@ -1205,8 +1205,7 @@ Two-thirds
- Open this
-
+ Open this
common two-thirds – layout
example in a new tab
@@ -1224,19 +1223,18 @@ Two-thirds
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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>
+
+ </main>
</div>
-
+
@@ -1246,8 +1244,7 @@ Two-thirds and one-third
- Open this
-
+ Open this
common two-thirds / one-third – layout
example in a new tab
@@ -1265,24 +1262,23 @@ Two-thirds and one-third
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h2 class="govuk-heading-m">One-third column</h2>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h2</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1293,8 +1289,7 @@ Row 1: Two-thirds
R
- Open this
-
+ Open this
common two-thirds with two rows – layout
example in a new tab
@@ -1312,32 +1307,31 @@ Row 1: Two-thirds
R
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Two-thirds column</h1>
- </div>
- </div>
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h2 class="govuk-heading-l">Two-thirds column</h2>
- <p class="govuk-body-l">This is a lead paragraph inside a two-thirds wide column</p>
- <p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
- </div>
-
- <div class="govuk-grid-column-one-third">
- <h3 class="govuk-heading-m">One-third column</h3>
- <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
-
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h1</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-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-heading-l"</span>></span>Two-thirds column<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-body-l"</span>></span>This is a lead paragraph inside a two-thirds wide column<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>This is a paragraph inside a two-thirds wide column<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 class="hljs-attr">class</span>=<span class="hljs-string">"govuk-grid-column-one-third"</span>></span>
+ <span class="hljs-tag"><<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-m"</span>></span>One-third column<span class="hljs-tag"></<span class="hljs-name">h3</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>This is a paragraph inside a one-third wide column<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>
+
+ </main>
</div>
-
+
@@ -1361,8 +1355,7 @@ Exploded view of page wrappers
- Open this
-
+ Open this
page wrapper – layout
example in a new tab
@@ -1380,18 +1373,17 @@ Exploded view of page wrappers
<div class="govuk-width-container">
<a href="#" class="govuk-back-link">Back</a>
- <main class="govuk-main-wrapper">
-
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+ <main class="govuk-main-wrapper">
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1401,8 +1393,7 @@
- Open this
-
+ Open this
page wrapper without content after the header – layout
example in a new tab
@@ -1420,16 +1411,16 @@ <div class="govuk-width-container">
<main class="govuk-main-wrapper govuk-main-wrapper--l">
- <div class="govuk-grid-row">
- <div class="govuk-grid-column-two-thirds">
- <h1 class="govuk-heading-xl">Page title</h1>
- </div>
- </div>
-
- </main>
+<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">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-heading-xl"</span>></span>Page title<span class="hljs-tag"></<span class="hljs-name">h1</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>
-
+
@@ -1447,8 +1438,7 @@ Full width
- Open this
-
+ Open this
full width – layout
example in a new tab
@@ -1479,8 +1469,7 @@ One-half
- Open this
-
+ Open this
one-half – layout
example in a new tab
@@ -1511,8 +1500,7 @@ One-third
- Open this
-
+ Open this
one-third – layout
example in a new tab
@@ -1543,8 +1531,7 @@ Two-thirds
- Open this
-
+ Open this
two-thirds – layout
example in a new tab
@@ -1575,8 +1562,7 @@ One-quarter
- Open this
-
+ Open this
one-quarter – layout
example in a new tab
@@ -1607,8 +1593,7 @@ Three-quarters
- Open this
-
+ Open this
three-quarters – layout
example in a new tab
@@ -1639,8 +1624,7 @@ Example combinations
- Open this
-
+ Open this
combinations – layout
example in a new tab
@@ -1661,43 +1645,39 @@ Example combinations
</div>
</div>
-<div class="govuk-grid-row">
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
<div class="govuk-grid-column-one-half">
<p>govuk-grid-column-one-half</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<p>govuk-grid-column-one-third</p>
</div>
<div class="govuk-grid-column-two-thirds">
<p>govuk-grid-column-two-thirds</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<p>govuk-grid-column-three-quarters</p>
</div>
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
-</div>
-
-<div class="govuk-grid-row">
+</div>
+<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<p>govuk-grid-column-one-quarter</p>
</div>
@@ -1706,7 +1686,7 @@
Example combinations
</div>
</div>
-
+
@@ -1717,8 +1697,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop grid classes – layout
example in a new tab
@@ -1752,8 +1731,7 @@ Desktop specific grid classes
- Open this
-
+ Open this
desktop and tablet grid classes – layout
example in a new tab
@@ -1787,8 +1765,7 @@ Nested grids
- Open this
-
+ Open this
nested – layout
example in a new tab
@@ -1831,8 +1808,7 @@ Width override classes
- Open this
-
+ Open this
overriding input width – spacing
example in a new tab
@@ -1854,42 +1830,38 @@ Width override classes
<input class="govuk-input govuk-!-width-full" id="full" name="full" type="text">
</div>
-<div class="govuk-form-group">
+<div class="govuk-form-group">
<label class="govuk-label" for="three-quarters">
Three-quarters width
</label>
<input class="govuk-input govuk-!-width-three-quarters" id="three-quarters" name="three-quarters" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="two-thirds">
Two-thirds width
</label>
<input class="govuk-input govuk-!-width-two-thirds" id="two-thirds" name="two-thirds" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-half">
One-half width
</label>
<input class="govuk-input govuk-!-width-one-half" id="one-half" name="one-half" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-third">
One-third width
</label>
<input class="govuk-input govuk-!-width-one-third" id="one-third" name="one-third" type="text">
-</div>
-
-<div class="govuk-form-group">
+</div>
+<div class="govuk-form-group">
<label class="govuk-label" for="one-quarter">
One-quarter width
</label>
<input class="govuk-input govuk-!-width-one-quarter" id="one-quarter" name="one-quarter" type="text">
</div>
-
+
diff --git a/deploy/public/styles/page-template/index.html b/deploy/public/styles/page-template/index.html
index ce582a032c..0acc08f1fa 100644
--- a/deploy/public/styles/page-template/index.html
+++ b/deploy/public/styles/page-template/index.html
@@ -1023,8 +1023,7 @@ Default
- Open this
-
+ Open this
default – page template
example in a new tab
@@ -1042,56 +1041,46 @@ Default
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - The best place to find government services and information</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="#0b0c0c">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="#0b0c0c">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
-</head>
-
-<body class="govuk-template__body ">
+ <![endif]–>
+</head>
+<body class="govuk-template__body ">
<script>
- document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-
- </script>
-
- <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
-
- <header class="govuk-header " role="banner" data-module="govuk-header">
+ document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+ </script>
+ <a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
+ <header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
- <a href="/" class="govuk-header__link govuk-header__link--homepage">
+ <a href="/" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1099,74 +1088,65 @@
Default
</a>
</div>
</div>
- </header>
-
- <div class="govuk-width-container ">
+ </header>
+ <div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<h1 class="govuk-heading-xl">Default page template</h1>
</main>
- </div>
-
- <footer class="govuk-footer " role="contentinfo">
+ </div>
+ <footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
- <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
-
- <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>
+ <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>
+<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
+
+ </footer>
+ <script src="/govuk-frontend/all.js"></script>
<script>
- window.GOVUKFrontend.initAll()
-
- </script>
-</body>
-
-</html>
+ window.GOVUKFrontend.initAll()
+ </script>
+</body>
+</html>
-
+
{% block head %}
<!--[if !IE 8]><!-->
<link href="/govuk-frontend/govuk/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- {# For Internet Explorer 8, you need to compile specific stylesheet #}
- {# see https://frontend.design-system.service.gov.uk/supporting-ie8/#support-internet-explorer-8 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# For older browsers to allow them to recognise HTML5 elements such as <header> #}
<!--[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
<![endif]-->
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Default page template</h1>
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
{# Run JavaScript at end of the <body>, to avoid blocking the initial render. #}
<script src="/govuk-frontend/all.js"></script>
<script>window.GOVUKFrontend.initAll()</script>
{% endblock %}
-
+
@@ -1181,8 +1161,7 @@ Customised page template
- Open this
-
+ Open this
customised – page template
example in a new tab
@@ -1200,82 +1179,72 @@ Customised page template
<!DOCTYPE html>
<html lang="en" class="govuk-template app-html-class">
-<head>
+<head>
<meta charset="utf-8">
<title>GOV.UK - Customised page template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <meta name="theme-color" content="blue">
-
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
- <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
+ <meta name="theme-color" content="blue">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/images/govuk-mask-icon.svg" color="blue">
<link rel="apple-touch-icon" sizes="180x180" href="/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/images/govuk-apple-touch-icon-152x152.png">
- <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
-
- <!--[if !IE 8]><!-->
+ <link rel="apple-touch-icon" href="/images/govuk-apple-touch-icon.png">
+ <!–[if !IE 8]><!–>
<link href="/govuk-frontend/all.css" rel="stylesheet">
- <!--<![endif]-->
-
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<link href="/govuk-frontend/all-ie8.css" rel="stylesheet">
- <![endif]-->
-
- <!--[if lt IE 9]>
+ <![endif]–>
+ <!–[if lt IE 9]>
<script src="/html5-shiv/html5shiv.js"></script>
- <![endif]-->
-
- <meta property="og:image" content="<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">
-
- <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-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-header__container app-width-container">
<div class="govuk-header__logo">
- <a href="#" class="govuk-header__link govuk-header__link--homepage">
+ <a href="#" class="govuk-header__link govuk-header__link–homepage">
<span class="govuk-header__logotype">
- <!--[if gt IE 8]><!-->
- <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
+ <!–[if gt IE 8]><!–>
+ <svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
- <!--<![endif]-->
- <!--[if IE 8]>
+ <!–<![endif]–>
+ <!–[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
- <![endif]-->
+ <![endif]–>
<span class="govuk-header__logotype-text">
GOV.UK
</span>
@@ -1287,31 +1256,30 @@
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>
-
- <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">
+ <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">
<div class="govuk-phase-banner">
<p class="govuk-phase-banner__content">
<strong class="govuk-tag govuk-phase-banner__content__tag">
@@ -1321,19 +1289,18 @@
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>
-
- <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>
+<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>
+
+<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">
<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">
@@ -1356,41 +1323,37 @@
Customised page template
Terms and conditions
</a>
</li>
- </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>
+ </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>
-
- {# Example that changes every setting in the template #}
-
-{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+
+ {# 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" %}
+{% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% set htmlClasses = "app-html-class" %}
{% set htmlLang = "en" %}
{% set assetPath = "" %}
{% set assetUrl = "<YOUR-DOMAIN>" %}
@@ -1400,39 +1363,33 @@
Customised page template
'data-test': 'My value',
'data-other': 'report:details'
} %}
-{% set containerClasses = "app-width-container" %}
-
-{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
-
-{% block headIcons %}
+{% set containerClasses = "app-width-container" %}
+{% block pageTitle %}GOV.UK - Customised page template{% endblock %}
+{% block headIcons %}
{{ super() }}
-{% endblock %}
-
-{% block head %}
+{% 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 #}
+ <!--<![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 #}
<!--[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>` #}
+ <![endif]-->
+ {# 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 %}
+{% 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",
@@ -1454,16 +1411,14 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% block skipLink %}
+{% endblock %}
+{% block skipLink %}
{{ govukSkipLink({
href: "#main-content",
text: "Skip to main content"
}) }}
-{% endblock %}
-
-{% block header %}
+{% endblock %}
+{% block header %}
{{ govukHeader({
homepageUrl: "#",
containerClasses: "app-width-container",
@@ -1485,15 +1440,12 @@
Customised page template
}
]
}) }}
-{% endblock %}
-
-{% set mainClasses = "app-main-class" %}
-
-{% block main %}
+{% endblock %}
+{% set mainClasses = "app-main-class" %}
+{% block main %}
{{ super() }}
-{% endblock %}
-
-{% block beforeContent %}
+{% endblock %}
+{% block beforeContent %}
{{ govukPhaseBanner({
tag: {
text: "alpha"
@@ -1504,13 +1456,11 @@
Customised page template
href: "#",
text: "Back"
}) }}
-{% endblock %}
-
-{% block content %}
+{% endblock %}
+{% block content %}
<h1 class="govuk-heading-xl">Customised page template</h1>
-{% endblock %}
-
-{% block footer %}
+{% endblock %}
+{% block footer %}
{{ govukFooter({
meta: {
items: [
@@ -1533,13 +1483,12 @@
Customised page template
]
}
}) }}
-{% endblock %}
-
-{% block bodyEnd %}
+{% endblock %}
+{% block bodyEnd %}
<script src="/govuk-frontend/all.js"></script>
{% endblock %}
-
+
@@ -1548,26 +1497,23 @@ 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:
-```javascript
-{% 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