diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16eaff6c9d..36b1b4beed 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
- [#4906: Update the icon in the warning text component to match the defined text colour and background colour, rather than always being white on black](https://github.com/alphagov/govuk-frontend/pull/4906)
- [#4919: Use canvas colour for cookie banner over hardcoded grey](https://github.com/alphagov/govuk-frontend/pull/4919)
+- [#4899: Remove indents from conditional reveals in radios and checkboxes](https://github.com/alphagov/govuk-frontend/pull/4899)
## GOV.UK Frontend v5.3.0 (Feature release)
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
index 22d28a31aa..c85fa1c401 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
@@ -955,3 +955,16 @@ examples:
- value: blue
text: Blue
values: [red, green]
+ - name: textarea in conditional
+ hidden: true
+ options:
+ name: conditional
+ items:
+ - value: other
+ text: Other
+ conditional:
+ html: |
+
+
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
index ee73c72f1c..9493b6d730 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
@@ -59,7 +59,7 @@
{% if item.conditional.html %}
- {{ item.conditional.html | safe | trim | indent(6) }}
+ {{ item.conditional.html | safe | trim }}
{% endif %}
{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
index be1c601e1d..77fc39242c 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js
@@ -353,6 +353,15 @@ describe('Checkboxes', () => {
const $input = $('.govuk-checkboxes__input').first()
expect($input.attr('data-aria-controls')).toBeFalsy()
})
+
+ // Indentation in nunjucks can mutate the value of textareas, since
+ // textarea value is defined between the html tags
+ it('does not add space to the input value of textareas inside conditionals', () => {
+ const $ = render('checkboxes', examples['textarea in conditional'])
+
+ const $textarea = $('#conditional-textarea')
+ expect($textarea.text()).toBe('test\n')
+ })
})
describe('when they include an error message', () => {
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
index 6c270ef9d9..25a00f0d49 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
@@ -944,3 +944,16 @@ examples:
- value: blue
text: Blue
value: green
+ - name: textarea in conditional
+ hidden: true
+ options:
+ name: conditional
+ items:
+ - value: other
+ text: Other
+ conditional:
+ html: |
+
+
diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.njk b/packages/govuk-frontend/src/govuk/components/radios/template.njk
index c8ed88bbc4..80d9723b74 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/radios/template.njk
@@ -52,7 +52,7 @@
{% if item.conditional.html %}
- {{ item.conditional.html | safe | trim | indent(6) }}
+ {{ item.conditional.html | safe | trim }}
{% endif %}
{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.test.js b/packages/govuk-frontend/src/govuk/components/radios/template.test.js
index 4308bb2d8e..71a527cf08 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/radios/template.test.js
@@ -262,6 +262,15 @@ describe('Radios', () => {
const $input = $('.govuk-radios__input').first()
expect($input.attr('data-aria-controls')).toBeFalsy()
})
+
+ // Indentation in nunjucks can mutate the value of textareas, since
+ // textarea value is defined between the html tags
+ it('does not add space to the input value of textareas inside conditionals', () => {
+ const $ = render('radios', examples['textarea in conditional'])
+
+ const $textarea = $('#conditional-textarea')
+ expect($textarea.text()).toBe('test\n')
+ })
})
it('render divider', () => {