From 2292c526fce6cb10f3c8fd4b7ca6e99580e7843d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 6 Feb 2024 21:14:25 +0000
Subject: [PATCH 1/4] Add `beforeInput` and `afterInput` options to form groups
 (with single field)

---
 .../character-count/character-count.yaml      | 26 +++++++++++++++++
 .../components/file-upload/file-upload.yaml   | 26 +++++++++++++++++
 .../govuk/components/file-upload/template.njk |  6 ++++
 .../src/govuk/components/input/input.yaml     | 28 ++++++++++++++++++-
 .../src/govuk/components/input/template.njk   |  6 ++++
 .../src/govuk/components/select/select.yaml   | 26 +++++++++++++++++
 .../src/govuk/components/select/template.njk  |  6 ++++
 .../govuk/components/textarea/template.njk    |  6 ++++
 .../govuk/components/textarea/textarea.yaml   | 26 +++++++++++++++++
 9 files changed, 155 insertions(+), 1 deletion(-)

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
index b9af4bb2e6..32f907ba31 100644
--- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
+++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml
@@ -55,6 +55,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInput
+        type: object
+        required: false
+        description: Content to add before the textarea used by the character count component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the textarea. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the textarea. If `html` is provided, the `text` option will be ignored.
+      - name: afterInput
+        type: object
+        required: false
+        description: Content to add after the textarea used by the character count component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the textarea. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the textarea. If `html` is provided, the `text` option will be ignored.
   - name: classes
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
index 9bfdb03c8b..6506fde6eb 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml
@@ -47,6 +47,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInput
+        type: object
+        required: false
+        description: Content to add before the input used by the file upload component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the input. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the input. If `html` is provided, the `text` option will be ignored.
+      - name: afterInput
+        type: object
+        required: false
+        description: Content to add after the input used by the file upload component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the input. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the input. If `html` is provided, the `text` option will be ignored.
   - name: classes
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
index f6c76b64d2..b1cdcd427f 100644
--- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk
@@ -36,10 +36,16 @@
     text: params.errorMessage.text,
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | trim | indent(2) }}
+{% endif %}
+{% if params.formGroup.beforeInput %}
+  {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
   <input class="govuk-file-upload {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-file-upload--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="file"
   {%- if params.value %} value="{{ params.value }}"{% endif %}
   {%- if params.disabled %} disabled{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.afterInput %}
+  {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif %}
 </div>
diff --git a/packages/govuk-frontend/src/govuk/components/input/input.yaml b/packages/govuk-frontend/src/govuk/components/input/input.yaml
index fae40ceef4..277766431d 100644
--- a/packages/govuk-frontend/src/govuk/components/input/input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/input/input.yaml
@@ -87,7 +87,7 @@ params:
   - name: formGroup
     type: object
     required: false
-    description: Additional options for the form group containing the text-input component.
+    description: Additional options for the form group containing the text input component.
     params:
       - name: classes
         type: string
@@ -97,6 +97,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInput
+        type: object
+        required: false
+        description: Content to add before the input used by the text input component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the input. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the input. If `html` is provided, the `text` option will be ignored.
+      - name: afterInput
+        type: object
+        required: false
+        description: Content to add after the input used by the text input component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the input. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the input. If `html` is provided, the `text` option will be ignored.
   - name: classes
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
index 99c0ab0405..734a16394e 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -60,6 +60,9 @@
   }) | trim | indent(2) }}
 {% endif %}
 
+{%- if params.formGroup.beforeInput %}
+  {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
+{% endif %}
 {%- if hasPrefix or hasSuffix %}
   <div class="govuk-input__wrapper">
     {% if hasPrefix %}
@@ -73,4 +76,7 @@
 {% else %}
   {{ _inputElement(params) }}
 {% endif %}
+{%- if params.formGroup.afterInput %}
+  {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif -%}
 </div>
diff --git a/packages/govuk-frontend/src/govuk/components/select/select.yaml b/packages/govuk-frontend/src/govuk/components/select/select.yaml
index b5ca85f5e9..6f5262b472 100644
--- a/packages/govuk-frontend/src/govuk/components/select/select.yaml
+++ b/packages/govuk-frontend/src/govuk/components/select/select.yaml
@@ -72,6 +72,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInput
+        type: object
+        required: false
+        description: Content to add before the select used by the select component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the select. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the select. If `html` is provided, the `text` option will be ignored.
+      - name: afterInput
+        type: object
+        required: false
+        description: Content to add after the select used by the select component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the select. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the select. If `html` is provided, the `text` option will be ignored.
   - name: classes
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/select/template.njk b/packages/govuk-frontend/src/govuk/components/select/template.njk
index ec8e663d27..486f438abf 100644
--- a/packages/govuk-frontend/src/govuk/components/select/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/select/template.njk
@@ -36,6 +36,9 @@
     text: params.errorMessage.text,
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | trim | indent(2) }}
+{% endif %}
+{% if params.formGroup.beforeInput %}
+  {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
   <select class="govuk-select
     {%- if params.classes %} {{ params.classes }}{% endif %}{%- if params.errorMessage %} govuk-select--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}"
