Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SPIKE] Investigate the utility of an input macro separate from govukInput #4702

Closed
wants to merge 5 commits into from
Closed

[SPIKE] Investigate the utility of an input macro separate from govukInput #4702

wants to merge 5 commits into from

Conversation

querkmachine
Copy link
Member

@querkmachine querkmachine commented Jan 30, 2024 •
edited
Loading

Background

Currently, the Date input component directly imports and uses the govukInput macro to provide the date fields; and the Character count component directly imports and uses the govukTextarea macro for the textarea.

In both cases, importing the macro carries with it the entire HTML of that component, including the govuk-form-group wrapper, label, hint, error message, and the input/textarea itself. This HTML is non-permeable to the parent component and cannot be altered, unless we specifically extend those macros with new parameters to do so.

The Character count component

In the case of the Character count, this limitation has led to a few 'hacky' workarounds:

  • The inability to alter what's inside govukTextarea means that the 'info' hint below the textarea has to live outside of govuk-form-group, which has a large bottom margin that pushes the 'info' hint away from the textarea.
  • Custom CSS is then used to remove the bottom margin from govuk-form-group and instead apply an identical margin to govuk-character-count, a new element that wraps around the entire form group.
  • JavaScript is used to move the 'info' hint up to within the govuk-form-group where it's available to do so.

None of these are ideal, and all of them constitutes extra code loaded by browsers that doesn't need to exist.

The Password input component

In developing the Password input component, we also saw us having to deal with similar frustrations when it came to applying a wrapping element around only the input of govukInput and placing a button within that new wrapper.

There was also some trepidation about how govukInput could conflict with or compromise the effectiveness of the Password input; such as how input's prefix/suffix HTML may interfere with the Password input's own wrapper and button, or that some of the accessibility and security features of the password input could be overridden through modification of the inherited input.

These issues led us to initially decide to not use the macro — #4512.

Exploring solutions

Reckoning that this may be a recurring problem in future, we are considering a few ways to modify how these components are composed to avoid these problems.

One option being explored is to add 'injection' points within the components where arbitrary HTML can be added, similar to how we use Nunjucks blocks in templating — #4567.

The idea behind this spike

This spike seeks to minimise the use of directly importing and extending govukInput and govukTextarea in favour of two 'internal' macros.

These macros only include the base input and textarea elements, and do not include the other parts (group wrapper, label, etc.) with the expectation that:

  • Components become more 'standalone', implementing their own label/hint/error code rather than reusing them from the Text input and Textarea components.
  • In doing so, we can 'liberalise' the component HTML and allow it to more readily diverge where it needs to, such as for Character count and Password input.
  • These macros define the system-wide defaults and are extended with whatever parameter options become necessary, instead of having those options unnecessarily bloat the govukInput and govukTextarea components.
  • Components can choose to only expose the relevant parameters of the underlying macros.

Changes

  • Creates govukInputElement and govukTextareaElement Nunjucks macros, each containing the base input and textarea elements.
  • Additionally creates a _govukTextCommonAttributes macro for attributes that are common to both input and textarea.
  • Reworks Character Count, Date input, (Text) Input, Password input and Textarea to use the new macros.
  • Additionally reworks Character count to:
    • move the wrapping element to within the form group
    • move the 'info' hint to within the form group
    • remove the CSS styles to adjust the bottom margins
    • remove the JavaScript to programatically move the 'info' hint

Thoughts

  • I am not at all tied to the current names for the internal macros. They can probably be a lot clearer.
  • Not much care put to how the HTML is output either. This can definitely be improved too.
  • No tests as it's a spike.

@querkmachine
Prototype password input component
a0878e5 
This is a (mostly) straight port of the JavaScript in GOV.UK Publishing Components combined with the text input component, with some minor
alterations:

- JavaScript has been modified to fit the Design System's coding and documentation conventions.
- Support for configuration and localisation strings has been added.
- The function to move specific data-attributes has been omitted for the time being.
- Custom button styles have not been ported, instead using those from the Design System.
- Configuration options (via JS or data-attributes) haven't been hooked up just yet.
@querkmachine
Rename translation strings, implement data attribute config
4ac1272
@querkmachine
Style refinements
54f6acc 
- Fix button appearing visually taller than the input
- Fix button changing size when text updated by setting a sensible flex-basis
- Fix button obscuring the input's focus style by adding a small space between the elements
@querkmachine
Resolve Typescript complaints
2c727f0
@querkmachine
Spike the use of a separate text input macro
2e3a09f 
Spikes the use of a separate govukInputElement and govukTextareaElement Nunjucks macro that is inherited by a number of other components:

- Character count
- Date input
- (Text) Input
- Password input
- Textarea

It is thought that by abstracting these relatively-heavily reused elements into a macro, we can overload that macro with all of the parameters it may require, instead of doing so on one specific implementation of it (i.e. the Text input component)
@querkmachine querkmachine self-assigned this Jan 30, 2024
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4702 January 30, 2024 15:50 Inactive
@github-actions GitHub Actions
Copy link

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.58 KiB
dist/govuk-frontend-development.min.js 41.61 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 84.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 79.56 KiB
packages/govuk-frontend/dist/govuk/all.mjs 4.17 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 112.57 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 41.6 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.38 KiB

Modules

File Size
all.mjs 75.69 KiB
components/accordion/accordion.mjs 21.67 KiB
components/button/button.mjs 4.7 KiB
components/character-count/character-count.mjs 21.17 KiB
components/checkboxes/checkboxes.mjs 5.83 KiB
components/error-summary/error-summary.mjs 6.57 KiB
components/exit-this-page/exit-this-page.mjs 16.08 KiB
components/header/header.mjs 4.46 KiB
components/notification-banner/notification-banner.mjs 4.93 KiB
components/password-input/password-input.mjs 14.84 KiB
components/radios/radios.mjs 4.83 KiB
components/skip-link/skip-link.mjs 4.39 KiB
components/tabs/tabs.mjs 10.16 KiB

View stats and visualisations on the review app

Action run for 2e3a09f

@github-actions GitHub Actions
Copy link

