Merge pull request #4567 from alphagov/form-group-html

Add `beforeInput(s)` and `afterInput(s)` options to form groups

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).

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

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

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 -%}
 

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

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 -%}
 

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

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>

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

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,15 +62,21 @@
   }) | trim | indent(2) }}
 {% 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 %}
     {{ _inputElement(params) }}
     {% 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) }}

packages/govuk-frontend/src/govuk/components/radios/radios.yaml

@@ -27,14 +27,40 @@ 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
     description: Optional prefix. This is used to prefix the `id` attribute for each radio input, hint and error message, separated by `-`. Defaults to the `name` option value.
   - 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

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 -%}
 

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