@@ -53,4 +56,7 @@
     {% endif %}
   {% endfor %}
   </select>
+{% if params.formGroup.afterInput %}
+  {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif %}
 </div>
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.njk b/packages/govuk-frontend/src/govuk/components/textarea/template.njk
index 6ebeaeb913..48a798601d 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/textarea/template.njk
@@ -36,6 +36,9 @@
     text: params.errorMessage.text,
     visuallyHiddenText: params.errorMessage.visuallyHiddenText
   }) | trim | indent(2) }}
+{% endif %}
+{% if params.formGroup.beforeInput %}
+  {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
 {% endif %}
   <textarea class="govuk-textarea {%- if params.errorMessage %} govuk-textarea--error{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" name="{{ params.name }}" rows="{{ params.rows | default(5, true) }}"
   {%- if (params.spellcheck === false) or (params.spellcheck === true) %} spellcheck="{{ params.spellcheck }}"{% endif %}
@@ -43,4 +46,7 @@
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.value }}</textarea>
+{% if params.formGroup.afterInput %}
+  {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif %}
 </div>
diff --git a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
index f7321e4019..b2ce89b96e 100644
--- a/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
+++ b/packages/govuk-frontend/src/govuk/components/textarea/textarea.yaml
@@ -55,6 +55,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInput
+        type: object
+        required: false
+        description: Content to add before the textarea used by the textarea component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the textarea. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the textarea. If `html` is provided, the `text` option will be ignored.
+      - name: afterInput
+        type: object
+        required: false
+        description: Content to add after the textarea used by the textarea component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the textarea. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the textarea. If `html` is provided, the `text` option will be ignored.
   - name: classes
     type: string
     required: false

From 2141e2eded4e8663f0ae64bf04763d6feeae3dbd Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 6 Feb 2024 21:18:03 +0000
Subject: [PATCH 2/4] Add `beforeInputs` and `afterInputs` options to form
 groups (with multiple fields)

---
 .../components/checkboxes/checkboxes.yaml     | 26 +++++++++++++++++
 .../govuk/components/checkboxes/template.njk  |  6 ++++
 .../components/date-input/date-input.yaml     | 26 +++++++++++++++++
 .../govuk/components/date-input/template.njk  |  8 +++++-
 .../src/govuk/components/radios/radios.yaml   | 28 ++++++++++++++++++-
 .../src/govuk/components/radios/template.njk  |  6 ++++
 6 files changed, 98 insertions(+), 2 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
index c32b4771cf..22d28a31aa 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.yaml
@@ -31,6 +31,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInputs
+        type: object
+        required: false
+        description: Content to add before all checkbox items within the checkboxes component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before all checkbox items. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before all checkbox items. If `html` is provided, the `text` option will be ignored.
+      - name: afterInputs
+        type: object
+        required: false
+        description: Content to add after all checkbox items within the checkboxes component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after all checkbox items. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after all checkbox items. If `html` is provided, the `text` option will be ignored.
   - name: idPrefix
     type: string
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
index 3d30f21b5e..b60434a8b0 100644
--- a/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/checkboxes/template.njk
@@ -44,6 +44,9 @@
 {% endif %}
   <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-checkboxes">
