Skip to content

Commit

Permalink
Add sample form groups to form elements page
Browse files Browse the repository at this point in the history
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
  • Loading branch information
colinrotherham committed Apr 1, 2019
1 parent f628473 commit 87cec52
Showing 1 changed file with 184 additions and 1 deletion.
185 changes: 184 additions & 1 deletion app/views/examples/form-elements/index.njk
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -23,8 +24,10 @@
<li><a href="#input" class="govuk-link">Label and text input</a></li>
<li><a href="#textarea" class="govuk-link">Label and textarea</a></li>
<li><a href="#radio-stacked" class="govuk-link">Fieldset, legend and radio buttons (stacked)</a></li>
<li><a href="#radio-stacked-subheadings" class="govuk-link">Fieldset, legend and radio buttons with subheadings (stacked)</a></li>
<li><a href="#radio-inline" class="govuk-link">Fieldset, legend and radio buttons (inline - yes or no)</a></li>
<li><a href="#checkboxes-stacked" class="govuk-link">Fieldset, legend and checkboxes (stacked)</a></li>
<li><a href="#checkboxes-stacked-subheadings" class="govuk-link">Fieldset, legend and checkboxes with subheadings (stacked)</a></li>
<li><a href="#date" class="govuk-link">Date pattern</a></li>
<li><a href="#select" class="govuk-link">Select box</a></li>
<li><a href="#file" class="govuk-link">File upload</a></li>
Expand Down Expand Up @@ -83,9 +86,101 @@
]
}) }}

<span id="radio-stacked-subheadings"></span>
{% 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 %}

<span id="radio-inline"></span>
{{ govukRadios({
"fieldset": {},
"fieldset": {
"legend": {
text: "Is this a question?",
classes: "govuk-fieldset__legend--m"
}
},
"classes": "govuk-radios--inline",
"idPrefix": "radio-inline",
"name": "radio-inline",
Expand Down Expand Up @@ -122,6 +217,94 @@
]
}) }}

<span id="checkboxes-stacked-subheadings"></span>
{% 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 %}

<span id="date"></span>
{{- govukDateInput({
"fieldset": {
Expand Down

0 comments on commit 87cec52

Please sign in to comment.