govuk_publishing_components 32.1.0 → 33.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/component_guide/accessibility-test.js +0 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +175 -0
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-ecommerce-tracker.js +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +5 -13
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +80 -309
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +2 -2
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-specialist-link-tracker.js +140 -0
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js +3 -0
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js +1 -0
- data/app/assets/javascripts/govuk_publishing_components/components/accordion.js +12 -1
- data/app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js +24 -8
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +22 -1
- data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +140 -191
- data/app/assets/stylesheets/govuk_publishing_components/components/_big-number.scss +2 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +3 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +10 -30
- data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +0 -7
- data/app/views/govuk_publishing_components/components/_accordion.html.erb +14 -1
- data/app/views/govuk_publishing_components/components/_error_summary.html.erb +27 -26
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_phase_banner.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_share_links.html.erb +11 -13
- data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +4 -1
- data/app/views/govuk_publishing_components/components/docs/accordion.yml +15 -3
- data/app/views/govuk_publishing_components/components/docs/button.yml +10 -0
- data/app/views/govuk_publishing_components/components/docs/share_links.yml +59 -30
- data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +10 -1
- data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml +34 -0
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +3 -3
- data/lib/govuk_publishing_components/presenters/button_helper.rb +9 -2
- data/lib/govuk_publishing_components/presenters/single_page_notification_button_helper.rb +25 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/axe-core/axe.js +4559 -4673
- data/node_modules/axe-core/axe.min.js +2 -2
- data/node_modules/axe-core/package.json +2 -2
- data/node_modules/axe-core/sri-history.json +4 -0
- data/node_modules/govuk-frontend/README.md +1 -2
- data/node_modules/govuk-frontend/govuk/all.js +1398 -273
- data/node_modules/govuk-frontend/govuk/common/closest-attribute-value.js +70 -0
- data/node_modules/govuk-frontend/govuk/common/index.js +172 -0
- data/node_modules/govuk-frontend/govuk/common/normalise-dataset.js +373 -0
- data/node_modules/govuk-frontend/govuk/common.js +138 -3
- data/node_modules/govuk-frontend/govuk/components/accordion/accordion.js +753 -25
- data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +54 -22
- data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +36 -0
- data/node_modules/govuk-frontend/govuk/components/accordion/template.njk +7 -1
- data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -12
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +22 -22
- data/node_modules/govuk-frontend/govuk/components/button/_index.scss +23 -5
- data/node_modules/govuk-frontend/govuk/components/button/button.js +365 -107
- data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +85 -66
- data/node_modules/govuk-frontend/govuk/components/button/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +9 -0
- data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1033 -121
- data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +112 -36
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +42 -0
- data/node_modules/govuk-frontend/govuk/components/character-count/template.njk +27 -3
- data/node_modules/govuk-frontend/govuk/components/checkboxes/checkboxes.js +30 -2
- data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +96 -93
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +46 -46
- data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +50 -50
- data/node_modules/govuk-frontend/govuk/components/details/details.js +43 -13
- data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +20 -20
- data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +20 -20
- data/node_modules/govuk-frontend/govuk/components/error-summary/error-summary.js +268 -6
- data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +44 -35
- data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk +25 -21
- data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +51 -39
- data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +26 -26
- data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +46 -46
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +93 -38
- data/node_modules/govuk-frontend/govuk/components/header/header.js +6 -0
- data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +8 -2
- data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -2
- data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +12 -12
- data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +80 -80
- data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +12 -12
- data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +34 -34
- data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +56 -46
- data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +252 -2
- data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/pagination/_index.scss +10 -7
- data/node_modules/govuk-frontend/govuk/components/pagination/fixtures.json +33 -26
- data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +18 -18
- data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +14 -14
- data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +94 -91
- data/node_modules/govuk-frontend/govuk/components/radios/radios.js +30 -2
- data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +32 -32
- data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +22 -20
- data/node_modules/govuk-frontend/govuk/components/skip-link/skip-link.js +10 -4
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +50 -50
- data/node_modules/govuk-frontend/govuk/components/table/_index.scss +1 -1
- data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +40 -40
- data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +29 -29
- data/node_modules/govuk-frontend/govuk/components/tabs/tabs.js +28 -0
- data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -28
- data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +34 -34
- data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +14 -14
- data/node_modules/govuk-frontend/govuk/core/_section-break.scss +1 -1
- data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
- data/node_modules/govuk-frontend/govuk/helpers/_links.scss +6 -6
- data/node_modules/govuk-frontend/govuk/i18n.js +390 -0
- data/node_modules/govuk-frontend/govuk/macros/i18n.njk +15 -0
- data/node_modules/govuk-frontend/govuk/settings/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +12 -0
- data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +26 -0
- data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +23 -0
- data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +12 -0
- data/node_modules/govuk-frontend/govuk/settings/_warnings.scss +53 -0
- data/node_modules/govuk-frontend/govuk/tools/_compatibility.scss +20 -6
- data/node_modules/govuk-frontend/govuk/vendor/polyfills/Date/now.js +21 -0
- data/node_modules/govuk-frontend/govuk/vendor/polyfills/Element/prototype/dataset.js +300 -0
- data/node_modules/govuk-frontend/govuk/vendor/polyfills/String/prototype/trim.js +21 -0
- data/node_modules/govuk-frontend/govuk-esm/all.mjs +50 -27
- data/node_modules/govuk-frontend/govuk-esm/common/closest-attribute-value.mjs +15 -0
- data/node_modules/govuk-frontend/govuk-esm/common/index.mjs +159 -0
- data/node_modules/govuk-frontend/govuk-esm/common/normalise-dataset.mjs +58 -0
- data/node_modules/govuk-frontend/govuk-esm/common.mjs +6 -28
- data/node_modules/govuk-frontend/govuk-esm/components/accordion/accordion.mjs +113 -43
- data/node_modules/govuk-frontend/govuk-esm/components/button/button.mjs +67 -30
- data/node_modules/govuk-frontend/govuk-esm/components/character-count/character-count.mjs +325 -123
- data/node_modules/govuk-frontend/govuk-esm/components/checkboxes/checkboxes.mjs +9 -3
- data/node_modules/govuk-frontend/govuk-esm/components/details/details.mjs +22 -8
- data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs +48 -6
- data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs +6 -0
- data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs +32 -2
- data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs +9 -3
- data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs +10 -4
- data/node_modules/govuk-frontend/govuk-esm/components/tabs/tabs.mjs +8 -2
- data/node_modules/govuk-frontend/govuk-esm/i18n.mjs +380 -0
- data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Date/now.mjs +13 -0
- data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/Element/prototype/dataset.mjs +68 -0
- data/node_modules/govuk-frontend/govuk-esm/vendor/polyfills/String/prototype/trim.mjs +13 -0
- data/node_modules/govuk-frontend/govuk-prototype-kit/init.js +7 -0
- data/node_modules/govuk-frontend/govuk-prototype-kit/init.scss +12 -0
- data/node_modules/govuk-frontend/govuk-prototype-kit.config.json +138 -7
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +22 -3
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
}
|
|
20
20
|
]
|
|
21
21
|
},
|
|
22
|
-
"
|
|
23
|
-
"
|
|
22
|
+
"hidden": false,
|
|
23
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div id=\"example-default-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
"name": "inline",
|
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
}
|
|
49
49
|
]
|
|
50
50
|
},
|
|
51
|
-
"
|
|
52
|
-
"
|
|
51
|
+
"hidden": false,
|
|
52
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios govuk-radios--inline\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
"name": "with disabled",
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
}
|
|
84
84
|
]
|
|
85
85
|
},
|
|
86
|
-
"
|
|
87
|
-
"
|
|
86
|
+
"hidden": false,
|
|
87
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n How do you want to sign in?\n </h1>\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"gateway\" name=\"gov\" type=\"radio\" value=\"gateway\" aria-describedby=\"gateway-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"gateway-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"verify\" name=\"gov\" type=\"radio\" value=\"verify\" disabled aria-describedby=\"verify-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"verify-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
88
88
|
},
|
|
89
89
|
{
|
|
90
90
|
"name": "with legend as page heading",
|
|
@@ -112,8 +112,8 @@
|
|
|
112
112
|
}
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
|
-
"
|
|
116
|
-
"
|
|
115
|
+
"hidden": false,
|
|
116
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n Which part of the Housing Act was your licence issued under?\n </h1>\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "with a medium legend",
|
|
@@ -140,8 +140,8 @@
|
|
|
140
140
|
}
|
|
141
141
|
]
|
|
142
142
|
},
|
|
143
|
-
"
|
|
144
|
-
"
|
|
143
|
+
"hidden": false,
|
|
144
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n \n Which part of the Housing Act was your licence issued under?\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
145
145
|
},
|
|
146
146
|
{
|
|
147
147
|
"name": "with a divider",
|
|
@@ -171,8 +171,8 @@
|
|
|
171
171
|
}
|
|
172
172
|
]
|
|
173
173
|
},
|
|
174
|
-
"
|
|
175
|
-
"
|
|
174
|
+
"hidden": false,
|
|
175
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
176
176
|
},
|
|
177
177
|
{
|
|
178
178
|
"name": "with hints on items",
|
|
@@ -205,8 +205,8 @@
|
|
|
205
205
|
}
|
|
206
206
|
]
|
|
207
207
|
},
|
|
208
|
-
"
|
|
209
|
-
"
|
|
208
|
+
"hidden": false,
|
|
209
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n How do you want to sign in?\n </h1>\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"gateway\" name=\"gov\" type=\"radio\" value=\"gateway\" aria-describedby=\"gateway-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"gateway-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"verify\" name=\"gov\" type=\"radio\" value=\"verify\" aria-describedby=\"verify-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"verify-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
210
210
|
},
|
|
211
211
|
{
|
|
212
212
|
"name": "without fieldset",
|
|
@@ -227,8 +227,8 @@
|
|
|
227
227
|
}
|
|
228
228
|
]
|
|
229
229
|
},
|
|
230
|
-
"
|
|
231
|
-
"
|
|
230
|
+
"hidden": false,
|
|
231
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours\" name=\"colours\" type=\"radio\" value=\"red\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-2\" name=\"colours\" type=\"radio\" value=\"green\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-3\" name=\"colours\" type=\"radio\" value=\"blue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
232
232
|
},
|
|
233
233
|
{
|
|
234
234
|
"name": "with fieldset and error message",
|
|
@@ -255,8 +255,8 @@
|
|
|
255
255
|
}
|
|
256
256
|
]
|
|
257
257
|
},
|
|
258
|
-
"
|
|
259
|
-
"
|
|
258
|
+
"hidden": false,
|
|
259
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
260
260
|
},
|
|
261
261
|
{
|
|
262
262
|
"name": "with very long option text",
|
|
@@ -288,8 +288,8 @@
|
|
|
288
288
|
}
|
|
289
289
|
]
|
|
290
290
|
},
|
|
291
|
-
"
|
|
292
|
-
"
|
|
291
|
+
"hidden": false,
|
|
292
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Maecenas faucibus mollis interdum?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n\n\n \n \n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste\" name=\"waste\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-2\" name=\"waste\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-3\" name=\"waste\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
293
293
|
},
|
|
294
294
|
{
|
|
295
295
|
"name": "with conditional items",
|
|
@@ -325,8 +325,8 @@
|
|
|
325
325
|
}
|
|
326
326
|
]
|
|
327
327
|
},
|
|
328
|
-
"
|
|
329
|
-
"
|
|
328
|
+
"hidden": false,
|
|
329
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
330
330
|
},
|
|
331
331
|
{
|
|
332
332
|
"name": "with conditional items with special characters",
|
|
@@ -362,8 +362,8 @@
|
|
|
362
362
|
}
|
|
363
363
|
]
|
|
364
364
|
},
|
|
365
|
-
"
|
|
366
|
-
"
|
|
365
|
+
"hidden": false,
|
|
366
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"user.profile[contact-prefs]-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
367
367
|
},
|
|
368
368
|
{
|
|
369
369
|
"name": "with conditional item checked",
|
|
@@ -400,8 +400,8 @@
|
|
|
400
400
|
}
|
|
401
401
|
]
|
|
402
402
|
},
|
|
403
|
-
"
|
|
404
|
-
"
|
|
403
|
+
"hidden": false,
|
|
404
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
405
405
|
},
|
|
406
406
|
{
|
|
407
407
|
"name": "prechecked",
|
|
@@ -422,8 +422,8 @@
|
|
|
422
422
|
}
|
|
423
423
|
]
|
|
424
424
|
},
|
|
425
|
-
"
|
|
426
|
-
"
|
|
425
|
+
"hidden": false,
|
|
426
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div id=\"example-default-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
427
427
|
},
|
|
428
428
|
{
|
|
429
429
|
"name": "prechecked using value",
|
|
@@ -441,8 +441,8 @@
|
|
|
441
441
|
],
|
|
442
442
|
"value": "no"
|
|
443
443
|
},
|
|
444
|
-
"
|
|
445
|
-
"
|
|
444
|
+
"hidden": false,
|
|
445
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
446
446
|
},
|
|
447
447
|
{
|
|
448
448
|
"name": "with conditional items and pre-checked value",
|
|
@@ -479,8 +479,8 @@
|
|
|
479
479
|
],
|
|
480
480
|
"value": "text"
|
|
481
481
|
},
|
|
482
|
-
"
|
|
483
|
-
"
|
|
482
|
+
"hidden": false,
|
|
483
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" checked data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
484
484
|
},
|
|
485
485
|
{
|
|
486
486
|
"name": "with optional form-group classes showing group error",
|
|
@@ -520,8 +520,8 @@
|
|
|
520
520
|
}
|
|
521
521
|
]
|
|
522
522
|
},
|
|
523
|
-
"
|
|
524
|
-
"
|
|
523
|
+
"hidden": false,
|
|
524
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
525
525
|
},
|
|
526
526
|
{
|
|
527
527
|
"name": "small",
|
|
@@ -551,8 +551,8 @@
|
|
|
551
551
|
}
|
|
552
552
|
]
|
|
553
553
|
},
|
|
554
|
-
"
|
|
555
|
-
"
|
|
554
|
+
"hidden": false,
|
|
555
|
+
"html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
556
556
|
},
|
|
557
557
|
{
|
|
558
558
|
"name": "small with long text",
|
|
@@ -580,8 +580,8 @@
|
|
|
580
580
|
}
|
|
581
581
|
]
|
|
582
582
|
},
|
|
583
|
-
"
|
|
584
|
-
"
|
|
583
|
+
"hidden": false,
|
|
584
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Venenatis Condimentum\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo\" name=\"foo\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-2\" name=\"foo\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-3\" name=\"foo\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
585
585
|
},
|
|
586
586
|
{
|
|
587
587
|
"name": "small with error",
|
|
@@ -614,8 +614,8 @@
|
|
|
614
614
|
}
|
|
615
615
|
]
|
|
616
616
|
},
|
|
617
|
-
"
|
|
618
|
-
"
|
|
617
|
+
"hidden": false,
|
|
618
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-2-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <p id=\"how-contacted-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
619
619
|
},
|
|
620
620
|
{
|
|
621
621
|
"name": "small with hint",
|
|
@@ -648,8 +648,8 @@
|
|
|
648
648
|
}
|
|
649
649
|
]
|
|
650
650
|
},
|
|
651
|
-
"
|
|
652
|
-
"
|
|
651
|
+
"hidden": false,
|
|
652
|
+
"html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" aria-describedby=\"how-contacted-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n <div id=\"how-contacted-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for email address\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
653
653
|
},
|
|
654
654
|
{
|
|
655
655
|
"name": "small with disabled",
|
|
@@ -680,8 +680,8 @@
|
|
|
680
680
|
}
|
|
681
681
|
]
|
|
682
682
|
},
|
|
683
|
-
"
|
|
684
|
-
"
|
|
683
|
+
"hidden": false,
|
|
684
|
+
"html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
685
685
|
},
|
|
686
686
|
{
|
|
687
687
|
"name": "small with conditional reveal",
|
|
@@ -714,8 +714,8 @@
|
|
|
714
714
|
}
|
|
715
715
|
]
|
|
716
716
|
},
|
|
717
|
-
"
|
|
718
|
-
"
|
|
717
|
+
"hidden": false,
|
|
718
|
+
"html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
719
719
|
},
|
|
720
720
|
{
|
|
721
721
|
"name": "small inline",
|
|
@@ -743,8 +743,8 @@
|
|
|
743
743
|
}
|
|
744
744
|
]
|
|
745
745
|
},
|
|
746
|
-
"
|
|
747
|
-
"
|
|
746
|
+
"hidden": false,
|
|
747
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
748
748
|
},
|
|
749
749
|
{
|
|
750
750
|
"name": "small inline extreme",
|
|
@@ -800,8 +800,8 @@
|
|
|
800
800
|
}
|
|
801
801
|
]
|
|
802
802
|
},
|
|
803
|
-
"
|
|
804
|
-
"
|
|
803
|
+
"hidden": false,
|
|
804
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-4\" name=\"example\" type=\"radio\" value=\"modified\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-4\">\n modified\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-5\" name=\"example\" type=\"radio\" value=\"category\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-5\">\n category\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-6\" name=\"example\" type=\"radio\" value=\"votes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-6\">\n votes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-7\" name=\"example\" type=\"radio\" value=\"flavour\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-7\">\n flavour\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-8\" name=\"example\" type=\"radio\" value=\"hue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-8\">\n hue\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-9\" name=\"example\" type=\"radio\" value=\"happiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-9\">\n happiness\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-10\" name=\"example\" type=\"radio\" value=\"funkiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-10\">\n funkiness\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
805
805
|
},
|
|
806
806
|
{
|
|
807
807
|
"name": "small with a divider",
|
|
@@ -832,8 +832,8 @@
|
|
|
832
832
|
}
|
|
833
833
|
]
|
|
834
834
|
},
|
|
835
|
-
"
|
|
836
|
-
"
|
|
835
|
+
"hidden": false,
|
|
836
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
837
837
|
},
|
|
838
838
|
{
|
|
839
839
|
"name": "with idPrefix",
|
|
@@ -851,8 +851,8 @@
|
|
|
851
851
|
}
|
|
852
852
|
]
|
|
853
853
|
},
|
|
854
|
-
"
|
|
855
|
-
"
|
|
854
|
+
"hidden": false,
|
|
855
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix\" name=\"example-radio\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix-2\" name=\"example-radio\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
856
856
|
},
|
|
857
857
|
{
|
|
858
858
|
"name": "minimal items and name",
|
|
@@ -869,8 +869,8 @@
|
|
|
869
869
|
}
|
|
870
870
|
]
|
|
871
871
|
},
|
|
872
|
-
"
|
|
873
|
-
"
|
|
872
|
+
"hidden": true,
|
|
873
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
874
874
|
},
|
|
875
875
|
{
|
|
876
876
|
"name": "with falsey items",
|
|
@@ -889,15 +889,18 @@
|
|
|
889
889
|
}
|
|
890
890
|
]
|
|
891
891
|
},
|
|
892
|
-
"
|
|
893
|
-
"
|
|
892
|
+
"hidden": true,
|
|
893
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-4\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-4\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
894
894
|
},
|
|
895
895
|
{
|
|
896
896
|
"name": "fieldset with describedBy",
|
|
897
897
|
"options": {
|
|
898
898
|
"name": "example-name",
|
|
899
899
|
"fieldset": {
|
|
900
|
-
"describedBy": "some-id"
|
|
900
|
+
"describedBy": "some-id",
|
|
901
|
+
"legend": {
|
|
902
|
+
"text": "Which option?"
|
|
903
|
+
}
|
|
901
904
|
},
|
|
902
905
|
"items": [
|
|
903
906
|
{
|
|
@@ -910,8 +913,8 @@
|
|
|
910
913
|
}
|
|
911
914
|
]
|
|
912
915
|
},
|
|
913
|
-
"
|
|
914
|
-
"
|
|
916
|
+
"hidden": true,
|
|
917
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which option?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
915
918
|
},
|
|
916
919
|
{
|
|
917
920
|
"name": "attributes",
|
|
@@ -932,8 +935,8 @@
|
|
|
932
935
|
}
|
|
933
936
|
]
|
|
934
937
|
},
|
|
935
|
-
"
|
|
936
|
-
"
|
|
938
|
+
"hidden": true,
|
|
939
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\" data-attribute=\"value\" data-second-attribute=\"second-value\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
937
940
|
},
|
|
938
941
|
{
|
|
939
942
|
"name": "items with attributes",
|
|
@@ -958,8 +961,8 @@
|
|
|
958
961
|
}
|
|
959
962
|
]
|
|
960
963
|
},
|
|
961
|
-
"
|
|
962
|
-
"
|
|
964
|
+
"hidden": true,
|
|
965
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
963
966
|
},
|
|
964
967
|
{
|
|
965
968
|
"name": "with empty conditional",
|
|
@@ -979,8 +982,8 @@
|
|
|
979
982
|
}
|
|
980
983
|
]
|
|
981
984
|
},
|
|
982
|
-
"
|
|
983
|
-
"
|
|
985
|
+
"hidden": true,
|
|
986
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional\" name=\"example-conditional\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional-2\" name=\"example-conditional\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
984
987
|
},
|
|
985
988
|
{
|
|
986
989
|
"name": "label with classes",
|
|
@@ -996,8 +999,8 @@
|
|
|
996
999
|
}
|
|
997
1000
|
]
|
|
998
1001
|
},
|
|
999
|
-
"
|
|
1000
|
-
"
|
|
1002
|
+
"hidden": true,
|
|
1003
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-label-classes\" name=\"example-label-classes\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label bold\" for=\"example-label-classes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1001
1004
|
},
|
|
1002
1005
|
{
|
|
1003
1006
|
"name": "with hints on parent and items",
|
|
@@ -1028,8 +1031,8 @@
|
|
|
1028
1031
|
}
|
|
1029
1032
|
]
|
|
1030
1033
|
},
|
|
1031
|
-
"
|
|
1032
|
-
"
|
|
1034
|
+
"hidden": true,
|
|
1035
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-multiple-hints-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-multiple-hints-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints\" name=\"example-multiple-hints\" type=\"radio\" value=\"yes\" aria-describedby=\"example-multiple-hints-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-multiple-hints\">\n Yes\n </label>\n \n <div id=\"example-multiple-hints-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for yes option here\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints-2\" name=\"example-multiple-hints\" type=\"radio\" value=\"no\" aria-describedby=\"example-multiple-hints-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-multiple-hints-2\">\n No\n </label>\n \n <div id=\"example-multiple-hints-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for no option here\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1033
1036
|
},
|
|
1034
1037
|
{
|
|
1035
1038
|
"name": "with describedBy and hint",
|
|
@@ -1055,8 +1058,8 @@
|
|
|
1055
1058
|
}
|
|
1056
1059
|
]
|
|
1057
1060
|
},
|
|
1058
|
-
"
|
|
1059
|
-
"
|
|
1061
|
+
"hidden": true,
|
|
1062
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint-describedby-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint-describedby-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-hint-describedby\" name=\"example-hint-describedby\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-hint-describedby\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-hint-describedby-2\" name=\"example-hint-describedby\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-hint-describedby-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1060
1063
|
},
|
|
1061
1064
|
{
|
|
1062
1065
|
"name": "with error message",
|
|
@@ -1076,8 +1079,8 @@
|
|
|
1076
1079
|
}
|
|
1077
1080
|
]
|
|
1078
1081
|
},
|
|
1079
|
-
"
|
|
1080
|
-
"
|
|
1082
|
+
"hidden": true,
|
|
1083
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"example-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message\" name=\"example-error-message\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-2\" name=\"example-error-message\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1081
1084
|
},
|
|
1082
1085
|
{
|
|
1083
1086
|
"name": "with error message and idPrefix",
|
|
@@ -1098,8 +1101,8 @@
|
|
|
1098
1101
|
}
|
|
1099
1102
|
]
|
|
1100
1103
|
},
|
|
1101
|
-
"
|
|
1102
|
-
"
|
|
1104
|
+
"hidden": true,
|
|
1105
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"id-prefix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"id-prefix\" name=\"example-error-message\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"id-prefix\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"id-prefix-2\" name=\"example-error-message\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"id-prefix-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1103
1106
|
},
|
|
1104
1107
|
{
|
|
1105
1108
|
"name": "with hint and error message",
|
|
@@ -1127,8 +1130,8 @@
|
|
|
1127
1130
|
}
|
|
1128
1131
|
]
|
|
1129
1132
|
},
|
|
1130
|
-
"
|
|
1131
|
-
"
|
|
1133
|
+
"hidden": true,
|
|
1134
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <p id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint\" name=\"example-error-message-hint\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint-2\" name=\"example-error-message-hint\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1132
1135
|
},
|
|
1133
1136
|
{
|
|
1134
1137
|
"name": "with hint, error message and describedBy",
|
|
@@ -1157,8 +1160,8 @@
|
|
|
1157
1160
|
}
|
|
1158
1161
|
]
|
|
1159
1162
|
},
|
|
1160
|
-
"
|
|
1161
|
-
"
|
|
1163
|
+
"hidden": true,
|
|
1164
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <p id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint\" name=\"example-error-message-hint\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint-2\" name=\"example-error-message-hint\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1162
1165
|
},
|
|
1163
1166
|
{
|
|
1164
1167
|
"name": "label with attributes",
|
|
@@ -1177,8 +1180,8 @@
|
|
|
1177
1180
|
}
|
|
1178
1181
|
]
|
|
1179
1182
|
},
|
|
1180
|
-
"
|
|
1181
|
-
"
|
|
1183
|
+
"hidden": true,
|
|
1184
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-label-attributes\" name=\"with-label-attributes\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" data-attribute=\"value\" data-second-attribute=\"second-value\" for=\"with-label-attributes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1182
1185
|
},
|
|
1183
1186
|
{
|
|
1184
1187
|
"name": "fieldset params",
|
|
@@ -1208,8 +1211,8 @@
|
|
|
1208
1211
|
}
|
|
1209
1212
|
]
|
|
1210
1213
|
},
|
|
1211
|
-
"
|
|
1212
|
-
"
|
|
1214
|
+
"hidden": true,
|
|
1215
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-fieldset-params-hint\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-fieldset-params-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-fieldset-params\" name=\"example-fieldset-params\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-fieldset-params\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-fieldset-params-2\" name=\"example-fieldset-params\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-fieldset-params-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1213
1216
|
},
|
|
1214
1217
|
{
|
|
1215
1218
|
"name": "fieldset with html",
|
|
@@ -1231,8 +1234,8 @@
|
|
|
1231
1234
|
}
|
|
1232
1235
|
]
|
|
1233
1236
|
},
|
|
1234
|
-
"
|
|
1235
|
-
"
|
|
1237
|
+
"hidden": true,
|
|
1238
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have <b>you</b> changed your name?\n \n </legend>\n \n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-fieldset-html\" name=\"with-fieldset-html\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"with-fieldset-html\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-fieldset-html-2\" name=\"with-fieldset-html\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"with-fieldset-html-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1236
1239
|
},
|
|
1237
1240
|
{
|
|
1238
1241
|
"name": "with fieldset, error message and describedBy",
|
|
@@ -1260,8 +1263,8 @@
|
|
|
1260
1263
|
}
|
|
1261
1264
|
]
|
|
1262
1265
|
},
|
|
1263
|
-
"
|
|
1264
|
-
"
|
|
1266
|
+
"hidden": true,
|
|
1267
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <p id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1265
1268
|
},
|
|
1266
1269
|
{
|
|
1267
1270
|
"name": "item checked overrides value",
|
|
@@ -1284,8 +1287,8 @@
|
|
|
1284
1287
|
],
|
|
1285
1288
|
"value": "green"
|
|
1286
1289
|
},
|
|
1287
|
-
"
|
|
1288
|
-
"
|
|
1290
|
+
"hidden": true,
|
|
1291
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\"\n data-module=\"govuk-radios\">\n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colors\" name=\"colors\" type=\"radio\" value=\"red\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colors\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colors-2\" name=\"colors\" type=\"radio\" value=\"green\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colors-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colors-3\" name=\"colors\" type=\"radio\" value=\"blue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colors-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1289
1292
|
}
|
|
1290
1293
|
]
|
|
1291
1294
|
}
|