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

Remove indents from conditional reveals in radios and checkboxes #4899

Merged
merged 1 commit into from Apr 4, 2024
Merged

Remove indents from conditional reveals in radios and checkboxes #4899

merged 1 commit into from Apr 4, 2024

Conversation

owenatgov
Copy link
Contributor

@owenatgov owenatgov commented Mar 26, 2024 •
edited

Removes indent from the rendering of conditional.html in both radios and checkboxes. Fixes #4807

Notes

There's a further feeling that indent might be a general risk to govuk-frontend and there's a question if we should simply remove all instances of indent. This PR is the minimum required work to solve the problem in the linked issue but I think it's valuable to explore separately.

Are there any other places where textareas could be present? In theory every html param could contain a textarea but that doesn't mean we should necessarily account for them in instances where a textarea shouldn't be eg: button.html.

@owenatgov owenatgov requested a review from a team March 26, 2024 15:54
@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 26, 2024 •
edited

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.25 KiB
dist/govuk-frontend-development.min.js 42.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.21 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 81.95 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 113.24 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 42.2 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 77.67 KiB 40.19 KiB
accordion.mjs 22.71 KiB 12.85 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.13 KiB 6.11 KiB

View stats and visualisations on the review app

Action run for 34e7dee

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 26, 2024 •
edited

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-conditional-reveal.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-conditional-reveal.html
index 18e89b29f..25b23e1c5 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-conditional-reveal.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-small-with-conditional-reveal.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted">
         <label class="govuk-label" for="context-email">Foo</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-2" name="how-contacted" type="checkbox" value="b">
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-item-checked.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-item-checked.html
index 37db271fa..42313657a 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-item-checked.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-item-checked.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" data-aria-controls="conditional-how-contacted-checked-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items-with-special-characters.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items-with-special-characters.html
index d20c82aa4..115c97c37 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items-with-special-characters.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items-with-special-characters.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="user.profile[contact-prefs]-2" name="contact-prefs" type="checkbox" value="phone" data-aria-controls="conditional-user.profile[contact-prefs]-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="user.profile[contact-prefs]-3" name="contact-prefs" type="checkbox" value="text" data-aria-controls="conditional-user.profile[contact-prefs]-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-user.profile[contact-prefs]-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items.html
index 3dcd5c18b..49dd356f8 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-conditional-items.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-2" name="with-conditional-items" type="checkbox" value="phone" data-aria-controls="conditional-how-contacted-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-3" name="with-conditional-items" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html
index 3da71354d..453f4a383 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-divider-none-and-conditional-items.html
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-with-divider-and-none-and-conditional-items-4">
         <label class="govuk-label" for="other-access-needs">Other access needs</label>
-        <textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>
+  <textarea class="govuk-textarea govuk-!-width-one-third" name="other-access-needs" id="other-access-needs"></textarea>
       </div>
       <div class="govuk-checkboxes__divider">or</div>
       <div class="govuk-checkboxes__item">
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-optional-form-group-classes-showing-group-error.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-optional-form-group-classes-showing-group-error.html
index 1f0aea023..da6da0ca7 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-optional-form-group-classes-showing-group-error.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-optional-form-group-classes-showing-group-error.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-checked-2" name="how-contacted-checked" type="checkbox" value="phone" checked data-aria-controls="conditional-how-contacted-checked-2">
@@ -22,8 +22,8 @@
       </div>
       <div class="govuk-checkboxes__conditional" id="conditional-how-contacted-checked-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
-        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+  <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+  <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
       </div>
       <div class="govuk-checkboxes__item">
         <input class="govuk-checkboxes__input" id="how-contacted-checked-3" name="how-contacted-checked" type="checkbox" value="text" data-aria-controls="conditional-how-contacted-checked-3">
@@ -33,7 +33,7 @@
       </div>
       <div class="govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" id="conditional-how-contacted-checked-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html
index 8a4d87a99..f646eaf98 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/template-with-pre-checked-values.html
@@ -20,11 +20,11 @@
     </div>
     <div class="govuk-checkboxes__conditional" id="conditional-nationality-3">
       <div class="govuk-form-group">
