diff --git a/app/views/examples/form-elements/index.njk b/app/views/examples/form-elements/index.njk
index 96521db14d..16df353831 100644
--- a/app/views/examples/form-elements/index.njk
+++ b/app/views/examples/form-elements/index.njk
@@ -1,4 +1,5 @@
{% from "back-link/macro.njk" import govukBackLink %}
+{% from "form-group/macro.njk" import govukFormGroup %}
{% from "fieldset/macro.njk" import govukFieldset %}
{% from "input/macro.njk" import govukInput %}
{% from "button/macro.njk" import govukButton %}
@@ -23,8 +24,10 @@
Label and text input
Label and textarea
Fieldset, legend and radio buttons (stacked)
+ Fieldset, legend and radio buttons with subheadings (stacked)
Fieldset, legend and radio buttons (inline - yes or no)
Fieldset, legend and checkboxes (stacked)
+ Fieldset, legend and checkboxes with subheadings (stacked)
Date pattern
Select box
File upload
@@ -80,6 +83,93 @@
]
}) }}
+
+ {% call govukFormGroup({
+ fieldset: {
+ legend: {
+ text: "Pick one of the following options:",
+ classes: "govuk-fieldset__legend--m"
+ }
+ }
+ }) %}
+
+ {{ govukRadios({
+ "fieldset": {
+ "legend": {
+ text: "Group 1",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "radio-stacked-subheadings",
+ "name": "radio-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {{ govukRadios({
+ "fieldset": {
+ "legend": {
+ text: "Group 2",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "radio-stacked-subheadings",
+ "name": "radio-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {{ govukRadios({
+ "fieldset": {
+ "legend": {
+ text: "Group 3",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "radio-stacked-subheadings",
+ "name": "radio-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {% endcall %}
+
{{ govukRadios({
"fieldset": {},
@@ -119,6 +209,94 @@
]
}) }}
+
+ {% call govukFormGroup({
+ id: "checkboxes-stacked-subheadings",
+ fieldset: {
+ legend: {
+ text: "Which of the following apply?",
+ classes: "govuk-fieldset__legend--m"
+ }
+ }
+ }) %}
+
+ {{ govukCheckboxes({
+ "fieldset": {
+ "legend": {
+ text: "Group 1",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "checkboxes-stacked-subheadings",
+ "name": "checkboxes-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {{ govukCheckboxes({
+ "fieldset": {
+ "legend": {
+ text: "Group 2",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "checkboxes-stacked-subheadings",
+ "name": "checkboxes-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {{ govukCheckboxes({
+ "fieldset": {
+ "legend": {
+ text: "Group 3",
+ classes: "govuk-fieldset__legend--s"
+ }
+ },
+ "idPrefix": "checkboxes-stacked-subheadings",
+ "name": "checkboxes-stacked-subheadings",
+ "items": [
+ {
+ "value": "a",
+ "text": "Option A"
+ },
+ {
+ "value": "b",
+ "text": "Option B"
+ },
+ {
+ "value": "c",
+ "text": "Option C"
+ }
+ ]
+ }) }}
+
+ {% endcall %}
+
{{- govukDateInput({
fieldset: {