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: {