-        <label class="govuk-label" for="other-country">
-          Country
-        </label>
-        <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
-      </div>
+  <label class="govuk-label" for="other-country">
+    Country
+  </label>
+  <input class="govuk-input" id="other-country" name="other-country" type="text" value="Ravka">
+</div>
     </div>
   </div>
 </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-small-with-conditional-reveal.html b/packages/govuk-frontend/dist/govuk/components/radios/template-small-with-conditional-reveal.html
index 505c754be..1d1b70151 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-small-with-conditional-reveal.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-small-with-conditional-reveal.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
         <label class="govuk-label" for="context-email">Foo</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-2-2" name="how-contacted-2" type="radio" value="phone">
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-item-checked.html b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-item-checked.html
index d3509936d..9599c8520 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-item-checked.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-item-checked.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional" id="conditional-how-contacted-checked">
         <label class="govuk-label" for="context-email">Email</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-checked-2" name="how-contacted-checked" type="radio" value="phone" data-aria-controls="conditional-how-contacted-checked-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-checked-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-checked-3" name="how-contacted-checked" type="radio" value="text" data-aria-controls="conditional-how-contacted-checked-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-checked-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-and-pre-checked-value.html b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-and-pre-checked-value.html
index 3662df259..c5f6fb618 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-and-pre-checked-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-and-pre-checked-value.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-checked">
         <label class="govuk-label" for="context-email">Email</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-checked-2" name="how-contacted-checked" type="radio" value="phone" data-aria-controls="conditional-how-contacted-checked-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-checked-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-checked-3" name="how-contacted-checked" type="radio" value="text" checked data-aria-controls="conditional-how-contacted-checked-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-radios__conditional" id="conditional-how-contacted-checked-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-with-special-characters.html b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-with-special-characters.html
index b217675d5..c6849acba 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-with-special-characters.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items-with-special-characters.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-user.profile[contact-prefs]">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="user.profile[contact-prefs]-2" name="contact-prefs" type="radio" value="phone" data-aria-controls="conditional-user.profile[contact-prefs]-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-user.profile[contact-prefs]-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="user.profile[contact-prefs]-3" name="contact-prefs" type="radio" value="text" data-aria-controls="conditional-user.profile[contact-prefs]-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-user.profile[contact-prefs]-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html
index dc6230f9b..b60279315 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-with-conditional-items.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-2" name="how-contacted" type="radio" value="phone" data-aria-controls="conditional-how-contacted-2">
@@ -22,7 +22,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-3" name="how-contacted" type="radio" value="text" data-aria-controls="conditional-how-contacted-3">
@@ -32,7 +32,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/template-with-optional-form-group-classes-showing-group-error.html b/packages/govuk-frontend/dist/govuk/components/radios/template-with-optional-form-group-classes-showing-group-error.html
index c3c196ac2..7d15bd95d 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/template-with-optional-form-group-classes-showing-group-error.html
+++ b/packages/govuk-frontend/dist/govuk/components/radios/template-with-optional-form-group-classes-showing-group-error.html
@@ -12,7 +12,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2">
         <label class="govuk-label" for="context-email">Email address</label>
-        <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
+  <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-2-2" name="how-contacted-2" type="radio" value="phone" checked data-aria-controls="conditional-how-contacted-2-2">
@@ -22,8 +22,8 @@
       </div>
       <div class="govuk-radios__conditional" id="conditional-how-contacted-2-2">
         <label class="govuk-label" for="contact-phone">Phone number</label>
-        <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
-        <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
+  <span id="contact-phone-error" class="govuk-error-message">Problem with input</span>
+  <input class="govuk-input govuk-input--error govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone" aria-describedby="contact-phone-error">
       </div>
       <div class="govuk-radios__item">
         <input class="govuk-radios__input" id="how-contacted-2-3" name="how-contacted-2" type="radio" value="text" data-aria-controls="conditional-how-contacted-2-3">
@@ -33,7 +33,7 @@
       </div>
       <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-how-contacted-2-3">
         <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
-        <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
+  <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
       </div>
     </div>
   </fieldset>

