Add beforeHtml and afterHtml options to form groups

packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml

@@ -55,6 +55,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: classes
     type: string
     required: false

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

@@ -31,6 +31,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: idPrefix
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/checkboxes/template.njk

@@ -104,6 +104,7 @@
 {% endset -%}
 
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,
@@ -116,4 +117,5 @@
 {% else %}
   {{ innerHtml | trim | safe }}
 {% endif %}
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml

@@ -67,6 +67,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: fieldset
     type: object
     required: false

packages/govuk-frontend/src/govuk/components/date-input/template.njk

@@ -77,6 +77,7 @@
 {% endset -%}
 
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
 {% if params.fieldset %}
 {#- We override the fieldset's role to 'group' because otherwise JAWS does not
     announce the description for a fieldset comprised of text inputs, but
@@ -94,4 +95,5 @@
 {% else %}
   {{ innerHtml | trim | safe }}
 {% endif %}
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml

@@ -47,6 +47,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: classes
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/file-upload/template.njk

@@ -6,6 +6,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
@@ -42,4 +43,5 @@
   {%- if params.disabled %} disabled{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

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

@@ -97,6 +97,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: classes
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/input/template.njk

@@ -7,6 +7,7 @@
 {% set describedBy = params.describedBy if params.describedBy else "" -%}
 
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
@@ -64,5 +65,5 @@
   {% endif -%}
 
 {%- if params.prefix or params.suffix %}</div>{% endif %}
-
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

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

@@ -27,6 +27,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: idPrefix
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/radios/template.njk

@@ -94,6 +94,7 @@
 {% endset -%}
 
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
 {% if params.fieldset %}
   {% call govukFieldset({
     describedBy: describedBy,
@@ -106,4 +107,5 @@
 {% else %}
   {{ innerHtml | trim | safe }}
 {% endif %}
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

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

@@ -72,6 +72,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: classes
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/select/template.njk

@@ -6,6 +6,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
@@ -53,4 +54,5 @@
     {% endif %}
   {% endfor %}
   </select>
+{% if params.formGroup.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

packages/govuk-frontend/src/govuk/components/textarea/template.njk

@@ -6,6 +6,7 @@
   aria-describedby – for example hints or error messages -#}
 {% set describedBy = params.describedBy if params.describedBy else "" %}
 <div class="govuk-form-group {%- if params.errorMessage %} govuk-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" {%- for attribute, value in params.formGroup.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{% if params.formGroup.beforeHtml %}{{ params.formGroup.beforeHtml | safe | indent(2, true) }}{% endif %}
   {{ govukLabel({
     html: params.label.html,
     text: params.label.text,
@@ -43,4 +44,5 @@
   {%- 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.afterHtml %}{{ params.formGroup.afterHtml | safe | indent(2, true) }}{% endif %}
 </div>

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

@@ -55,6 +55,12 @@ params:
         type: object
         required: false
         description: HTML attributes (for example data attributes) to add to the form group.
+      - name: beforeHtml
+        type: string
+        description: HTML to add before the form group content, within the form group.
+      - name: afterHtml
+        type: string
+        description: HTML to add after the form group content, within the form group.
   - name: classes
     type: string
     required: false