JavaScript changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
index 3e2618739..c1c80bfe7 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.js
@@ -4,27 +4,27 @@ function mergeConfigs(...t) {
     function flattenObject(t) {
         const e = {};
         return function flattenLoop(t, s) {
-            for (const [n, i] of Object.entries(t)) {
-                const t = s ? `${s}.${n}` : n;
-                i && "object" == typeof i ? flattenLoop(i, t) : e[t] = i
+            for (const [i, n] of Object.entries(t)) {
+                const t = s ? `${s}.${i}` : i;
+                n && "object" == typeof n ? flattenLoop(n, t) : e[t] = n
             }
         }(t), e
     }
     const e = {};
     for (const s of t) {
         const t = flattenObject(s);
-        for (const [s, n] of Object.entries(t)) e[s] = n
+        for (const [s, i] of Object.entries(t)) e[s] = i
     }
     return e
 }
 
 function extractConfigByNamespace(t, e) {
     const s = {};
-    for (const [n, i] of Object.entries(t)) {
-        const t = n.split(".");
+    for (const [i, n] of Object.entries(t)) {
+        const t = i.split(".");
         if (t[0] === e) {
             t.length > 1 && t.shift();
-            s[t.join(".")] = i
+            s[t.join(".")] = n
         }
     }
     return s
@@ -44,13 +44,13 @@ function getBreakpoint(t) {
 
 function setFocus(t, e = {}) {
     var s;
-    const n = t.getAttribute("tabindex");
+    const i = t.getAttribute("tabindex");
 
     function onBlur() {
         var s;
-        null == (s = e.onBlur) || s.call(t), n || t.removeAttribute("tabindex")
+        null == (s = e.onBlur) || s.call(t), i || t.removeAttribute("tabindex")
     }
-    n || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
+    i || t.setAttribute("tabindex", "-1"), t.addEventListener("focus", (function() {
         t.addEventListener("blur", onBlur, {
             once: !0
         })
@@ -65,14 +65,14 @@ function isSupported(t = document.body) {
 
 function validateConfig(t, e) {
     const s = [];
-    for (const [n, i] of Object.entries(t)) {
+    for (const [i, n] of Object.entries(t)) {
         const t = [];
         for (const {
                 required: s,
-                errorMessage: n
+                errorMessage: i
             }
-            of i) s.every((t => !!e[t])) || t.push(n);
-        "anyOf" !== n || i.length - t.length >= 1 || s.push(...t)
+            of n) s.every((t => !!e[t])) || t.push(i);
+        "anyOf" !== i || n.length - t.length >= 1 || s.push(...t)
     }
     return s
 }
@@ -85,7 +85,7 @@ function normaliseString(t) {
 
 function normaliseDataset(t) {
     const e = {};
-    for (const [s, n] of Object.entries(t)) e[s] = normaliseString(n);
+    for (const [s, i] of Object.entries(t)) e[s] = normaliseString(i);
     return e
 }
 class GOVUKFrontendError extends Error {
@@ -110,11 +110,11 @@ class ElementError extends GOVUKFrontendError {
         if ("object" == typeof t) {
             const {
                 componentName: s,
-                identifier: n,
-                element: i,
+                identifier: i,
+                element: n,
                 expectedType: o
             } = t;
-            e = `${s}: ${n}`, e += i ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
+            e = `${s}: ${i}`, e += n ? ` is not of type ${null!=o?o:"HTMLElement"}` : " not found"
         }
         super(e), this.name = "ElementError"
     }
@@ -147,9 +147,9 @@ class I18n {
     }
     replacePlaceholders(t, e) {
         const s = Intl.NumberFormat.supportedLocalesOf(this.locale).length ? new Intl.NumberFormat(this.locale) : void 0;
-        return t.replace(/%{(.\S+)}/g, (function(t, n) {
-            if (Object.prototype.hasOwnProperty.call(e, n)) {
-                const t = e[n];
+        return t.replace(/%{(.\S+)}/g, (function(t, i) {
+            if (Object.prototype.hasOwnProperty.call(e, i)) {
+                const t = e[i];
                 return !1 === t || "number" != typeof t && "string" != typeof t ? "" : "number" == typeof t ? s ? s.format(t) : `${t}` : t
             }
             throw new Error(`i18n: no data found to replace ${t} placeholder in string`)
@@ -211,14 +211,14 @@ class Accordion extends GOVUKFrontendComponent {
             identifier: "Root element (`$module`)"
         });
         this.$module = e, this.config = mergeConfigs(Accordion.defaults, s, normaliseDataset(e.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"));
-        const n = this.$module.querySelectorAll(`.${this.sectionClass}`);
-        if (!n.length) throw new ElementError({
+        const i = this.$module.querySelectorAll(`.${this.sectionClass}`);
+        if (!i.length) throw new ElementError({
             componentName: "Accordion",
             identifier: `Sections (\`<div class="${this.sectionClass}">\`)`
         });
-        this.$sections = n, this.browserSupportsSessionStorage = t.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
-        const i = this.checkIfAllSectionsOpen();
-        this.updateShowAllButton(i)
+        this.$sections = i, this.browserSupportsSessionStorage = t.checkForSessionStorage(), this.initControls(), this.initSectionHeaders();
+        const n = this.checkIfAllSectionsOpen();
+        this.updateShowAllButton(n)
     }
     initControls() {
         this.$showAllButton = document.createElement("button"), this.$showAllButton.setAttribute("type", "button"), this.$showAllButton.setAttribute("class", this.showAllClass), this.$showAllButton.setAttribute("aria-expanded", "false"), this.$showAllIcon = document.createElement("span"), this.$showAllIcon.classList.add(this.upChevronIconClass), this.$showAllButton.appendChild(this.$showAllIcon);
@@ -237,9 +237,9 @@ class Accordion extends GOVUKFrontendComponent {
     }
     constructHeaderMarkup(t, e) {
         const s = t.querySelector(`.${this.sectionButtonClass}`),
-            n = t.querySelector(`.${this.sectionHeadingClass}`),
-            i = t.querySelector(`.${this.sectionSummaryClass}`);
-        if (!n) throw new ElementError({
+            i = t.querySelector(`.${this.sectionHeadingClass}`),
+            n = t.querySelector(`.${this.sectionSummaryClass}`);
+        if (!i) throw new ElementError({
             componentName: "Accordion",
             identifier: `Section heading (\`.${this.sectionHeadingClass}\`)`
         });
@@ -260,14 +260,14 @@ class Accordion extends GOVUKFrontendComponent {
         h.classList.add(this.sectionShowHideToggleFocusClass), l.appendChild(h);
         const c = document.createElement("span"),
             u = document.createElement("span");
-        if (u.classList.add(this.upChevronIconClass), h.appendChild(u), c.classList.add(this.sectionShowHideTextClass), h.appendChild(c), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != i && i.parentNode) {
+        if (u.classList.add(this.upChevronIconClass), h.appendChild(u), c.classList.add(this.sectionShowHideTextClass), h.appendChild(c), o.appendChild(r), o.appendChild(this.getButtonPunctuationEl()), null != n && n.parentNode) {
             const t = document.createElement("span"),
                 e = document.createElement("span");
             e.classList.add(this.sectionSummaryFocusClass), t.appendChild(e);
-            for (const s of Array.from(i.attributes)) t.setAttribute(s.nodeName, `${s.nodeValue}`);
-            e.innerHTML = i.innerHTML, i.parentNode.replaceChild(t, i), o.appendChild(t), o.appendChild(this.getButtonPunctuationEl())
+            for (const s of Array.from(n.attributes)) t.setAttribute(s.nodeName, `${s.nodeValue}`);
+            e.innerHTML = n.innerHTML, n.parentNode.replaceChild(t, n), o.appendChild(t), o.appendChild(this.getButtonPunctuationEl())
         }
-        o.appendChild(l), n.removeChild(s), n.appendChild(o)
+        o.appendChild(l), i.removeChild(s), i.appendChild(o)
     }
     onBeforeMatch(t) {
         const e = t.target;
@@ -287,23 +287,23 @@ class Accordion extends GOVUKFrontendComponent {
     }
     setExpanded(t, e) {
         const s = e.querySelector(`.${this.upChevronIconClass}`),
-            n = e.querySelector(`.${this.sectionShowHideTextClass}`),
-            i = e.querySelector(`.${this.sectionButtonClass}`),
+            i = e.querySelector(`.${this.sectionShowHideTextClass}`),
+            n = e.querySelector(`.${this.sectionButtonClass}`),
             o = e.querySelector(`.${this.sectionContentClass}`);
         if (!o) throw new ElementError({
             componentName: "Accordion",
             identifier: `Section content (\`<div class="${this.sectionContentClass}">\`)`
         });
-        if (!s || !n || !i) return;
+        if (!s || !i || !n) return;
         const r = t ? this.i18n.t("hideSection") : this.i18n.t("showSection");
-        n.textContent = r, i.setAttribute("aria-expanded", `${t}`);
+        i.textContent = r, n.setAttribute("aria-expanded", `${t}`);
         const a = [],
             l = e.querySelector(`.${this.sectionHeadingTextClass}`);
         l && a.push(`${l.textContent}`.trim());
         const h = e.querySelector(`.${this.sectionSummaryClass}`);
         h && a.push(`${h.textContent}`.trim());
         const c = t ? this.i18n.t("hideSectionAriaLabel") : this.i18n.t("showSectionAriaLabel");
-        a.push(c), i.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), s.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), s.classList.add(this.downChevronIconClass));
+        a.push(c), n.setAttribute("aria-label", a.join(" , ")), t ? (o.removeAttribute("hidden"), e.classList.add(this.sectionExpandedClass), s.classList.remove(this.downChevronIconClass)) : (o.setAttribute("hidden", "until-found"), e.classList.remove(this.sectionExpandedClass), s.classList.add(this.downChevronIconClass));
         const u = this.checkIfAllSectionsOpen();
         this.updateShowAllButton(u)
     }
@@ -331,8 +331,8 @@ class Accordion extends GOVUKFrontendComponent {
             const e = t.querySelector(`.${this.sectionButtonClass}`);
             if (e) {
                 const s = e.getAttribute("aria-controls"),
-                    n = s ? window.sessionStorage.getItem(s) : null;
-                null !== n && this.setExpanded("true" === n, t)
+                    i = s ? window.sessionStorage.getItem(s) : null;
+                null !== i && this.setExpanded("true" === i, t)
             }
         }
     }
@@ -392,16 +392,16 @@ Button.moduleName = "govuk-button", Button.defaults = Object.freeze({
 });
 class CharacterCount extends GOVUKFrontendComponent {
     constructor(t, e = {}) {
-        var s, n;
+        var s, i;
         if (super(), this.$module = void 0, this.$textarea = void 0, this.$visibleCountMessage = void 0, this.$screenReaderCountMessage = void 0, this.lastInputTimestamp = null, this.lastInputValue = "", this.valueChecker = null, this.config = void 0, this.i18n = void 0, this.maxLength = void 0, !(t instanceof HTMLElement)) throw new ElementError({
             componentName: "Character count",
             element: t,
             identifier: "Root element (`$module`)"
         });
-        const i = t.querySelector(".govuk-js-character-count");
-        if (!(i instanceof HTMLTextAreaElement || i instanceof HTMLInputElement)) throw new ElementError({
+        const n = t.querySelector(".govuk-js-character-count");
+        if (!(n instanceof HTMLTextAreaElement || n instanceof HTMLInputElement)) throw new ElementError({
             componentName: "Character count",
-            element: i,
+            element: n,
             expectedType: "HTMLTextareaElement or HTMLInputElement",
             identifier: "Form field (`.govuk-js-character-count`)"
         });
@@ -415,7 +415,7 @@ class CharacterCount extends GOVUKFrontendComponent {
         if (a[0]) throw new ConfigError(`Character count: ${a[0]}`);
         this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n"), {
             locale: closestAttributeValue(t, "lang")
-        }), this.maxLength = null != (s = null != (n = this.config.maxwords) ? n : this.config.maxlength) ? s : 1 / 0, this.$module = t, this.$textarea = i;
+        }), this.maxLength = null != (s = null != (i = this.config.maxwords) ? i : this.config.maxlength) ? s : 1 / 0, this.$module = t, this.$textarea = n;
         const l = `${this.$textarea.id}-info`,
             h = document.getElementById(l);
         if (!h) throw new ElementError({
@@ -425,7 +425,7 @@ class CharacterCount extends GOVUKFrontendComponent {
         });
         `${h.textContent}`.match(/^\s*$/) && (h.textContent = this.i18n.t("textareaDescription", {
             count: this.maxLength
-        })), this.$textarea.insertAdjacentElement("afterend", h);
+        }));
         const c = document.createElement("div");
         c.className = "govuk-character-count__sr-status govuk-visually-hidden", c.setAttribute("aria-live", "polite"), this.$screenReaderCountMessage = c, h.insertAdjacentElement("afterend", c);
         const u = document.createElement("div");
@@ -589,8 +589,8 @@ class ErrorSummary extends GOVUKFrontendComponent {
         if (!e) return !1;
         const s = document.getElementById(e);
         if (!s) return !1;
-        const n = this.getAssociatedLegendOrLabel(s);
-        return !!n && (n.scrollIntoView(), s.focus({
+        const i = this.getAssociatedLegendOrLabel(s);
+        return !!i && (i.scrollIntoView(), s.focus({
             preventScroll: !0
         }), !0)
     }
@@ -602,10 +602,10 @@ class ErrorSummary extends GOVUKFrontendComponent {
             if (e.length) {
                 const s = e[0];
                 if (t instanceof HTMLInputElement && ("checkbox" === t.type || "radio" === t.type)) return s;
-                const n = s.getBoundingClientRect().top,
-                    i = t.getBoundingClientRect();
-                if (i.height && window.innerHeight) {
-                    if (i.top + i.height - n < window.innerHeight / 2) return s
+                const i = s.getBoundingClientRect().top,
+                    n = t.getBoundingClientRect();
+                if (n.height && window.innerHeight) {
+                    if (n.top + n.height - i < window.innerHeight / 2) return s
                 }
             }
         }
@@ -630,8 +630,8 @@ class ExitThisPage extends GOVUKFrontendComponent {
             identifier: "Button (`.govuk-exit-this-page__button`)"
         });
         this.config = mergeConfigs(ExitThisPage.defaults, e, normaliseDataset(t.dataset)), this.i18n = new I18n(extractConfigByNamespace(this.config, "i18n")), this.$module = t, this.$button = s;
-        const n = document.querySelector(".govuk-js-exit-this-page-skiplink");
-        n instanceof HTMLAnchorElement && (this.$skiplinkButton = n), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
+        const i = document.querySelector(".govuk-js-exit-this-page-skiplink");
+        i instanceof HTMLAnchorElement && (this.$skiplinkButton = i), this.buildIndicator(), this.initUpdateSpan(), this.initButtonClickHandler(), "govukFrontendExitThisPageKeypress" in document.body.dataset || (document.addEventListener("keyup", this.handleKeypress.bind(this), !0), document.body.dataset.govukFrontendExitThisPageKeypress = "true"), window.addEventListener("pageshow", this.resetPage.bind(this))
     }
     initUpdateSpan() {
         this.$updateSpan = document.createElement("span"), this.$updateSpan.setAttribute("role", "status"), this.$updateSpan.className = "govuk-visually-hidden", this.$module.appendChild(this.$updateSpan)
@@ -701,13 +701,13 @@ class Header extends GOVUKFrontendComponent {
             componentName: "Header",
             identifier: 'Navigation button (`<button class="govuk-js-header-toggle">`) attribute (`aria-controls`)'
         });
-        const n = document.getElementById(s);
-        if (!n) throw new ElementError({
+        const i = document.getElementById(s);
+        if (!i) throw new ElementError({
             componentName: "Header",
-            element: n,
+            element: i,
             identifier: `Navigation (\`<ul id="${s}">\`)`
         });
-        this.$menu = n, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
+        this.$menu = i, this.$menuButton = e, this.setupResponsiveChecks(), this.$menuButton.addEventListener("click", (() => this.handleMenuButtonClick()))
     }
     setupResponsiveChecks() {
         const t = getBreakpoint("desktop");
@@ -818,11 +818,11 @@ class Radios extends GOVUKFrontendComponent {
         const e = t.target;
         if (!(e instanceof HTMLInputElement) || "radio" !== e.type) return;
         const s = document.querySelectorAll('input[type="radio"][aria-controls]'),
-            n = e.form,
-            i = e.name;
+            i = e.form,
+            n = e.name;
         s.forEach((t => {
-            const e = t.form === n;
-            t.name === i && e && this.syncConditionalRevealWithInputState(t)
+            const e = t.form === i;
+            t.name === n && e && this.syncConditionalRevealWithInputState(t)
         }))
     }
 }
@@ -838,16 +838,16 @@ class SkipLink extends GOVUKFrontendComponent {
         });
         this.$module = t;
         const s = this.$module.hash,
-            n = null != (e = this.$module.getAttribute("href")) ? e : "";
-        let i;
+            i = null != (e = this.$module.getAttribute("href")) ? e : "";
+        let n;
         try {
-            i = new window.URL(this.$module.href)
+            n = new window.URL(this.$module.href)
         } catch (a) {
-            throw new ElementError(`Skip link: Target link (\`href="${n}"\`) is invalid`)
+            throw new ElementError(`Skip link: Target link (\`href="${i}"\`) is invalid`)
         }
-        if (i.origin !== window.location.origin || i.pathname !== window.location.pathname) return;
+        if (n.origin !== window.location.origin || n.pathname !== window.location.pathname) return;
         const o = getFragmentFromUrl(s);
-        if (!o) throw new ElementError(`Skip link: Target link (\`href="${n}"\`) has no hash fragment`);
+        if (!o) throw new ElementError(`Skip link: Target link (\`href="${i}"\`) has no hash fragment`);
         const r = document.getElementById(o);
         if (!r) throw new ElementError({
             componentName: "Skip link",
@@ -884,16 +884,16 @@ class Tabs extends GOVUKFrontendComponent {
         });
         this.$module = t, this.$tabs = e, this.boundTabClick = this.onTabClick.bind(this), this.boundTabKeydown = this.onTabKeydown.bind(this), this.boundOnHashChange = this.onHashChange.bind(this);
         const s = this.$module.querySelector(".govuk-tabs__list"),
-            n = this.$module.querySelectorAll("li.govuk-tabs__list-item");
+            i = this.$module.querySelectorAll("li.govuk-tabs__list-item");
         if (!s) throw new ElementError({
             componentName: "Tabs",
             identifier: 'List (`<ul class="govuk-tabs__list">`)'
         });
-        if (!n.length) throw new ElementError({
+        if (!i.length) throw new ElementError({
             componentName: "Tabs",
             identifier: 'List items (`<li class="govuk-tabs__list-item">`)'
         });
-        this.$tabList = s, this.$tabListItems = n, this.setupResponsiveChecks()
+        this.$tabList = s, this.$tabListItems = i, this.setupResponsiveChecks()
     }
     setupResponsiveChecks() {
         const t = getBreakpoint("tablet");
@@ -1031,13 +1031,13 @@ function initAll(t) {
             [SkipLink],
             [Tabs]
         ],
-        n = null != (e = t.scope) ? e : document;
+        i = null != (e = t.scope) ? e : document;
     s.forEach((([t, e]) => {
-        n.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((s => {
+        i.querySelectorAll(`[data-module="${t.moduleName}"]`).forEach((s => {
             try {
                 "defaults" in t ? new t(s, e) : new t(s)
-            } catch (n) {
-                console.log(n)
+            } catch (i) {
+                console.log(i)
             }
         }))
     }))

Action run for 2e3a09f

@github-actions GitHub Actions
Copy link

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index dbd13721e..ff1a74a64 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -2302,21 +2302,6 @@
     border-color: #0b0c0c
 }
 
-.govuk-character-count {
-    margin-bottom: 20px
-}
-
-@media (min-width:40.0625em) {
-    .govuk-character-count {
-        margin-bottom: 30px
-    }
-}
-
-.govuk-character-count .govuk-form-group,
-.govuk-character-count .govuk-textarea {
-    margin-bottom: 5px
-}
-
 .govuk-character-count__message {
     font-variant-numeric: tabular-nums;
     margin-top: 0;

Action run for 2e3a09f

@github-actions GitHub Actions
Copy link

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
index 1881a65d9..b9814c635 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-default.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="more-detail">
     Can you provide more detail?
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-info"></textarea>
-</div>
 
-  <div id="more-detail-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="more-detail"
+  name="more-detail" aria-describedby="more-detail-info"></textarea>
+
+    <div id="more-detail-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
index 0486ac780..846deb073 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-rows.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="custom-rows">
     Full address
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
-</div>
 
-  <div id="custom-rows-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="8"
+  id="custom-rows"
+  name="custom" aria-describedby="custom-rows-info"></textarea>
+
+    <div id="custom-rows-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
index 0f8fb36dc..f32c83ba3 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-custom-textarea-description.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="custom-textarea-description">
     Can you provide more detail?
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="custom-textarea-description" name="custom-textarea-description" rows="5" aria-describedby="custom-textarea-description-info"></textarea>
-</div>
 
-  <div id="custom-textarea-description-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="custom-textarea-description"
+  name="custom-textarea-description" aria-describedby="custom-textarea-description-info"></textarea>
+
+    <div id="custom-textarea-description-info" class="govuk-hint govuk-character-count__message">
   Gallwch ddefnyddio hyd at 10 nod
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
index 8a040429c..e7ed24b4e 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value-exceeding-limit.html
@@ -1,19 +1,27 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group govuk-form-group--error">
+
+<div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="exceeding-characters">
     Full address
   </label>
   <p id="exceeding-characters-error" class="govuk-error-message">
   <span class="govuk-visually-hidden">Error:</span> Please do not exceed the maximum allowed limit
   </p>
-  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">221B Baker Street
+
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count govuk-textarea--error"
+  rows="5"
+  id="exceeding-characters"
+  name="exceeding" aria-describedby="exceeding-characters-info exceeding-characters-error">221B Baker Street
 London
 NW1 6XE
 </textarea>
-</div>
 
-  <div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
+    <div id="exceeding-characters-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
index 69633e405..e08f256e9 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-default-value.html
@@ -1,16 +1,24 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="with-default-value">
     Full address
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="with-default-value" name="default-value" rows="5" aria-describedby="with-default-value-info">221B Baker Street
+
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="with-default-value"
+  name="default-value" aria-describedby="with-default-value-info">221B Baker Street
 London
 NW1 6XE
 </textarea>
-</div>
 
-  <div id="with-default-value-info" class="govuk-hint govuk-character-count__message">
+    <div id="with-default-value-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 100 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
index cc624fdfb..64595a895 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-hint.html
@@ -1,16 +1,24 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="with-hint">
     Can you provide more detail?
   </label>
   <div id="with-hint-hint" class="govuk-hint">
     Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
   </div>
-  <textarea class="govuk-textarea govuk-js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
-</div>
 
-  <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="with-hint"
+  name="with-hint" aria-describedby="with-hint-info with-hint-hint"></textarea>
+
+    <div id="with-hint-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
index fff31fc6e..353223e71 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-label-as-page-heading.html
@@ -1,14 +1,22 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <h1 class="govuk-label-wrapper"><label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
       Full address
     </label>
     </h1>
-  <textarea class="govuk-textarea govuk-js-character-count" id="textarea-with-page-heading" name="address" rows="5" aria-describedby="textarea-with-page-heading-info"></textarea>
-</div>
 
-  <div id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="textarea-with-page-heading"
+  name="address" aria-describedby="textarea-with-page-heading-info"></textarea>
+
+    <div id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
index 50216067d..84e0e6337 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-threshold.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="with-threshold">
     Full address
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
-</div>
 
-  <div id="with-threshold-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="with-threshold"
+  name="with-threshold" aria-describedby="with-threshold-info"></textarea>
+
+    <div id="with-threshold-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
index 9fc8f6a07..96bae1b4d 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-translations.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-i18n.characters-under-limit.other="%{count} characters to go" data-i18n.characters-under-limit.one="One character to go" data-i18n.characters-at-limit="Zero characters left" data-i18n.characters-over-limit.other="%{count} characters too many" data-i18n.characters-over-limit.one="One character too many" data-i18n.words-under-limit.other="%{count} words to go" data-i18n.words-under-limit.one="One word to go" data-i18n.words-at-limit="Zero words left" data-i18n.words-over-limit.other="%{count} words too many" data-i18n.words-over-limit.one="One word too many">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="with-translations">
     Full address
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="with-translations" name="with-translations" rows="5" aria-describedby="with-translations-info"></textarea>
-</div>
 
-  <div id="with-translations-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-i18n.characters-under-limit.other="%{count} characters to go" data-i18n.characters-under-limit.one="One character to go" data-i18n.characters-at-limit="Zero characters left" data-i18n.characters-over-limit.other="%{count} characters too many" data-i18n.characters-over-limit.one="One character too many" data-i18n.words-under-limit.other="%{count} words to go" data-i18n.words-under-limit.one="One word to go" data-i18n.words-at-limit="Zero words left" data-i18n.words-over-limit.other="%{count} words too many" data-i18n.words-over-limit.one="One word too many">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="with-translations"
+  name="with-translations" aria-describedby="with-translations-info"></textarea>
+
+    <div id="with-translations-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 characters
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
index e4e78daec..bc15d330c 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/template-with-word-count.html
@@ -1,13 +1,21 @@
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="10">
-  <div class="govuk-form-group">
+
+<div class="govuk-form-group">
   <label class="govuk-label" for="word-count">
     Full address
   </label>
-  <textarea class="govuk-textarea govuk-js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
-</div>
 
-  <div id="word-count-info" class="govuk-hint govuk-character-count__message">
+  <div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="10">
+
+    <textarea
+  class="govuk-textarea govuk-js-character-count"
+  rows="5"
+  id="word-count"
+  name="word-count" aria-describedby="word-count-info"></textarea>
+
+    <div id="word-count-info" class="govuk-hint govuk-character-count__message">
   You can enter up to 10 words
 </div>
 
+  </div>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
index 952f91f85..dda465755 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-complete-question.html
@@ -8,28 +8,40 @@
   </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-day"
+  name="dob-day" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-month"
+  name="dob-month" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-year"
+  name="dob-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
index cd7d470f8..2bc4bfe0d 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-day-and-month.html
@@ -8,20 +8,28 @@
   </div>
   <div class="govuk-date-input" id="bday">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="bday-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-day" name="bday-day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="bday-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="bday-day"
+  name="bday-day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="bday-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="bday-month" name="bday-month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="bday-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="bday-month"
+  name="bday-month" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
index 9fb95e68f..24731f99a 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
@@ -1,28 +1,40 @@
 <div class="govuk-form-group">
   <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="day" type="text" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-day"
+  name="day" inputmode="numeric">
+
     </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="month" type="text" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-month"
+  name="month" inputmode="numeric">
+
     </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="year" type="text" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-year"
+  name="year" inputmode="numeric">
+
     </div>
   </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
index f4d95a6e5..4a23b2866 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-month-and-year.html
@@ -8,20 +8,28 @@
   </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-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="dob-month" type="text" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-month"
+  name="dob-month" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-year"
+  name="dob-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
index f2fc49d74..9ed341248 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-autocomplete-values.html
@@ -8,28 +8,40 @@
   </div>
   <div class="govuk-date-input" id="dob-with-autocomplete-attribute">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-day" name="dob-with-autocomplete-day" type="text" autocomplete="bday-day" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-with-autocomplete-attribute-day"
+  name="dob-with-autocomplete-day" autocomplete="bday-day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-autocomplete-attribute-month" name="dob-with-autocomplete-month" type="text" autocomplete="bday-month" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-with-autocomplete-attribute-month"
+  name="dob-with-autocomplete-month" autocomplete="bday-month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-autocomplete-attribute-year" name="dob-with-autocomplete-year" type="text" autocomplete="bday-year" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-autocomplete-attribute-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4"
+  type="text"  id="dob-with-autocomplete-attribute-year"
+  name="dob-with-autocomplete-year" autocomplete="bday-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
index 952f91f85..dda465755 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-default-items.html
@@ -8,28 +8,40 @@
   </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-day"
+  name="dob-day" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-month"
+  name="dob-month" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-year"
+  name="dob-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
index b74ccfddc..3cf7cb561 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-day-input.html
@@ -11,28 +11,40 @@
   </p>
   <div class="govuk-date-input" id="dob-day-error">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-day-error-day"
+  name="dob-day-error-day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-day-error-month"
+  name="dob-day-error-month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4"
+  type="text"  id="dob-day-error-year"
+  name="dob-day-error-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
index 58f86b52a..78ebac25d 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-month-input.html
@@ -11,28 +11,40 @@
   </p>
   <div class="govuk-date-input" id="dob-month-error">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-month-error-day"
+  name="dob-month-error-day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-month-error-month"
+  name="dob-month-error-month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4"
+  type="text"  id="dob-month-error-year"
+  name="dob-month-error-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
index b482ab5f5..047b231f4 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-error-on-year-input.html
@@ -11,28 +11,40 @@
   </p>
   <div class="govuk-date-input" id="dob-year-error">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-year-error-day"
+  name="dob-year-error-day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-year-error-month"
+  name="dob-year-error-month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"
+  type="text"  id="dob-year-error-year"
+  name="dob-year-error-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
index 376d06cac..a6b9c5423 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-and-hint.html
@@ -11,28 +11,40 @@
   </p>
   <div class="govuk-date-input" id="dob-errors">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-errors-day"
+  name="day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-errors-month"
+  name="month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"
+  type="text"  id="dob-errors-year"
+  name="year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
index 4031ed689..c7fec0473 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-errors-only.html
@@ -8,28 +8,40 @@
   </p>
   <div class="govuk-date-input" id="dob-errors">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-errors-day"
+  name="day" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
+  type="text"  id="dob-errors-month"
+  name="month" inputmode="numeric">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="text" inputmode="numeric">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-errors-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error"
+  type="text"  id="dob-errors-year"
+  name="year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
index 6fa4259d8..643ab2450 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-input-attributes.html
@@ -8,28 +8,40 @@
   </div>
   <div class="govuk-date-input" id="dob-with-input-attributes">
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-day">
-          Day
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-day" name="dob-with-input-attributes-day" type="text" inputmode="numeric" data-example-day="day">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-day">
+  Day
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-with-input-attributes-day"
+  name="dob-with-input-attributes-day" inputmode="numeric" data-example-day="day">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-month">
-          Month
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-with-input-attributes-month" name="dob-with-input-attributes-month" type="text" inputmode="numeric" data-example-month="month">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-month">
+  Month
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-2"
+  type="text"  id="dob-with-input-attributes-month"
+  name="dob-with-input-attributes-month" inputmode="numeric" data-example-month="month">
+
     </div>
     <div class="govuk-date-input__item">
-      <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-year">
-          Year
-        </label>
-      <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-with-input-attributes-year" name="dob-with-input-attributes-year" type="text" inputmode="numeric" data-example-year="year">
-      </div>
+      <label class="govuk-label govuk-date-input__label" for="dob-with-input-attributes-year">
+  Year
+</label>
+
+
+      <input
+  class="govuk-input govuk-date-input__input govuk-input--width-4"
+  type="text"  id="dob-with-input-attributes-year"
+  name="dob-with-input-attributes-year" inputmode="numeric" data-example-year="year">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
index c1d0dafeb..c26ed7c29 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-with-optional-form-group-classes.html
@@ -8,28 +8,40 @@
   </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-day"
+  name="dob-day" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-month"
+  name="dob-month" inputmode="numeric">
+
     </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" inputmode="numeric">
-      </div>
+      <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"
+  type="text"  id="dob-year"
+  name="dob-year" inputmode="numeric">
+
     </div>
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-default.html b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
index 47a4ce680..89ac73d34 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-example">
     National Insurance number
   </label>
-<input class="govuk-input" id="input-example" name="test-name" type="text">
+<input
+  class="govuk-input"
+  type="text"  id="input-example"
+  name="test-name">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
index 7b7dbd37f..9744e0e2b 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-autocomplete-attribute.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-with-autocomplete-attribute">
     Postcode
   </label>
-<input class="govuk-input" id="input-with-autocomplete-attribute" name="postcode" type="text" autocomplete="postal-code">
+<input
+  class="govuk-input"
+  type="text"  id="input-with-autocomplete-attribute"
+  name="postcode" autocomplete="postal-code">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
index d5ed6dacf..b000c21fa 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-error-message.html
@@ -8,5 +8,9 @@
   <p id="input-with-error-message-error" class="govuk-error-message">
   <span class="govuk-visually-hidden">Error:</span> Error message goes here
   </p>
-<input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3" type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
+<input
+  class="govuk-input govuk-input--error"
+  type="text"  id="input-with-error-message"
+  name="test-name-3" aria-describedby="input-with-error-message-hint input-with-error-message-error">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
index 1a70cb5c5..41b5f11b9 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-extra-letter-spacing.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-with-extra-letter-spacing">
     National insurance number
   </label>
-<input class="govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing" id="input-with-extra-letter-spacing" name="" type="text" value="QQ 12 34 56 C">
+<input
+  class="govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing"
+  type="text" value="QQ 12 34 56 C"  id="input-with-extra-letter-spacing"
+  name="">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
index c0df11de1..30be808f7 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-hint-text.html
@@ -5,5 +5,9 @@
   <div id="input-with-hint-text-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input" id="input-with-hint-text" name="test-name-2" type="text" aria-describedby="input-with-hint-text-hint">
+<input
+  class="govuk-input"
+  type="text"  id="input-with-hint-text"
+  name="test-name-2" aria-describedby="input-with-hint-text-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
index b13ad526f..4bf3a6149 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-label-as-page-heading.html
@@ -3,5 +3,9 @@
       National Insurance number
     </label>
     </h1>
-<input class="govuk-input" id="input-with-page-heading" name="test-name" type="text">
+<input
+  class="govuk-input"
+  type="text"  id="input-with-page-heading"
+  name="test-name">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
index 1fd8410dd..e933a5ee1 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-optional-form-group-classes.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-example">
     National Insurance number
   </label>
-<input class="govuk-input" id="input-example" name="test-name" type="text">
+<input
+  class="govuk-input"
+  type="text"  id="input-example"
+  name="test-name">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
index 97035256a..9eb0b30ed 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-pattern-attribute.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-with-pattern-attribute">
     Numbers only
   </label>
-<input class="govuk-input" id="input-with-pattern-attribute" name="numbers-only" type="number" pattern="[0-9]*">
+<input
+  class="govuk-input"
+  type="number"  id="input-with-pattern-attribute"
+  name="numbers-only" pattern="[0-9]*">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
index ee1a4a619..e446418c6 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-long-suffix.html
@@ -3,6 +3,10 @@
     Cost per item, in pounds, per household member
   </label>
 <div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per household member</div>
+<input
+  class="govuk-input"
+  type="text"  id="input-with-prefix-suffix"
+  name="cost">
+<div class="govuk-input__suffix" aria-hidden="true">per household member</div>
 </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
index 8c0dbbc6d..a310fe6ab 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-error.html
@@ -6,6 +6,10 @@
   <span class="govuk-visually-hidden">Error:</span> Error message goes here
   </p>
 <div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input govuk-input--error" id="input-with-prefix-suffix" name="cost" type="text" aria-describedby="input-with-prefix-suffix-error"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
+<input
+  class="govuk-input govuk-input--error"
+  type="text"  id="input-with-prefix-suffix"
+  name="cost" aria-describedby="input-with-prefix-suffix-error">
+<div class="govuk-input__suffix" aria-hidden="true">per item</div>
 </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
index 60ed71d7c..e63c379dd 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix-and-width-modifier.html
@@ -3,6 +3,10 @@
     Cost per item, in pounds
   </label>
 <div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input govuk-input--width-5" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
+<input
+  class="govuk-input govuk-input--width-5"
+  type="text"  id="input-with-prefix-suffix"
+  name="cost">
+<div class="govuk-input__suffix" aria-hidden="true">per item</div>
 </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
index c46d567db..8abc60297 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix-and-suffix.html
@@ -3,6 +3,10 @@
     Cost per item, in pounds
   </label>
 <div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix-suffix" name="cost" type="text"><div class="govuk-input__suffix" aria-hidden="true">per item</div>
+<input
+  class="govuk-input"
+  type="text"  id="input-with-prefix-suffix"
+  name="cost">
+<div class="govuk-input__suffix" aria-hidden="true">per item</div>
 </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
index 9c5cdf1e1..f0891605b 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-prefix.html
@@ -3,5 +3,9 @@
     Amount, in pounds
   </label>
 <div class="govuk-input__wrapper"><div class="govuk-input__prefix" aria-hidden="true">£</div>
-<input class="govuk-input" id="input-with-prefix" name="amount" type="text"></div>
+<input
+  class="govuk-input"
+  type="text"  id="input-with-prefix"
+  name="amount">
+</div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
index 6ffcb89e5..f58f50cbf 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-disabled.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-with-spellcheck-disabled">
     Spellcheck is disabled
   </label>
-<input class="govuk-input" id="input-with-spellcheck-disabled" name="spellcheck" type="text" spellcheck="false">
+<input
+  class="govuk-input"
+  type="text"  id="input-with-spellcheck-disabled"
+  name="spellcheck" spellcheck="false">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
index c87ae3176..c4a0da82a 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-spellcheck-enabled.html
@@ -2,5 +2,9 @@
   <label class="govuk-label" for="input-with-spellcheck-enabled">
     Spellcheck is enabled
   </label>
-<input class="govuk-input" id="input-with-spellcheck-enabled" name="spellcheck" type="text" spellcheck="true">
+<input
+  class="govuk-input"
+  type="text"  id="input-with-spellcheck-enabled"
+  name="spellcheck" spellcheck="true">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
index c011b2880..a2c44b951 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-suffix.html
@@ -2,6 +2,10 @@
   <label class="govuk-label" for="input-with-suffix">
     Weight, in kilograms
   </label>
-<div class="govuk-input__wrapper"><input class="govuk-input" id="input-with-suffix" name="weight" type="text"><div class="govuk-input__suffix" aria-hidden="true">kg</div>
+<div class="govuk-input__wrapper"><input
+  class="govuk-input"
+  type="text"  id="input-with-suffix"
+  name="weight">
+<div class="govuk-input__suffix" aria-hidden="true">kg</div>
 </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
index b293a9775..5bb3030e7 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-10-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-10-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10" type="text" aria-describedby="input-width-10-hint">
+<input
+  class="govuk-input govuk-input--width-10"
+  type="text"  id="input-width-10"
+  name="test-width-10" aria-describedby="input-width-10-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
index f09349d2f..89dd3d3cb 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-2-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-2-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2" type="text" aria-describedby="input-width-2-hint">
+<input
+  class="govuk-input govuk-input--width-2"
+  type="text"  id="input-width-2"
+  name="test-width-2" aria-describedby="input-width-2-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
index e617374ed..b3b0aa8e6 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-20-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-20-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20" type="text" aria-describedby="input-width-20-hint">
+<input
+  class="govuk-input govuk-input--width-20"
+  type="text"  id="input-width-20"
+  name="test-width-20" aria-describedby="input-width-20-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
index 5d926a3c6..b7f031309 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-3-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-3-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3" type="text" aria-describedby="input-width-3-hint">
+<input
+  class="govuk-input govuk-input--width-3"
+  type="text"  id="input-width-3"
+  name="test-width-3" aria-describedby="input-width-3-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
index d4628c077..4e5faf74f 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-30-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-30-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30" type="text" aria-describedby="input-width-30-hint">
+<input
+  class="govuk-input govuk-input--width-30"
+  type="text"  id="input-width-30"
+  name="test-width-30" aria-describedby="input-width-30-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
index 8eac25f93..dce2a147b 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-4-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-4-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4" type="text" aria-describedby="input-width-4-hint">
+<input
+  class="govuk-input govuk-input--width-4"
+  type="text"  id="input-width-4"
+  name="test-width-4" aria-describedby="input-width-4-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
index 6bdf63d20..9dec900d9 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-with-width-5-class.html
@@ -5,5 +5,9 @@
   <div id="input-width-5-hint" class="govuk-hint">
     It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
   </div>
-<input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5" type="text" aria-describedby="input-width-5-hint">
+<input
+  class="govuk-input govuk-input--width-5"
+  type="text"  id="input-width-5"
+  name="test-width-5" aria-describedby="input-width-5-hint">
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
index aa93a46a3..43ba0f185 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
@@ -8,13 +8,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input">
 
     <input
-      class="govuk-input govuk-password-input__input"
-      id="password-input"
-      name="password"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="current-password">
+  class="govuk-input govuk-password-input__input"
+  type="password"  id="password-input"
+  name="password" autocapitalize="off" autocomplete="current-password">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-error-message.html
index 0bdb7a8c2..ea2125646 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-error-message.html
@@ -14,13 +14,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input">
 
     <input
-      class="govuk-input govuk-password-input__input govuk-input--error"
-      id="password-input-with-error-message"
-      name="test-name-3"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="current-password" aria-describedby="password-input-with-error-message-hint password-input-with-error-message-error">
+  class="govuk-input govuk-password-input__input govuk-input--error"
+  type="password"  id="password-input-with-error-message"
+  name="test-name-3" autocapitalize="off" autocomplete="current-password" aria-describedby="password-input-with-error-message-hint password-input-with-error-message-error">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-hint-text.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-hint-text.html
index 8af8c2838..163f51eaf 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-hint-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-hint-text.html
@@ -11,13 +11,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input">
 
     <input
-      class="govuk-input govuk-password-input__input"
-      id="password-input-with-hint-text"
-      name="test-name-2"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="current-password" aria-describedby="password-input-with-hint-text-hint">
+  class="govuk-input govuk-password-input__input"
+  type="password"  id="password-input-with-hint-text"
+  name="test-name-2" autocapitalize="off" autocomplete="current-password" aria-describedby="password-input-with-hint-text-hint">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-label-as-page-heading.html
index 11881838f..9efcbbc62 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-label-as-page-heading.html
@@ -9,13 +9,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input">
 
     <input
-      class="govuk-input govuk-password-input__input"
-      id="password-input-with-page-heading"
-      name="test-name"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="current-password">
+  class="govuk-input govuk-password-input__input"
+  type="password"  id="password-input-with-page-heading"
+  name="test-name" autocapitalize="off" autocomplete="current-password">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-new-password-autocomplete.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-new-password-autocomplete.html
index c4baf37da..1842756a5 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-new-password-autocomplete.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-new-password-autocomplete.html
@@ -8,13 +8,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input">
 
     <input
-      class="govuk-input govuk-password-input__input"
-      id="password-input-new-password"
-      name="password"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="new-password">
+  class="govuk-input govuk-password-input__input"
+  type="password"  id="password-input-new-password"
+  name="password" autocapitalize="off" autocomplete="new-password">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-translations.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-translations.html
index ccb591f7f..d6f564eff 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-with-translations.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-with-translations.html
@@ -8,13 +8,10 @@
   <div class="govuk-password-input" data-module="govuk-password-input" data-i18n.show-password="Datguddia" data-i18n.hide-password="Cuddio" data-i18n.show-password-aria-label="Datgelu cyfrinair" data-i18n.hide-password-aria-label="Cuddio cyfrinair" data-i18n.password-shown-announcement="Mae eich cyfrinair yn weladwy." data-i18n.password-hidden-announcement="Mae eich cyfrinair wedi&#39;i guddio.">
 
     <input
-      class="govuk-input govuk-password-input__input"
-      id="password-translated"
-      name="password-translated"
-      type="password"
-      spellcheck="false"
-      autocapitalize="off"
-      autocomplete="current-password">
+  class="govuk-input govuk-password-input__input"
+  type="password"  id="password-translated"
+  name="password-translated" autocapitalize="off" autocomplete="current-password">
+
 
   </div>
 
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
index 3b27ac027..b8ab685a6 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
@@ -2,5 +2,10 @@
   <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>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="more-detail"
+  name="more-detail"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
index 4b8839869..36d44aeb7 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
@@ -2,5 +2,10 @@
   <label class="govuk-label" for="textarea-with-autocomplete-attribute">
     Full address
   </label>
-  <textarea class="govuk-textarea" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="textarea-with-autocomplete-attribute"
+  name="address" autocomplete="street-address"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
index 747b7e241..e077bd5ff 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
@@ -2,5 +2,10 @@
   <label class="govuk-label" for="full-address">
     Full address
   </label>
-  <textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="8"
+  id="full-address"
+  name="address"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
index 8f84d7945..2f5301789 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
@@ -2,8 +2,13 @@
   <label class="govuk-label" for="full-address">
     Full address
   </label>
-  <textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="full-address"
+  name="address">221B Baker Street
 London
 NW1 6XE
 </textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
index 5b819b972..5e96c62ee 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
@@ -5,5 +5,10 @@
   <p id="no-ni-reason-error" class="govuk-error-message">
   <span class="govuk-visually-hidden">Error:</span> You must provide an explanation
   </p>
-  <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
+  <textarea
+  class="govuk-textarea govuk-textarea--error"
+  rows="5"
+  id="no-ni-reason"
+  name="no-ni-reason" aria-describedby="no-ni-reason-error"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
index 764f12181..92fa100cd 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
@@ -5,5 +5,10 @@
   <div id="more-detail-hint" class="govuk-hint">
     Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
   </div>
-  <textarea class="govuk-textarea" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="more-detail"
+  name="more-detail" aria-describedby="more-detail-hint"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
index 3040c1f59..ef80ab06d 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
@@ -3,5 +3,10 @@
       Full address
     </label>
     </h1>
-  <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="textarea-with-page-heading"
+  name="address"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
index 9d2b81d0a..8bb948597 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
@@ -2,5 +2,10 @@
   <label class="govuk-label" for="textarea-with-page-heading">
     Full address
   </label>
-  <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="textarea-with-page-heading"
+  name="address"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
index 874294dae..29752545f 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
@@ -2,5 +2,10 @@
   <label class="govuk-label" for="textarea-with-spellcheck-disabled">
     Spellcheck is disabled
   </label>
-  <textarea class="govuk-textarea" id="textarea-with-spellcheck-disabled" name="spellcheck" rows="5" spellcheck="false"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="textarea-with-spellcheck-disabled"
+  name="spellcheck" spellcheck="false"></textarea>
+
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
index 0afbe53c5..a6c51a709 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
@@ -2,5 +2,10 @@
   <label class="govuk-label" for="textarea-with-spellcheck-enabled">
     Spellcheck is enabled
   </label>
-  <textarea class="govuk-textarea" id="textarea-with-spellcheck-enabled" name="spellcheck" rows="5" spellcheck="true"></textarea>
+  <textarea
+  class="govuk-textarea"
+  rows="5"
+  id="textarea-with-spellcheck-enabled"
+  name="spellcheck" spellcheck="true"></textarea>
+
 </div>

Action run for 2e3a09f

@github-actions GitHub Actions
Copy link

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.js b/packages/govuk-frontend/dist/govuk/all.bundle.js
index 57c0d02b6..9f5c22c16 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.js
@@ -883,7 +883,6 @@
           count: this.maxLength
         });
       }
-      this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
       const $screenReaderCountMessage = document.createElement('div');
       $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
       $screenReaderCountMessage.setAttribute('aria-live', 'polite');
diff --git a/packages/govuk-frontend/dist/govuk/all.bundle.mjs b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
index d58b3a451..c041fbbfa 100644
--- a/packages/govuk-frontend/dist/govuk/all.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/all.bundle.mjs
@@ -877,7 +877,6 @@ class CharacterCount extends GOVUKFrontendComponent {
         count: this.maxLength
       });
     }
-    this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
     const $screenReaderCountMessage = document.createElement('div');
     $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
     $screenReaderCountMessage.setAttribute('aria-live', 'polite');
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
index 858b7735b..7a83766c4 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/_index.scss
@@ -4,15 +4,6 @@
 @import "../textarea/index";
 
 @include govuk-exports("govuk/component/character-count") {
-  .govuk-character-count {
-    @include govuk-responsive-margin(6, "bottom");
-
-    .govuk-form-group,
-    .govuk-textarea {
-      margin-bottom: govuk-spacing(1);
-    }
-  }
-
   .govuk-character-count__message {
     @include govuk-font-tabular-numbers;
     margin-top: 0;
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
index 482acde8d..6e693b4ac 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.js
@@ -431,7 +431,6 @@
           count: this.maxLength
         });
       }
-      this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
       const $screenReaderCountMessage = document.createElement('div');
       $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
       $screenReaderCountMessage.setAttribute('aria-live', 'polite');
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
index 8fcb8512d..2a613e293 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.bundle.mjs
@@ -425,7 +425,6 @@ class CharacterCount extends GOVUKFrontendComponent {
         count: this.maxLength
       });
     }
-    this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
     const $screenReaderCountMessage = document.createElement('div');
     $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
     $screenReaderCountMessage.setAttribute('aria-live', 'polite');
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.mjs b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.mjs
index 953feb6f5..9d264a495 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/character-count.mjs
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/character-count.mjs
@@ -84,7 +84,6 @@ class CharacterCount extends GOVUKFrontendComponent {
         count: this.maxLength
       });
     }
-    this.$textarea.insertAdjacentElement('afterend', $textareaDescription);
     const $screenReaderCountMessage = document.createElement('div');
     $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
     $screenReaderCountMessage.setAttribute('aria-live', 'polite');
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
index 3d3f0a8d9..7120576e7 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
@@ -14,7 +14,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n  <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"more-detail\"\n  name=\"more-detail\" aria-describedby=\"more-detail-info\"></textarea>\n\n    <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with custom textarea description",
@@ -30,7 +30,7 @@
             "hidden": false,
             "description": "with textarea description translated into Welsh.",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-textarea-description\" name=\"custom-textarea-description\" rows=\"5\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n</div>\n\n  <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-textarea-description\">\n    Can you provide more detail?\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"custom-textarea-description\"\n  name=\"custom-textarea-description\" aria-describedby=\"custom-textarea-description-info\"></textarea>\n\n    <div id=\"custom-textarea-description-info\" class=\"govuk-hint govuk-character-count__message\">\n  Gallwch ddefnyddio hyd at 10 nod\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with hint",
@@ -48,7 +48,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <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>\n</div>\n\n  <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint\">\n    Can you provide more detail?\n  </label>\n  <div id=\"with-hint-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-hint\"\n  name=\"with-hint\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n\n    <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with default value",
@@ -64,7 +64,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 100 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-default-value\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-default-value\"\n  name=\"default-value\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n\n    <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 100 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with default value exceeding limit",
@@ -83,7 +83,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n  <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"exceeding-characters\">\n    Full address\n  </label>\n  <p id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n  </p>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count govuk-textarea--error\"\n  rows=\"5\"\n  id=\"exceeding-characters\"\n  name=\"exceeding\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n\n    <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with custom rows",
@@ -99,7 +99,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n  <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"custom-rows\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"8\"\n  id=\"custom-rows\"\n  name=\"custom\" aria-describedby=\"custom-rows-info\"></textarea>\n\n    <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with label as page heading",
@@ -116,7 +116,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n  <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"textarea-with-page-heading\"\n  name=\"address\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n\n    <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with word count",
@@ -131,7 +131,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n  <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 words\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"word-count\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"word-count\"\n  name=\"word-count\" aria-describedby=\"word-count-info\"></textarea>\n\n    <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 words\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with threshold",
@@ -147,7 +147,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n  <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-threshold\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-threshold\"\n  name=\"with-threshold\" aria-describedby=\"with-threshold-info\"></textarea>\n\n    <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with translations",
@@ -180,7 +180,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-translations\" name=\"with-translations\" rows=\"5\" aria-describedby=\"with-translations-info\"></textarea>\n</div>\n\n  <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-translations\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-i18n.characters-under-limit.other=\"%{count} characters to go\" data-i18n.characters-under-limit.one=\"One character to go\" data-i18n.characters-at-limit=\"Zero characters left\" data-i18n.characters-over-limit.other=\"%{count} characters too many\" data-i18n.characters-over-limit.one=\"One character too many\" data-i18n.words-under-limit.other=\"%{count} words to go\" data-i18n.words-under-limit.one=\"One word to go\" data-i18n.words-at-limit=\"Zero words left\" data-i18n.words-over-limit.other=\"%{count} words too many\" data-i18n.words-over-limit.one=\"One word too many\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-translations\"\n  name=\"with-translations\" aria-describedby=\"with-translations-info\"></textarea>\n\n    <div id=\"with-translations-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "classes",
@@ -196,7 +196,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n  <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\"\n  rows=\"5\"\n  id=\"with-classes\"\n  name=\"with-classes\" aria-describedby=\"with-classes-info\"></textarea>\n\n    <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "attributes",
@@ -214,7 +214,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n  <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-attributes\"\n  name=\"with-attributes\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n\n    <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "formGroup with classes",
@@ -232,7 +232,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n  <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group app-character-count--custom-modifier\">\n  <label class=\"govuk-label\" for=\"with-formgroup\">\n    With formgroup\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-formgroup\"\n  name=\"with-formgroup\" aria-describedby=\"with-formgroup-info\"></textarea>\n\n    <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "custom classes on countMessage",
@@ -250,7 +250,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n  <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n    With custom countMessage class\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-custom-countmessage-class\"\n  name=\"with-custom-countmessage-class\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n\n    <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "spellcheck enabled",
@@ -266,7 +266,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-spellcheck\">\n    With spellcheck\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"with-spellcheck\"\n  name=\"with-spellcheck\" aria-describedby=\"with-spellcheck-info\" spellcheck=\"true\"></textarea>\n\n    <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "spellcheck disabled",
@@ -282,7 +282,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n  <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"without-spellcheck\">\n    Without spellcheck\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"without-spellcheck\"\n  name=\"without-spellcheck\" aria-describedby=\"without-spellcheck-info\" spellcheck=\"false\"></textarea>\n\n    <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "custom classes with error message",
@@ -301,7 +301,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n  <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-custom-error-class\">\n    With custom error class\n  </label>\n  <p id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier govuk-textarea--error\"\n  rows=\"5\"\n  id=\"with-custom-error-class\"\n  name=\"with-custom-error-class\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n\n    <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with id starting with number",
@@ -316,7 +316,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"1_more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"1_more-detail-info\"></textarea>\n</div>\n\n  <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"1_more-detail\">\n    Can you provide more detail?\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"1_more-detail\"\n  name=\"more-detail\" aria-describedby=\"1_more-detail-info\"></textarea>\n\n    <div id=\"1_more-detail-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with id with special characters",
@@ -331,7 +331,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"user1.profile[address]\" name=\"address\" rows=\"5\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n</div>\n\n  <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"user1.profile[address]\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"user1.profile[address]\"\n  name=\"address\" aria-describedby=\"user1.profile[address]-info\"></textarea>\n\n    <div id=\"user1.profile[address]-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "with textarea maxlength attribute",
@@ -349,7 +349,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"maxlength-should-be-removed\" name=\"address\" rows=\"5\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n</div>\n\n  <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"maxlength-should-be-removed\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"maxlength-should-be-removed\"\n  name=\"address\" aria-describedby=\"maxlength-should-be-removed-info\" maxlength=\"10\"></textarea>\n\n    <div id=\"maxlength-should-be-removed-info\" class=\"govuk-hint govuk-character-count__message\">\n  You can enter up to 10 characters\n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "to configure in JavaScript",
@@ -363,7 +363,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"to-configure-in-javascript\" name=\"address\" rows=\"5\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n</div>\n\n  <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"to-configure-in-javascript\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"to-configure-in-javascript\"\n  name=\"address\" aria-describedby=\"to-configure-in-javascript-info\"></textarea>\n\n    <div id=\"to-configure-in-javascript-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "when neither maxlength nor maxwords are set",
@@ -378,7 +378,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-i18n.textarea-description.other=\"No more than %{count} characters\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"no-maximum\"\n  name=\"no-maximum\" aria-describedby=\"no-maximum-info\"></textarea>\n\n    <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n  </div>\n\n</div>"
         },
         {
             "name": "when neither maxlength/maxwords nor textarea description are set",
@@ -392,7 +392,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n  <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"no-maximum\" name=\"no-maximum\" rows=\"5\" aria-describedby=\"no-maximum-info\"></textarea>\n</div>\n\n  <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"no-maximum\">\n    Full address\n  </label>\n\n  <div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n\n    <textarea\n  class=\"govuk-textarea govuk-js-character-count\"\n  rows=\"5\"\n  id=\"no-maximum\"\n  name=\"no-maximum\" aria-describedby=\"no-maximum-info\"></textarea>\n\n    <div id=\"no-maximum-info\" class=\"govuk-hint govuk-character-count__message\">\n  \n</div>\n\n  </div>\n\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
index e5c3673bd..540f458df 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
@@ -9,7 +9,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "complete question",
@@ -42,7 +42,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-day\"\n  name=\"dob-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month\"\n  name=\"dob-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-year\"\n  name=\"dob-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "day and month",
@@ -71,7 +71,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"bday-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your birthday?\n  </legend>\n  <div id=\"bday-hint\" class=\"govuk-hint\">\n    For example, 5 12\n  </div>\n  <div class=\"govuk-date-input\" id=\"bday\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"bday-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-day\" name=\"bday-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"bday-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"bday-month\" name=\"bday-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"bday-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your birthday?\n  </legend>\n  <div id=\"bday-hint\" class=\"govuk-hint\">\n    For example, 5 12\n  </div>\n  <div class=\"govuk-date-input\" id=\"bday\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"bday-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"bday-day\"\n  name=\"bday-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"bday-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"bday-month\"\n  name=\"bday-month\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "month and year",
@@ -100,7 +100,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    When did you move to this property?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    When did you move to this property?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month\"\n  name=\"dob-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-year\"\n  name=\"dob-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with errors only",
@@ -132,7 +132,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with errors and hint",
@@ -167,7 +167,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-errors-hint dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\"\n  type=\"text\"  id=\"dob-errors-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with error on day input",
@@ -203,7 +203,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-day-error\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-day-error-day\" name=\"dob-day-error-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day-error-month\" name=\"dob-day-error-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-day-error-year\" name=\"dob-day-error-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-day-error-hint dob-day-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-day-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-day-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-day-error\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-day-error-day\"\n  name=\"dob-day-error-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-day-error-month\"\n  name=\"dob-day-error-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day-error-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-day-error-year\"\n  name=\"dob-day-error-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with error on month input",
@@ -239,7 +239,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-month-error\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month-error-day\" name=\"dob-month-error-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\" id=\"dob-month-error-month\" name=\"dob-month-error-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-month-error-year\" name=\"dob-month-error-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-month-error-hint dob-month-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-month-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-month-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-month-error\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month-error-day\"\n  name=\"dob-month-error-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error\"\n  type=\"text\"  id=\"dob-month-error-month\"\n  name=\"dob-month-error-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month-error-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-month-error-year\"\n  name=\"dob-month-error-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with error on year input",
@@ -275,7 +275,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-year-error\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-day\" name=\"dob-year-error-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-year-error-month\" name=\"dob-year-error-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\" id=\"dob-year-error-year\" name=\"dob-year-error-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-year-error-hint dob-year-error-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-year-error-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <p id=\"dob-year-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-year-error\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-year-error-day\"\n  name=\"dob-year-error-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-year-error-month\"\n  name=\"dob-year-error-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year-error-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error\"\n  type=\"text\"  id=\"dob-year-error-year\"\n  name=\"dob-year-error-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with default items",
@@ -294,7 +294,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-day\"\n  name=\"dob-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month\"\n  name=\"dob-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-year\"\n  name=\"dob-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with optional form-group classes",
@@ -316,7 +316,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"dob-day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"dob-month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"dob-year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-day\"\n  name=\"dob-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-month\"\n  name=\"dob-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-year\"\n  name=\"dob-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with autocomplete values",
@@ -352,7 +352,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-day\" name=\"dob-with-autocomplete-day\" type=\"text\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-autocomplete-attribute-month\" name=\"dob-with-autocomplete-month\" type=\"text\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-autocomplete-attribute-year\" name=\"dob-with-autocomplete-year\" type=\"text\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-autocomplete-attribute-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-with-autocomplete-attribute-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-with-autocomplete-attribute\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-with-autocomplete-attribute-day\"\n  name=\"dob-with-autocomplete-day\" autocomplete=\"bday-day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-with-autocomplete-attribute-month\"\n  name=\"dob-with-autocomplete-month\" autocomplete=\"bday-month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-autocomplete-attribute-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-with-autocomplete-attribute-year\"\n  name=\"dob-with-autocomplete-year\" autocomplete=\"bday-year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with input attributes",
@@ -394,7 +394,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-day\" name=\"dob-with-input-attributes-day\" type=\"text\" inputmode=\"numeric\" data-example-day=\"day\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-with-input-attributes-month\" name=\"dob-with-input-attributes-month\" type=\"text\" inputmode=\"numeric\" data-example-month=\"month\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-with-input-attributes-year\" name=\"dob-with-input-attributes-year\" type=\"text\" inputmode=\"numeric\" data-example-year=\"year\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"dob-with-input-attributes-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-with-input-attributes-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-with-input-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-with-input-attributes-day\"\n  name=\"dob-with-input-attributes-day\" inputmode=\"numeric\" data-example-day=\"day\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-with-input-attributes-month\"\n  name=\"dob-with-input-attributes-month\" inputmode=\"numeric\" data-example-month=\"month\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-with-input-attributes-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-with-input-attributes-year\"\n  name=\"dob-with-input-attributes-year\" inputmode=\"numeric\" data-example-year=\"year\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "classes",
@@ -405,7 +405,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input app-date-input--custom-modifier\" id=\"with-classes\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-classes-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-classes-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-classes-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"with-classes-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -418,7 +418,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-attributes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-attributes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" data-attribute=\"my data value\" id=\"with-attributes\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-attributes-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-attributes-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-attributes-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"with-attributes-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with empty items",
@@ -429,7 +429,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-empty-items-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-empty-items-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-empty-items\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-empty-items-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-empty-items-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-empty-items-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"with-empty-items-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "custom pattern",
@@ -445,7 +445,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-pattern-day\" name=\"day\" type=\"text\" pattern=\"[0-8]*\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-pattern\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-pattern-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"with-custom-pattern-day\"\n  name=\"day\" inputmode=\"numeric\" pattern=\"[0-8]*\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "custom inputmode",
@@ -462,7 +462,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-custom-inputmode-day\" name=\"day\" type=\"text\" pattern=\"[0-9X]*\" inputmode=\"text\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-custom-inputmode\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-custom-inputmode-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"with-custom-inputmode-day\"\n  name=\"day\" inputmode=\"text\" pattern=\"[0-9X]*\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with nested name",
@@ -483,7 +483,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n          Day[dd]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-day[dd]\" name=\"day[dd]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n          Month[mm]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-month[mm]\" name=\"month[mm]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n          Year[yyyy]\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"with-nested-name-year[yyyy]\" name=\"year[yyyy]\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-nested-name\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-day[dd]\">\n  Day[dd]\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"with-nested-name-day[dd]\"\n  name=\"day[dd]\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-month[mm]\">\n  Month[mm]\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"with-nested-name-month[mm]\"\n  name=\"month[mm]\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-nested-name-year[yyyy]\">\n  Year[yyyy]\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"with-nested-name-year[yyyy]\"\n  name=\"year[yyyy]\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with id on items",
@@ -507,7 +507,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-id\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "suffixed id",
@@ -528,7 +528,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"my-date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"my-date-input\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"my-date-input-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"my-date-input-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"my-date-input-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"my-date-input-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with values",
@@ -553,7 +553,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"year\" name=\"year\" type=\"text\" value=\"2018\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-values\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\" value=\"2018\"  id=\"year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with hint and describedBy",
@@ -572,7 +572,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-hint\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <div id=\"dob-errors-hint\" class=\"govuk-hint\">\n    For example, 31 3 1980\n  </div>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-errors-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-errors-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-errors-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "with error and describedBy",
@@ -591,7 +591,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-errors-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-errors-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n<fieldset class=\"govuk-fieldset\" role=\"group\" aria-describedby=\"test-target-element dob-errors-error\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your date of birth?\n  </legend>\n  <p id=\"dob-errors-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n  <div class=\"govuk-date-input\" id=\"dob-errors\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-errors-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"dob-errors-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"dob-errors-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"dob-errors-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "fieldset html",
@@ -606,7 +606,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your <b>date of birth</b>?\n  </legend>\n  <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"with-fieldset-html-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"with-fieldset-html-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n\n</fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" role=\"group\">\n  <legend class=\"govuk-fieldset__legend\">\n    What is your <b>date of birth</b>?\n  </legend>\n  <div class=\"govuk-date-input\" id=\"with-fieldset-html\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-fieldset-html-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n  type=\"text\"  id=\"with-fieldset-html-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-fieldset-html-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n  type=\"text\"  id=\"with-fieldset-html-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n\n</fieldset>\n</div>"
         },
         {
             "name": "items with classes",
@@ -630,7 +630,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__day\" id=\"with-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__month\" id=\"with-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input app-date-input__year\" id=\"with-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"with-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input app-date-input__day\"\n  type=\"text\"  id=\"with-item-classes-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input app-date-input__month\"\n  type=\"text\"  id=\"with-item-classes-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"with-item-classes-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input app-date-input__year\"\n  type=\"text\"  id=\"with-item-classes-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "items without classes",
@@ -651,7 +651,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n          Day\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n          Month\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n          Year\n        </label>\n      <input class=\"govuk-input govuk-date-input__input \" id=\"without-item-classes-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"without-item-classes\">\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-day\">\n  Day\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"without-item-classes-day\"\n  name=\"day\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-month\">\n  Month\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"without-item-classes-month\"\n  name=\"month\" inputmode=\"numeric\">\n\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <label class=\"govuk-label govuk-date-input__label\" for=\"without-item-classes-year\">\n  Year\n</label>\n\n\n      <input\n  class=\"govuk-input govuk-date-input__input \"\n  type=\"text\"  id=\"without-item-classes-year\"\n  name=\"year\" inputmode=\"numeric\">\n\n    </div>\n  </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index e07333fdb..7ce9ea4d5 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -13,7 +13,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-example\"\n  name=\"test-name\">\n\n</div>"
         },
         {
             "name": "with hint text",
@@ -30,7 +30,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"input-with-hint-text\" name=\"test-name-2\" type=\"text\" aria-describedby=\"input-with-hint-text-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-hint-text\">\n    National insurance number\n  </label>\n  <div id=\"input-with-hint-text-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-hint-text\"\n  name=\"test-name-2\" aria-describedby=\"input-with-hint-text-hint\">\n\n</div>"
         },
         {
             "name": "with error message",
@@ -50,7 +50,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-error-message\" name=\"test-name-3\" type=\"text\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-error-message\">\n    National Insurance number\n  </label>\n  <div id=\"input-with-error-message-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <p id=\"input-with-error-message-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<input\n  class=\"govuk-input govuk-input--error\"\n  type=\"text\"  id=\"input-with-error-message\"\n  name=\"test-name-3\" aria-describedby=\"input-with-error-message-hint input-with-error-message-error\">\n\n</div>"
         },
         {
             "name": "with width-2 class",
@@ -68,7 +68,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-2\" id=\"input-width-2\" name=\"test-width-2\" type=\"text\" aria-describedby=\"input-width-2-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-2\">\n    National insurance number\n  </label>\n  <div id=\"input-width-2-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-2\"\n  type=\"text\"  id=\"input-width-2\"\n  name=\"test-width-2\" aria-describedby=\"input-width-2-hint\">\n\n</div>"
         },
         {
             "name": "with width-3 class",
@@ -86,7 +86,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-3\" id=\"input-width-3\" name=\"test-width-3\" type=\"text\" aria-describedby=\"input-width-3-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-3\">\n    National insurance number\n  </label>\n  <div id=\"input-width-3-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-3\"\n  type=\"text\"  id=\"input-width-3\"\n  name=\"test-width-3\" aria-describedby=\"input-width-3-hint\">\n\n</div>"
         },
         {
             "name": "with width-4 class",
@@ -104,7 +104,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-4\" id=\"input-width-4\" name=\"test-width-4\" type=\"text\" aria-describedby=\"input-width-4-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-4\">\n    National insurance number\n  </label>\n  <div id=\"input-width-4-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-4\"\n  type=\"text\"  id=\"input-width-4\"\n  name=\"test-width-4\" aria-describedby=\"input-width-4-hint\">\n\n</div>"
         },
         {
             "name": "with width-5 class",
@@ -122,7 +122,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-width-5\" name=\"test-width-5\" type=\"text\" aria-describedby=\"input-width-5-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-5\">\n    National insurance number\n  </label>\n  <div id=\"input-width-5-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-5\"\n  type=\"text\"  id=\"input-width-5\"\n  name=\"test-width-5\" aria-describedby=\"input-width-5-hint\">\n\n</div>"
         },
         {
             "name": "with width-10 class",
@@ -140,7 +140,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-10\" id=\"input-width-10\" name=\"test-width-10\" type=\"text\" aria-describedby=\"input-width-10-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-10\">\n    National insurance number\n  </label>\n  <div id=\"input-width-10-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-10\"\n  type=\"text\"  id=\"input-width-10\"\n  name=\"test-width-10\" aria-describedby=\"input-width-10-hint\">\n\n</div>"
         },
         {
             "name": "with width-20 class",
@@ -158,7 +158,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-20\" id=\"input-width-20\" name=\"test-width-20\" type=\"text\" aria-describedby=\"input-width-20-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-20\">\n    National insurance number\n  </label>\n  <div id=\"input-width-20-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-20\"\n  type=\"text\"  id=\"input-width-20\"\n  name=\"test-width-20\" aria-describedby=\"input-width-20-hint\">\n\n</div>"
         },
         {
             "name": "with width-30 class",
@@ -176,7 +176,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input govuk-input--width-30\" id=\"input-width-30\" name=\"test-width-30\" type=\"text\" aria-describedby=\"input-width-30-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-width-30\">\n    National insurance number\n  </label>\n  <div id=\"input-width-30-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input govuk-input--width-30\"\n  type=\"text\"  id=\"input-width-30\"\n  name=\"test-width-30\" aria-describedby=\"input-width-30-hint\">\n\n</div>"
         },
         {
             "name": "with label as page heading",
@@ -192,7 +192,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n    </h1>\n<input class=\"govuk-input\" id=\"input-with-page-heading\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"input-with-page-heading\">\n      National Insurance number\n    </label>\n    </h1>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-page-heading\"\n  name=\"test-name\">\n\n</div>"
         },
         {
             "name": "with optional form-group classes",
@@ -209,7 +209,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"input-example\">\n    National Insurance number\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-example\"\n  name=\"test-name\">\n\n</div>"
         },
         {
             "name": "with autocomplete attribute",
@@ -224,7 +224,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n<input class=\"govuk-input\" id=\"input-with-autocomplete-attribute\" name=\"postcode\" type=\"text\" autocomplete=\"postal-code\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-autocomplete-attribute\">\n    Postcode\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-autocomplete-attribute\"\n  name=\"postcode\" autocomplete=\"postal-code\">\n\n</div>"
         },
         {
             "name": "with pattern attribute",
@@ -240,7 +240,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n<input class=\"govuk-input\" id=\"input-with-pattern-attribute\" name=\"numbers-only\" type=\"number\" pattern=\"[0-9]*\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-pattern-attribute\">\n    Numbers only\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"number\"  id=\"input-with-pattern-attribute\"\n  name=\"numbers-only\" pattern=\"[0-9]*\">\n\n</div>"
         },
         {
             "name": "with spellcheck enabled",
@@ -256,7 +256,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-enabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"true\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-spellcheck-enabled\"\n  name=\"spellcheck\" spellcheck=\"true\">\n\n</div>"
         },
         {
             "name": "with spellcheck disabled",
@@ -272,7 +272,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n<input class=\"govuk-input\" id=\"input-with-spellcheck-disabled\" name=\"spellcheck\" type=\"text\" spellcheck=\"false\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-spellcheck-disabled\"\n  name=\"spellcheck\" spellcheck=\"false\">\n\n</div>"
         },
         {
             "name": "with prefix",
@@ -289,7 +289,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix\"\n  name=\"amount\">\n</div>\n</div>"
         },
         {
             "name": "with suffix",
@@ -306,7 +306,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-suffix\"\n  name=\"weight\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">kg</div>\n</div>\n</div>"
         },
         {
             "name": "with prefix and suffix",
@@ -326,7 +326,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix-suffix\"\n  name=\"cost\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
         {
             "name": "with prefix and long suffix",
@@ -346,7 +346,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds, per household member\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix-suffix\"\n  name=\"cost\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">per household member</div>\n</div>\n</div>"
         },
         {
             "name": "with prefix and suffix and error",
@@ -369,7 +369,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--error\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\" aria-describedby=\"input-with-prefix-suffix-error\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n  <p id=\"input-with-prefix-suffix-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input govuk-input--error\"\n  type=\"text\"  id=\"input-with-prefix-suffix\"\n  name=\"cost\" aria-describedby=\"input-with-prefix-suffix-error\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
         {
             "name": "with prefix and suffix and width modifier",
@@ -390,7 +390,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input govuk-input--width-5\" id=\"input-with-prefix-suffix\" name=\"cost\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-suffix\">\n    Cost per item, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input govuk-input--width-5\"\n  type=\"text\"  id=\"input-with-prefix-suffix\"\n  name=\"cost\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">per item</div>\n</div>\n</div>"
         },
         {
             "name": "with extra letter spacing",
@@ -405,7 +405,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n<input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n<input\n  class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\"\n  type=\"text\" value=\"QQ 12 34 56 C\"  id=\"input-with-extra-letter-spacing\"\n  name=\"\">\n\n</div>"
         },
         {
             "name": "classes",
@@ -420,7 +420,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n<input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n<input\n  class=\"govuk-input app-input--custom-modifier\"\n  type=\"text\"  id=\"with-classes\"\n  name=\"with-classes\">\n\n</div>"
         },
         {
             "name": "custom type",
@@ -435,7 +435,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n<input class=\"govuk-input\" id=\"with-custom-type\" name=\"with-custom-type\" type=\"number\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-custom-type\">\n    With custom type\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"number\"  id=\"with-custom-type\"\n  name=\"with-custom-type\">\n\n</div>"
         },
         {
             "name": "value",
@@ -450,7 +450,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n<input class=\"govuk-input\" id=\"with-value\" name=\"with-value\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-value\">\n    With value\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\" value=\"QQ 12 34 56 C\"  id=\"with-value\"\n  name=\"with-value\">\n\n</div>"
         },
         {
             "name": "with describedBy",
@@ -465,7 +465,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n<input class=\"govuk-input\" id=\"with-describedby\" name=\"with-describedby\" type=\"text\" aria-describedby=\"test-target-element\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"with-describedby\"\n  name=\"with-describedby\" aria-describedby=\"test-target-element\">\n\n</div>"
         },
         {
             "name": "attributes",
@@ -482,7 +482,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n<input class=\"govuk-input\" id=\"with-attributes\" name=\"with-attributes\" type=\"text\" data-attribute=\"my data value\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"with-attributes\"\n  name=\"with-attributes\" data-attribute=\"my data value\">\n\n</div>"
         },
         {
             "name": "hint with describedBy",
@@ -500,7 +500,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input class=\"govuk-input\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-hint-describedby-hint\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"with-hint-describedby\"\n  name=\"with-hint-describedby\" aria-describedby=\"test-target-element with-hint-describedby-hint\">\n\n</div>"
         },
         {
             "name": "error with describedBy",
@@ -518,7 +518,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-describedby\" name=\"with-error-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-describedby-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-describedby\">\n    With error describedBy\n  </label>\n  <p id=\"with-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input\n  class=\"govuk-input govuk-input--error\"\n  type=\"text\"  id=\"with-error-describedby\"\n  name=\"with-error-describedby\" aria-describedby=\"test-target-element with-error-describedby-error\">\n\n</div>"
         },
         {
             "name": "with error and hint",
@@ -538,7 +538,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint\" name=\"with-error-hint\" type=\"text\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint\">\n    With error and hint\n  </label>\n  <div id=\"with-error-hint-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input\n  class=\"govuk-input govuk-input--error\"\n  type=\"text\"  id=\"with-error-hint\"\n  name=\"with-error-hint\" aria-describedby=\"with-error-hint-hint with-error-hint-error\">\n\n</div>"
         },
         {
             "name": "with error, hint and describedBy",
@@ -559,7 +559,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input class=\"govuk-input govuk-input--error\" id=\"with-error-hint-describedby\" name=\"with-error-hint-describedby\" type=\"text\" aria-describedby=\"test-target-element with-error-hint-describedby-hint with-error-hint-describedby-error\">\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-error-hint-describedby\">\n    With error, hint and describedBy\n  </label>\n  <div id=\"with-error-hint-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-error-hint-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n<input\n  class=\"govuk-input govuk-input--error\"\n  type=\"text\"  id=\"with-error-hint-describedby\"\n  name=\"with-error-hint-describedby\" aria-describedby=\"test-target-element with-error-hint-describedby-hint with-error-hint-describedby-error\">\n\n</div>"
         },
         {
             "name": "inputmode",
@@ -574,7 +574,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n<input class=\"govuk-input\" id=\"with-inputmode\" name=\"with-inputmode\" type=\"text\" inputmode=\"decimal\">\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-inputmode\">\n    With inputmode\n  </label>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"with-inputmode\"\n  name=\"with-inputmode\" inputmode=\"decimal\">\n\n</div>"
         },
         {
             "name": "with prefix with html as text",
@@ -591,7 +591,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\">&lt;span&gt;£&lt;/span&gt;</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix\"\n  name=\"amount\">\n</div>\n</div>"
         },
         {
             "name": "with prefix with html",
@@ -608,7 +608,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n<input class=\"govuk-input\" id=\"input-with-prefix\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\"><span>£</span></div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix\"\n  name=\"amount\">\n</div>\n</div>"
         },
         {
             "name": "with prefix with classes",
@@ -626,7 +626,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix app-input__prefix--custom-modifier\" aria-hidden=\"true\">£</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix-element\"\n  name=\"amount\">\n</div>\n</div>"
         },
         {
             "name": "with prefix with attributes",
@@ -646,7 +646,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n<input class=\"govuk-input\" id=\"input-with-prefix-element\" name=\"amount\" type=\"text\"></div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-prefix-element\">\n    Amount, in pounds\n  </label>\n<div class=\"govuk-input__wrapper\"><div class=\"govuk-input__prefix\" aria-hidden=\"true\" data-attribute=\"value\">£</div>\n<input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-prefix-element\"\n  name=\"amount\">\n</div>\n</div>"
         },
         {
             "name": "with suffix with html as text",
@@ -663,7 +663,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-suffix\"\n  name=\"weight\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\">&lt;span&gt;kg&lt;/span&gt;</div>\n</div>\n</div>"
         },
         {
             "name": "with suffix with html",
@@ -680,7 +680,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-suffix\"\n  name=\"weight\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
         },
         {
             "name": "with suffix with classes",
@@ -698,7 +698,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-suffix\"\n  name=\"weight\">\n<div class=\"govuk-input__suffix app-input__suffix--custom-modifier\" aria-hidden=\"true\"><span>kg</span></div>\n</div>\n</div>"
         },
         {
             "name": "with suffix with attributes",
@@ -718,7 +718,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input class=\"govuk-input\" id=\"input-with-suffix\" name=\"weight\" type=\"text\"><div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n</div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-suffix\">\n    Weight, in kilograms\n  </label>\n<div class=\"govuk-input__wrapper\"><input\n  class=\"govuk-input\"\n  type=\"text\"  id=\"input-with-suffix\"\n  name=\"weight\">\n<div class=\"govuk-input__suffix\" aria-hidden=\"true\" data-attribute=\"value\"><span>kg</span></div>\n</div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
index 27fe59a17..10895afd8 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
@@ -13,7 +13,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input\">\n    Password\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input\"\n      id=\"password-input\"\n      name=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"current-password\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input\">\n    Password\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input\"\n  type=\"password\"  id=\"password-input\"\n  name=\"password\" autocapitalize=\"off\" autocomplete=\"current-password\">\n\n\n  </div>\n\n</div>"
         },
         {
             "name": "with hint text",
@@ -30,7 +30,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input-with-hint-text\">\n    Password\n  </label>\n  <div id=\"password-input-with-hint-text-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input\"\n      id=\"password-input-with-hint-text\"\n      name=\"test-name-2\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"current-password\" aria-describedby=\"password-input-with-hint-text-hint\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input-with-hint-text\">\n    Password\n  </label>\n  <div id=\"password-input-with-hint-text-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input\"\n  type=\"password\"  id=\"password-input-with-hint-text\"\n  name=\"test-name-2\" autocapitalize=\"off\" autocomplete=\"current-password\" aria-describedby=\"password-input-with-hint-text-hint\">\n\n\n  </div>\n\n</div>"
         },
         {
             "name": "with error message",
@@ -50,7 +50,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"password-input-with-error-message\">\n    Password\n  </label>\n  <div id=\"password-input-with-error-message-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n  <p id=\"password-input-with-error-message-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input govuk-input--error\"\n      id=\"password-input-with-error-message\"\n      name=\"test-name-3\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"current-password\" aria-describedby=\"password-input-with-error-message-hint password-input-with-error-message-error\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"password-input-with-error-message\">\n    Password\n  </label>\n  <div id=\"password-input-with-error-message-hint\" class=\"govuk-hint\">\n    It probably has some letters, numbers and maybe even some symbols in it.\n  </div>\n  <p id=\"password-input-with-error-message-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message goes here\n  </p>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input govuk-input--error\"\n  type=\"password\"  id=\"password-input-with-error-message\"\n  name=\"test-name-3\" autocapitalize=\"off\" autocomplete=\"current-password\" aria-describedby=\"password-input-with-error-message-hint password-input-with-error-message-error\">\n\n\n  </div>\n\n</div>"
         },
         {
             "name": "with label as page heading",
@@ -66,7 +66,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"password-input-with-page-heading\">\n      Password\n    </label>\n    </h1>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input\"\n      id=\"password-input-with-page-heading\"\n      name=\"test-name\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"current-password\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"password-input-with-page-heading\">\n      Password\n    </label>\n    </h1>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input\"\n  type=\"password\"  id=\"password-input-with-page-heading\"\n  name=\"test-name\" autocapitalize=\"off\" autocomplete=\"current-password\">\n\n\n  </div>\n\n</div>"
         },
         {
             "name": "with new-password autocomplete",
@@ -81,7 +81,7 @@
             "hidden": false,
             "description": "Browsers and password managers should prompt to generate a password.",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input-new-password\">\n    Password\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input\"\n      id=\"password-input-new-password\"\n      name=\"password\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"new-password\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-input-new-password\">\n    Password\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input\"\n  type=\"password\"  id=\"password-input-new-password\"\n  name=\"password\" autocapitalize=\"off\" autocomplete=\"new-password\">\n\n\n  </div>\n\n</div>"
         },
         {
             "name": "with translations",
@@ -101,7 +101,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-translated\">\n    Cyfrinair\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\" data-i18n.show-password=\"Datguddia\" data-i18n.hide-password=\"Cuddio\" data-i18n.show-password-aria-label=\"Datgelu cyfrinair\" data-i18n.hide-password-aria-label=\"Cuddio cyfrinair\" data-i18n.password-shown-announcement=\"Mae eich cyfrinair yn weladwy.\" data-i18n.password-hidden-announcement=\"Mae eich cyfrinair wedi&#39;i guddio.\">\n\n    <input\n      class=\"govuk-input govuk-password-input__input\"\n      id=\"password-translated\"\n      name=\"password-translated\"\n      type=\"password\"\n      spellcheck=\"false\"\n      autocapitalize=\"off\"\n      autocomplete=\"current-password\">\n\n  </div>\n\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"password-translated\">\n    Cyfrinair\n  </label>\n\n  <div class=\"govuk-password-input\" data-module=\"govuk-password-input\" data-i18n.show-password=\"Datguddia\" data-i18n.hide-password=\"Cuddio\" data-i18n.show-password-aria-label=\"Datgelu cyfrinair\" data-i18n.hide-password-aria-label=\"Cuddio cyfrinair\" data-i18n.password-shown-announcement=\"Mae eich cyfrinair yn weladwy.\" data-i18n.password-hidden-announcement=\"Mae eich cyfrinair wedi&#39;i guddio.\">\n\n    <input\n  class=\"govuk-input govuk-password-input__input\"\n  type=\"password\"  id=\"password-translated\"\n  name=\"password-translated\" autocapitalize=\"off\" autocomplete=\"current-password\">\n\n\n  </div>\n\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
index 027720da6..36d61e738 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
@@ -13,7 +13,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"more-detail\"\n  name=\"more-detail\"></textarea>\n\n</div>"
         },
         {
             "name": "with hint",
@@ -30,7 +30,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"more-detail\">\n    Can you provide more detail?\n  </label>\n  <div id=\"more-detail-hint\" class=\"govuk-hint\">\n    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n  </div>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"more-detail\"\n  name=\"more-detail\" aria-describedby=\"more-detail-hint\"></textarea>\n\n</div>"
         },
         {
             "name": "with error message",
@@ -47,7 +47,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n  <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"no-ni-reason\">\n    Why can’t you provide a National Insurance number?\n  </label>\n  <p id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n  </p>\n  <textarea\n  class=\"govuk-textarea govuk-textarea--error\"\n  rows=\"5\"\n  id=\"no-ni-reason\"\n  name=\"no-ni-reason\" aria-describedby=\"no-ni-reason-error\"></textarea>\n\n</div>"
         },
         {
             "name": "with default value",
@@ -62,7 +62,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"full-address\"\n  name=\"address\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n\n</div>"
         },
         {
             "name": "with custom rows",
@@ -77,7 +77,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"full-address\">\n    Full address\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"8\"\n  id=\"full-address\"\n  name=\"address\"></textarea>\n\n</div>"
         },
         {
             "name": "with label as page heading",
@@ -93,7 +93,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <h1 class=\"govuk-label-wrapper\"><label class=\"govuk-label govuk-label--l\" for=\"textarea-with-page-heading\">\n      Full address\n    </label>\n    </h1>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"textarea-with-page-heading\"\n  name=\"address\"></textarea>\n\n</div>"
         },
         {
             "name": "with optional form-group classes",
@@ -110,7 +110,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group extra-class\">\n  <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n    Full address\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"textarea-with-page-heading\"\n  name=\"address\"></textarea>\n\n</div>"
         },
         {
             "name": "with autocomplete attribute",
@@ -125,7 +125,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n    Full address\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"textarea-with-autocomplete-attribute\"\n  name=\"address\" autocomplete=\"street-address\"></textarea>\n\n</div>"
         },
         {
             "name": "with spellcheck enabled",
@@ -140,7 +140,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n    Spellcheck is enabled\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"textarea-with-spellcheck-enabled\"\n  name=\"spellcheck\" spellcheck=\"true\"></textarea>\n\n</div>"
         },
         {
             "name": "with spellcheck disabled",
@@ -155,7 +155,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n    Spellcheck is disabled\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"textarea-with-spellcheck-disabled\"\n  name=\"spellcheck\" spellcheck=\"false\"></textarea>\n\n</div>"
         },
         {
             "name": "classes",
@@ -170,7 +170,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-classes\">\n    With classes\n  </label>\n  <textarea\n  class=\"govuk-textarea app-textarea--custom-modifier\"\n  rows=\"5\"\n  id=\"with-classes\"\n  name=\"with-classes\"></textarea>\n\n</div>"
         },
         {
             "name": "attributes",
@@ -187,7 +187,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-attributes\">\n    With attributes\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"with-attributes\"\n  name=\"with-attributes\" data-attribute=\"my data value\"></textarea>\n\n</div>"
         },
         {
             "name": "with describedBy",
@@ -202,7 +202,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n  <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"test-target-element\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-describedby\">\n    With describedBy\n  </label>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"with-describedby\"\n  name=\"with-describedby\" aria-describedby=\"test-target-element\"></textarea>\n\n</div>"
         },
         {
             "name": "with hint and described by",
@@ -220,7 +220,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint and describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"test-target-element with-hint-describedby-hint\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"with-hint-describedby\">\n    With hint and describedBy\n  </label>\n  <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n  </div>\n  <textarea\n  class=\"govuk-textarea\"\n  rows=\"5\"\n  id=\"with-hint-describedby\"\n  name=\"with-hint-describedby\" aria-describedby=\"test-target-element with-hint-describedby-hint\"></textarea>\n\n</div>"
         },
         {
             "name": "with error message and described by",
@@ -238,7 +238,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"textarea-with-error\">\n    Textarea with error\n  </label>\n  <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"test-target-element textarea-with-error-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"textarea-with-error\">\n    Textarea with error\n  </label>\n  <p id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea\n  class=\"govuk-textarea govuk-textarea--error\"\n  rows=\"5\"\n  id=\"textarea-with-error\"\n  name=\"textarea-with-error\" aria-describedby=\"test-target-element textarea-with-error-error\"></textarea>\n\n</div>"
         },
         {
             "name": "with hint and error message",
@@ -258,7 +258,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error\">\n    With hint and error\n  </label>\n  <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error\">\n    With hint and error\n  </label>\n  <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea\n  class=\"govuk-textarea govuk-textarea--error\"\n  rows=\"5\"\n  id=\"with-hint-error\"\n  name=\"with-hint-error\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n\n</div>"
         },
         {
             "name": "with hint, error message and described by",
@@ -279,7 +279,7 @@
             "hidden": true,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n    With hint, error and describedBy\n  </label>\n  <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"test-target-element with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n    With hint, error and describedBy\n  </label>\n  <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n    Hint\n  </div>\n  <p id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n  <span class=\"govuk-visually-hidden\">Error:</span> Error message\n  </p>\n  <textarea\n  class=\"govuk-textarea govuk-textarea--error\"\n  rows=\"5\"\n  id=\"with-hint-error-describedby\"\n  name=\"with-hint-error-describedby\" aria-describedby=\"test-target-element with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n\n</div>"
         }
     ]
 }

Action run for 2e3a09f

@querkmachine querkmachine linked an issue Jan 30, 2024 that may be closed by this pull request
Spike to create a common input component (stretch goal) alphagov/govuk-design-system#3480
Closed
3 tasks
@colinrotherham
Copy link
Contributor

@querkmachine I'll give this a proper look tomorrow 👀

Whilst I remember, this previous work in #1281 could be an alternative

It abstracted away the form group wrapper, label, hint, error message into govukFormGroup()

That PR could be made to make govukFormGroup() optional, letting every form field component render "wrapper-less". Similar to how Checkboxes have optional fieldsets

@colinrotherham
Copy link
Contributor

Ah I've still got a separate input macro for the Nunjucks indenting work

I've moved the Text input changes into a separate PR where an _inputElement() macro is used:

@querkmachine querkmachine force-pushed the show-hide-password-component branch from cf0be77 to 657b447 Compare February 9, 2024 12:53
@querkmachine querkmachine mentioned this pull request Feb 12, 2024
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@querkmachine querkmachine

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Spike to create a common input component (stretch goal)
3 participants
@querkmachine @colinrotherham @govuk-design-system-ci