Action run for 34e7dee

@github-actions GitHub Actions
Copy link

github-actions bot commented Mar 26, 2024 •
edited

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
index 2dae9456e..3fa06d6f0 100644
--- a/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/checkboxes/fixtures.json
@@ -54,7 +54,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\" checked>\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n        British\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n        Irish\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\" checked data-aria-controls=\"conditional-nationality-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n        Citizen of another country\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__conditional\" id=\"conditional-nationality-3\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label\" for=\"other-country\">\n          Country\n        </label>\n        <input class=\"govuk-input\" id=\"other-country\" name=\"other-country\" type=\"text\" value=\"Ravka\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\" checked>\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n        British\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n        Irish\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\" checked data-aria-controls=\"conditional-nationality-3\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n        Citizen of another country\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__conditional\" id=\"conditional-nationality-3\">\n      <div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"other-country\">\n    Country\n  </label>\n  <input class=\"govuk-input\" id=\"other-country\" name=\"other-country\" type=\"text\" value=\"Ravka\">\n</div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with divider and None",
@@ -139,7 +139,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-fieldset__heading\">\n        Do you have any access needs?\n      </h1>\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"accessible-toilets\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items\">\n          Accessible toilets available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-2\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"braille\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-2\">\n          Braille translation service available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-3\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"disabled-car-parking\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-3\">\n          Disabled car parking available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-4\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"another-access-need\" data-aria-controls=\"conditional-with-divider-and-none-and-conditional-items-4\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-4\">\n          Another access need\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-with-divider-and-none-and-conditional-items-4\">\n        <label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n        <textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n      </div>\n      <div class=\"govuk-checkboxes__divider\">or</div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-6\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-6\">\n          None of these\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n      <h1 class=\"govuk-fieldset__heading\">\n        Do you have any access needs?\n      </h1>\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"accessible-toilets\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items\">\n          Accessible toilets available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-2\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"braille\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-2\">\n          Braille translation service available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-3\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"disabled-car-parking\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-3\">\n          Disabled car parking available\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-4\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"another-access-need\" data-aria-controls=\"conditional-with-divider-and-none-and-conditional-items-4\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-4\">\n          Another access need\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-with-divider-and-none-and-conditional-items-4\">\n        <label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n  <textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n      </div>\n      <div class=\"govuk-checkboxes__divider\">or</div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-6\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-6\">\n          None of these\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with id and name",
@@ -565,7 +565,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"with-conditional-items\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"with-conditional-items\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-3\" name=\"with-conditional-items\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"with-conditional-items\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"with-conditional-items\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-3\" name=\"with-conditional-items\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with conditional items with special characters",
@@ -604,7 +604,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with conditional item checked",
@@ -644,7 +644,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with optional form-group classes showing group error",
@@ -687,7 +687,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n        <input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n  <input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "small",
@@ -879,7 +879,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"checkbox\" value=\"a\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n          a thing\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"checkbox\" value=\"b\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n          another thing\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"checkbox\" value=\"a\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n          a thing\n        </label>\n      </div>\n      <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-checkboxes__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"checkbox\" value=\"b\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n          another thing\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with idPrefix",
@@ -1387,6 +1387,25 @@
             "description": "",
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"colors\" name=\"colors\" type=\"checkbox\" value=\"red\" checked>\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors\">\n        Red\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"colors-2\" name=\"colors\" type=\"checkbox\" value=\"green\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors-2\">\n        Green\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"colors-3\" name=\"colors\" type=\"checkbox\" value=\"blue\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors-3\">\n        Blue\n      </label>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "textarea in conditional",
+            "options": {
+                "name": "conditional",
+                "items": [
+                    {
+                        "value": "other",
+                        "text": "Other",
+                        "conditional": {
+                            "html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-checkboxes\" data-module=\"govuk-checkboxes\">\n    <div class=\"govuk-checkboxes__item\">\n      <input class=\"govuk-checkboxes__input\" id=\"conditional\" name=\"conditional\" type=\"checkbox\" value=\"other\" data-aria-controls=\"conditional-conditional\">\n      <label class=\"govuk-label govuk-checkboxes__label\" for=\"conditional\">\n        Other\n      </label>\n    </div>\n    <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-conditional\">\n      <label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n    </div>\n  </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
index b04784418..df993fb68 100644
--- a/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/radios/fixtures.json
@@ -348,7 +348,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with conditional items with special characters",
@@ -387,7 +387,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with conditional item checked",
@@ -427,7 +427,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "prechecked",
@@ -512,7 +512,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" checked data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n        <label class=\"govuk-label\" for=\"context-email\">Email</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" checked data-aria-controls=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "with optional form-group classes showing group error",
@@ -555,7 +555,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-2-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-2-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n        <span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n        <input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-2-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-2-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-2-2\">\n        <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n  <span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n  <input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-2-3\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n          Text message\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2-3\">\n        <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "small",
@@ -761,7 +761,7 @@
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
-            "html": "<div class=\"govuk-form-group govuk-radios--small\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n        <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n          Text message\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
+            "html": "<div class=\"govuk-form-group govuk-radios--small\">\n  <fieldset class=\"govuk-fieldset\">\n    <legend class=\"govuk-fieldset__legend\">\n      How do you want to be contacted?\n    </legend>\n    <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n          Email\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n        <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n  <input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n          Phone\n        </label>\n      </div>\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n        <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n          Text message\n        </label>\n      </div>\n    </div>\n  </fieldset>\n</div>"
         },
         {
             "name": "small inline",
@@ -1379,6 +1379,25 @@
             "description": "",
             "previewLayoutModifiers": [],
             "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"colors\" name=\"colors\" type=\"radio\" value=\"red\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"colors\">\n        Red\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"colors-2\" name=\"colors\" type=\"radio\" value=\"green\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"colors-2\">\n        Green\n      </label>\n    </div>\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"colors-3\" name=\"colors\" type=\"radio\" value=\"blue\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"colors-3\">\n        Blue\n      </label>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "textarea in conditional",
+            "options": {
+                "name": "conditional",
+                "items": [
+                    {
+                        "value": "other",
+                        "text": "Other",
+                        "conditional": {
+                            "html": "<label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n    <div class=\"govuk-radios__item\">\n      <input class=\"govuk-radios__input\" id=\"conditional\" name=\"conditional\" type=\"radio\" value=\"other\" data-aria-controls=\"conditional-conditional\">\n      <label class=\"govuk-label govuk-radios__label\" for=\"conditional\">\n        Other\n      </label>\n    </div>\n    <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-conditional\">\n      <label class=\"govuk-label\" for=\"conditional-textarea\">textarea</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"conditional-textarea\" id=\"conditional-textarea\">\ntest\n</textarea>\n    </div>\n  </div>\n</div>"
         }
     ]
 }

Action run for 34e7dee

@36degrees
Copy link
Member

I think it might be worthwhile adding an example with a textarea for both components with a pre-defined value, and adding a test for it that fails without the removal of the indent?

Would hopefully stop some well-intended person re-introducing the issue in the future.

@owenatgov owenatgov force-pushed the remove-indent-from-conditional branch from 540d39d to 6d07bd6 Compare March 28, 2024 14:00
@owenatgov owenatgov force-pushed the remove-indent-from-conditional branch from 6d07bd6 to 024cb2d Compare March 28, 2024 15:27
@owenatgov owenatgov force-pushed the remove-indent-from-conditional branch from 024cb2d to 2c58285 Compare April 2, 2024 10:03
@owenatgov owenatgov force-pushed the remove-indent-from-conditional branch from 2c58285 to 34e7dee Compare April 3, 2024 16:16
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4899 April 3, 2024 16:16 Inactive
@owenatgov owenatgov merged commit 17b95f6 into main Apr 4, 2024
45 checks passed
@owenatgov owenatgov deleted the remove-indent-from-conditional branch April 4, 2024 09:06
@owenatgov owenatgov mentioned this pull request Apr 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@36degrees 36degrees 36degrees approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

"conditional.html" value on radio item has whitespace inserted into it, breaking <textarea> elements
3 participants
@owenatgov @36degrees @govuk-design-system-ci