+    {% if params.formGroup.beforeInputs %}
+    {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+    {% endif %}
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -100,6 +103,9 @@
         {% endif %}
       {% endif %}
     {% endfor %}
+    {% if params.formGroup.afterInputs %}
+    {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}
+    {% endif %}
   </div>
 {% endset -%}
 
diff --git a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml
index b1d31f717d..870d000cae 100644
--- a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml
+++ b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml
@@ -67,6 +67,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInputs
+        type: object
+        required: false
+        description: Content to add before the inputs used by the date input component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before the inputs. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before the inputs. If `html` is provided, the `text` option will be ignored.
+      - name: afterInputs
+        type: object
+        required: false
+        description: Content to add after the inputs used by the date input component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after the inputs. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after the inputs. If `html` is provided, the `text` option will be ignored.
   - name: fieldset
     type: object
     required: false
diff --git a/packages/govuk-frontend/src/govuk/components/date-input/template.njk b/packages/govuk-frontend/src/govuk/components/date-input/template.njk
index 998a898bd3..c12d90c05b 100644
--- a/packages/govuk-frontend/src/govuk/components/date-input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/date-input/template.njk
@@ -57,6 +57,9 @@
   <div class="govuk-date-input {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
     {%- if params.id %} id="{{ params.id }}"{% endif %}>
+    {% if params.formGroup.beforeInputs %}
+    {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+    {% endif %}
     {% for item in dateInputItems %}
     <div class="govuk-date-input__item">
       {{ govukInput({
@@ -75,7 +78,10 @@
         attributes: item.attributes
       }) | trim | indent(6) }}
     </div>
-  {% endfor %}
+    {% endfor %}
+    {% if params.formGroup.afterInputs %}
+    {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}
+    {% endif %}
   </div>
 {% endset -%}
 
diff --git a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
index 3a21c699a6..6c270ef9d9 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
+++ b/packages/govuk-frontend/src/govuk/components/radios/radios.yaml
@@ -27,6 +27,32 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeInputs
+        type: object
+        required: false
+        description: Content to add before all radio items within the checkboxes component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add before all radio items. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add before all radio items. If `html` is provided, the `text` option will be ignored.
+      - name: afterInputs
+        type: object
+        required: false
+        description: Content to add after all radio items within the checkboxes component.
+        params:
+          - name: text
+            type: string
+            required: true
+            description: Text to add after all radio items. If `html` is provided, the `text` option will be ignored.
+          - name: html
+            type: string
+            required: true
+            description: HTML to add after all radio items. If `html` is provided, the `text` option will be ignored.
   - name: idPrefix
     type: string
     required: false
@@ -34,7 +60,7 @@ params:
   - name: name
     type: string
     required: true
-    description: Name attribute for all radio items.
+    description: Name attribute for the radio items.
   - name: items
     type: array
     required: true
diff --git a/packages/govuk-frontend/src/govuk/components/radios/template.njk b/packages/govuk-frontend/src/govuk/components/radios/template.njk
index fdb80b30c7..5a332544cb 100644
--- a/packages/govuk-frontend/src/govuk/components/radios/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/radios/template.njk
@@ -41,6 +41,9 @@
 {% endif %}
   <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-radios">
+    {% if params.formGroup.beforeInputs %}
+    {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+    {% endif %}
     {% for item in params.items %}
       {% if item %}
         {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -93,6 +96,9 @@
         {% endif %}
       {% endif %}
     {% endfor %}
+    {% if params.formGroup.afterInputs %}
+    {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}
+    {% endif %}
   </div>
 {% endset -%}
 

From f43e1e82e572a780bfd2b76d2bb0630bfb5b2af8 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 7 Feb 2024 11:02:55 +0000
Subject: [PATCH 3/4] Move Text input before/after content inside wrapper

---
 .../src/govuk/components/input/template.njk      | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/govuk-frontend/src/govuk/components/input/template.njk b/packages/govuk-frontend/src/govuk/components/input/template.njk
index 734a16394e..46bd6e1a13 100644
--- a/packages/govuk-frontend/src/govuk/components/input/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/input/template.njk
@@ -8,6 +8,8 @@
 
 {%- set hasPrefix = true if params.prefix and (params.prefix.text or params.prefix.html) else false %}
 {%- set hasSuffix = true if params.suffix and (params.suffix.text or params.suffix.html) else false %}
+{%- set hasBeforeInput = true if params.formGroup.beforeInput and (params.formGroup.beforeInput.text or params.formGroup.beforeInput.html) else false %}
+{%- set hasAfterInput = true if params.formGroup.afterInput and (params.formGroup.afterInput.text or params.formGroup.afterInput.html) else false %}
 
 {%- macro _inputElement(params) -%}
   <input class="govuk-input {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} govuk-input--error{% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default("text", true) }}"
@@ -60,11 +62,11 @@
   }) | trim | indent(2) }}
 {% endif %}
 
-{%- if params.formGroup.beforeInput %}
-  {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
-{% endif %}
-{%- if hasPrefix or hasSuffix %}
+{%- if hasPrefix or hasSuffix or hasBeforeInput or hasAfterInput %}
   <div class="govuk-input__wrapper">
+    {% if hasBeforeInput %}
+      {{- params.formGroup.beforeInput.html | safe | trim | indent(4, true) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }}
+    {% endif %}
     {% if hasPrefix %}
       {{- _affixItem(params.prefix, "prefix") | indent(2, true) }}
     {% endif %}
@@ -72,11 +74,11 @@
     {% if hasSuffix %}
       {{- _affixItem(params.suffix, "suffix") | indent(2, true) }}
     {% endif %}
+    {% if hasAfterInput %}
+      {{- params.formGroup.afterInput.html | safe | trim | indent(4, true) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+    {% endif %}
   </div>
 {% else %}
   {{ _inputElement(params) }}
 {% endif %}
-{%- if params.formGroup.afterInput %}
-  {{ params.formGroup.afterInput.html | safe | trim | indent(2) if params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
-{% endif -%}
 </div>

From 819324f08d4aed7c7bacaf61f599e85c9ce78cfb Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 6 Feb 2024 21:23:03 +0000
Subject: [PATCH 4/4] Add CHANGELOG entry

---
 CHANGELOG.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 275d211116..2f5522b7ba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,27 @@ For advice on how to use these release notes see [our guidance on staying up to
 
 ## Unreleased
 
+### New features
+
+#### Insert custom HTML into component form group wrappers
+
+You can now insert custom HTML into form group wrappers for all components with form fields.
+
+```njk
+govukInput({
+  formGroup: {
+    beforeInput: {
+      html: "example"
+    },
+    afterInput: {
+      html: "example"
+    },
+  }
+})
+```
+
+This change was introduced in [pull request #4567: Add `beforeInput(s)` and `beforeInput(s)` options to form groups](https://github.com/alphagov/govuk-frontend/pull/4567).
+
 ## 5.1.0 (Feature release)
 
 To install this version with npm, run `npm install govuk-frontend@5.1.0`. You can also find more information about [how to stay up to date in our documentation](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version).