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
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
}
|
|
21
21
|
]
|
|
22
22
|
},
|
|
23
|
-
"
|
|
24
|
-
"
|
|
23
|
+
"hidden": false,
|
|
24
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
25
25
|
},
|
|
26
26
|
{
|
|
27
27
|
"name": "with pre-checked values",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"other"
|
|
50
50
|
]
|
|
51
51
|
},
|
|
52
|
-
"
|
|
53
|
-
"
|
|
52
|
+
"hidden": false,
|
|
53
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\" checked data-aria-controls=\"conditional-nationality-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-nationality-3\">\n <div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n Country\n </label>\n<input class=\"govuk-input\" id=\"other-country\" name=\"other-country\" type=\"text\" value=\"Ravka\">\n</div>\n\n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
56
|
"name": "with divider and None",
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
}
|
|
87
87
|
]
|
|
88
88
|
},
|
|
89
|
-
"
|
|
90
|
-
"
|
|
89
|
+
"hidden": false,
|
|
90
|
+
"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 Which types of waste do you transport regularly?\n </h1>\n \n </legend>\n \n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-2\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-3\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n \n \n <div class=\"govuk-checkboxes__divider\">or</div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-5\" name=\"with-divider-and-none\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-5\">\n None of these\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
93
|
"name": "with divider, None and conditional items",
|
|
@@ -130,8 +130,8 @@
|
|
|
130
130
|
}
|
|
131
131
|
]
|
|
132
132
|
},
|
|
133
|
-
"
|
|
134
|
-
"
|
|
133
|
+
"hidden": false,
|
|
134
|
+
"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 Do you have any access needs?\n </h1>\n \n </legend>\n \n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"accessible-toilets\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items\">\n Accessible toilets available\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-2\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"braille\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-2\">\n Braille translation service available\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-3\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"disabled-car-parking\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-3\">\n Disabled car parking available\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-4\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"another-access-need\" data-aria-controls=\"conditional-with-divider-and-none-and-conditional-items-4\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-4\">\n Another access need\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-with-divider-and-none-and-conditional-items-4\">\n <label class=\"govuk-label\" for=\"other-access-needs\">Other access needs</label>\n<textarea class=\"govuk-textarea govuk-!-width-one-third\" name=\"other-access-needs\" id=\"other-access-needs\"></textarea>\n\n </div>\n \n \n \n \n \n \n <div class=\"govuk-checkboxes__divider\">or</div>\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-divider-and-none-and-conditional-items-6\" name=\"with-divider-and-none-and-conditional-items\" type=\"checkbox\" value=\"none\" data-behaviour=\"exclusive\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-divider-and-none-and-conditional-items-6\">\n None of these\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
135
135
|
},
|
|
136
136
|
{
|
|
137
137
|
"name": "with id and name",
|
|
@@ -165,8 +165,8 @@
|
|
|
165
165
|
}
|
|
166
166
|
]
|
|
167
167
|
},
|
|
168
|
-
"
|
|
169
|
-
"
|
|
168
|
+
"hidden": false,
|
|
169
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"with-id-and-name-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"with-id-and-name-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"item_british\" name=\"british\" type=\"checkbox\" value=\"yes\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"item_british\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"item_irish\" name=\"irish\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"item_irish\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"with-id-and-name-3\" name=\"custom-name-scottish\" type=\"checkbox\" value=\"scottish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"with-id-and-name-3\">\n Scottish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
170
170
|
},
|
|
171
171
|
{
|
|
172
172
|
"name": "with hints on items",
|
|
@@ -200,8 +200,8 @@
|
|
|
200
200
|
}
|
|
201
201
|
]
|
|
202
202
|
},
|
|
203
|
-
"
|
|
204
|
-
"
|
|
203
|
+
"hidden": false,
|
|
204
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"government-gateway\" name=\"gateway\" type=\"checkbox\" value=\"gov-gateway\" aria-describedby=\"government-gateway-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"government-gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"government-gateway-item-hint\" class=\"govuk-hint govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"govuk-verify\" name=\"verify\" type=\"checkbox\" value=\"gov-verify\" aria-describedby=\"govuk-verify-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"govuk-verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"govuk-verify-item-hint\" class=\"govuk-hint govuk-checkboxes__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>"
|
|
205
205
|
},
|
|
206
206
|
{
|
|
207
207
|
"name": "with disabled item",
|
|
@@ -236,8 +236,8 @@
|
|
|
236
236
|
}
|
|
237
237
|
]
|
|
238
238
|
},
|
|
239
|
-
"
|
|
240
|
-
"
|
|
239
|
+
"hidden": false,
|
|
240
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"government-gateway\" name=\"gateway\" type=\"checkbox\" value=\"gov-gateway\" aria-describedby=\"government-gateway-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"government-gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"government-gateway-item-hint\" class=\"govuk-hint govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"govuk-verify\" name=\"verify\" type=\"checkbox\" value=\"gov-verify\" disabled aria-describedby=\"govuk-verify-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"govuk-verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"govuk-verify-item-hint\" class=\"govuk-hint govuk-checkboxes__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>"
|
|
241
241
|
},
|
|
242
242
|
{
|
|
243
243
|
"name": "with legend as a page heading",
|
|
@@ -268,8 +268,8 @@
|
|
|
268
268
|
}
|
|
269
269
|
]
|
|
270
270
|
},
|
|
271
|
-
"
|
|
272
|
-
"
|
|
271
|
+
"hidden": false,
|
|
272
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n Which types of waste do you transport regularly?\n </h1>\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
273
273
|
},
|
|
274
274
|
{
|
|
275
275
|
"name": "with a medium legend",
|
|
@@ -302,8 +302,8 @@
|
|
|
302
302
|
}
|
|
303
303
|
]
|
|
304
304
|
},
|
|
305
|
-
"
|
|
306
|
-
"
|
|
305
|
+
"hidden": false,
|
|
306
|
+
"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 govuk-fieldset__legend--m\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <div id=\"waste-hint\" class=\"govuk-hint\">\n Select all that apply\n </div>\n\n\n \n \n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select which types of waste you transport regularly\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
307
307
|
},
|
|
308
308
|
{
|
|
309
309
|
"name": "without fieldset",
|
|
@@ -324,8 +324,8 @@
|
|
|
324
324
|
}
|
|
325
325
|
]
|
|
326
326
|
},
|
|
327
|
-
"
|
|
328
|
-
"
|
|
327
|
+
"hidden": false,
|
|
328
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colours\" name=\"colours\" type=\"checkbox\" value=\"red\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colours\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colours-2\" name=\"colours\" type=\"checkbox\" value=\"green\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colours-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colours-3\" name=\"colours\" type=\"checkbox\" value=\"blue\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
329
329
|
},
|
|
330
330
|
{
|
|
331
331
|
"name": "with single option set 'aria-describedby' on input",
|
|
@@ -341,8 +341,8 @@
|
|
|
341
341
|
}
|
|
342
342
|
]
|
|
343
343
|
},
|
|
344
|
-
"
|
|
345
|
-
"
|
|
344
|
+
"hidden": false,
|
|
345
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
346
346
|
},
|
|
347
347
|
{
|
|
348
348
|
"name": "with single option (and hint) set 'aria-describedby' on input",
|
|
@@ -361,8 +361,8 @@
|
|
|
361
361
|
}
|
|
362
362
|
]
|
|
363
363
|
},
|
|
364
|
-
"
|
|
365
|
-
"
|
|
364
|
+
"hidden": false,
|
|
365
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
366
366
|
},
|
|
367
367
|
{
|
|
368
368
|
"name": "with fieldset and error message",
|
|
@@ -391,8 +391,8 @@
|
|
|
391
391
|
}
|
|
392
392
|
]
|
|
393
393
|
},
|
|
394
|
-
"
|
|
395
|
-
"
|
|
394
|
+
"hidden": false,
|
|
395
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <p id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"other\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n Citizen of another country\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
396
396
|
},
|
|
397
397
|
{
|
|
398
398
|
"name": "with error message",
|
|
@@ -421,8 +421,8 @@
|
|
|
421
421
|
}
|
|
422
422
|
]
|
|
423
423
|
},
|
|
424
|
-
"
|
|
425
|
-
"
|
|
424
|
+
"hidden": false,
|
|
425
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
426
426
|
},
|
|
427
427
|
{
|
|
428
428
|
"name": "with error message and hints on items",
|
|
@@ -460,8 +460,8 @@
|
|
|
460
460
|
}
|
|
461
461
|
]
|
|
462
462
|
},
|
|
463
|
-
"
|
|
464
|
-
"
|
|
463
|
+
"hidden": false,
|
|
464
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"waste-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which types of waste do you transport regularly?\n \n </legend>\n \n\n <p id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"animal\" aria-describedby=\"waste-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste\">\n Waste from animal carcasses\n </label>\n \n <div id=\"waste-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"mines\" aria-describedby=\"waste-2-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-2\">\n Waste from mines or quarries\n </label>\n \n <div id=\"waste-2-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"farm\" aria-describedby=\"waste-3-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"waste-3\">\n Farm or agricultural waste\n </label>\n \n <div id=\"waste-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Nullam id dolor id nibh ultricies vehicula ut id elit.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
465
465
|
},
|
|
466
466
|
{
|
|
467
467
|
"name": "with very long option text",
|
|
@@ -493,8 +493,8 @@
|
|
|
493
493
|
}
|
|
494
494
|
]
|
|
495
495
|
},
|
|
496
|
-
"
|
|
497
|
-
"
|
|
496
|
+
"hidden": false,
|
|
497
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste\" name=\"waste\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-2\" name=\"waste\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"waste-3\" name=\"waste\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__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>"
|
|
498
498
|
},
|
|
499
499
|
{
|
|
500
500
|
"name": "with conditional items",
|
|
@@ -530,8 +530,8 @@
|
|
|
530
530
|
}
|
|
531
531
|
]
|
|
532
532
|
},
|
|
533
|
-
"
|
|
534
|
-
"
|
|
533
|
+
"hidden": false,
|
|
534
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"with-conditional-items\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"with-conditional-items\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-3\" name=\"with-conditional-items\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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>"
|
|
535
535
|
},
|
|
536
536
|
{
|
|
537
537
|
"name": "with conditional items with special characters",
|
|
@@ -567,8 +567,8 @@
|
|
|
567
567
|
}
|
|
568
568
|
]
|
|
569
569
|
},
|
|
570
|
-
"
|
|
571
|
-
"
|
|
570
|
+
"hidden": false,
|
|
571
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]\" name=\"contact-prefs\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-user.profile[contact-prefs]\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-2\" name=\"contact-prefs\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-user.profile[contact-prefs]-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"user.profile[contact-prefs]-3\" name=\"contact-prefs\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-user.profile[contact-prefs]-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"user.profile[contact-prefs]-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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>"
|
|
572
572
|
},
|
|
573
573
|
{
|
|
574
574
|
"name": "with conditional item checked",
|
|
@@ -605,8 +605,8 @@
|
|
|
605
605
|
}
|
|
606
606
|
]
|
|
607
607
|
},
|
|
608
|
-
"
|
|
609
|
-
"
|
|
608
|
+
"hidden": false,
|
|
609
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked\">\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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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>"
|
|
610
610
|
},
|
|
611
611
|
{
|
|
612
612
|
"name": "with optional form-group classes showing group error",
|
|
@@ -646,8 +646,8 @@
|
|
|
646
646
|
}
|
|
647
647
|
]
|
|
648
648
|
},
|
|
649
|
-
"
|
|
650
|
-
"
|
|
649
|
+
"hidden": false,
|
|
650
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"email\" data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted-checked\">\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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional\" id=\"conditional-how-contacted-checked-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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"checkbox\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__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>"
|
|
651
651
|
},
|
|
652
652
|
{
|
|
653
653
|
"name": "small",
|
|
@@ -675,8 +675,8 @@
|
|
|
675
675
|
}
|
|
676
676
|
]
|
|
677
677
|
},
|
|
678
|
-
"
|
|
679
|
-
"
|
|
678
|
+
"hidden": false,
|
|
679
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
680
680
|
},
|
|
681
681
|
{
|
|
682
682
|
"name": "small with long text",
|
|
@@ -704,8 +704,8 @@
|
|
|
704
704
|
}
|
|
705
705
|
]
|
|
706
706
|
},
|
|
707
|
-
"
|
|
708
|
-
"
|
|
707
|
+
"hidden": false,
|
|
708
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"nullam\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"aenean\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"fusce\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-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>"
|
|
709
709
|
},
|
|
710
710
|
{
|
|
711
711
|
"name": "small with error",
|
|
@@ -736,8 +736,8 @@
|
|
|
736
736
|
}
|
|
737
737
|
]
|
|
738
738
|
},
|
|
739
|
-
"
|
|
740
|
-
"
|
|
739
|
+
"hidden": false,
|
|
740
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"nationality-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <p id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </p>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
741
741
|
},
|
|
742
742
|
{
|
|
743
743
|
"name": "small with hint",
|
|
@@ -768,8 +768,8 @@
|
|
|
768
768
|
}
|
|
769
769
|
]
|
|
770
770
|
},
|
|
771
|
-
"
|
|
772
|
-
"
|
|
771
|
+
"hidden": false,
|
|
772
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\" aria-describedby=\"nationality-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n <div id=\"nationality-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n hint for a thing\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
773
773
|
},
|
|
774
774
|
{
|
|
775
775
|
"name": "small with disabled",
|
|
@@ -798,8 +798,8 @@
|
|
|
798
798
|
}
|
|
799
799
|
]
|
|
800
800
|
},
|
|
801
|
-
"
|
|
802
|
-
"
|
|
801
|
+
"hidden": false,
|
|
802
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Filter by\n \n </legend>\n \n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"nationality\" type=\"checkbox\" value=\"a\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n a thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"nationality\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-3\" name=\"nationality\" type=\"checkbox\" value=\"c\" disabled>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-3\">\n this thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
803
803
|
},
|
|
804
804
|
{
|
|
805
805
|
"name": "small with conditional reveal",
|
|
@@ -826,8 +826,8 @@
|
|
|
826
826
|
}
|
|
827
827
|
]
|
|
828
828
|
},
|
|
829
|
-
"
|
|
830
|
-
"
|
|
829
|
+
"hidden": false,
|
|
830
|
+
"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-checkboxes govuk-checkboxes--small\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"checkbox\" value=\"a\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted\">\n a thing\n </label>\n \n </div>\n \n <div class=\"govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden\" id=\"conditional-how-contacted\">\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 \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"checkbox\" value=\"b\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"how-contacted-2\">\n another thing\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
831
831
|
},
|
|
832
832
|
{
|
|
833
833
|
"name": "with idPrefix",
|
|
@@ -845,8 +845,8 @@
|
|
|
845
845
|
}
|
|
846
846
|
]
|
|
847
847
|
},
|
|
848
|
-
"
|
|
849
|
-
"
|
|
848
|
+
"hidden": true,
|
|
849
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"nationality-2\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"nationality-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
850
850
|
},
|
|
851
851
|
{
|
|
852
852
|
"name": "with falsey values",
|
|
@@ -866,8 +866,8 @@
|
|
|
866
866
|
}
|
|
867
867
|
]
|
|
868
868
|
},
|
|
869
|
-
"
|
|
870
|
-
"
|
|
869
|
+
"hidden": true,
|
|
870
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-5\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-5\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
871
871
|
},
|
|
872
872
|
{
|
|
873
873
|
"name": "classes",
|
|
@@ -885,15 +885,18 @@
|
|
|
885
885
|
}
|
|
886
886
|
]
|
|
887
887
|
},
|
|
888
|
-
"
|
|
889
|
-
"
|
|
888
|
+
"hidden": true,
|
|
889
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes app-checkboxes--custom-modifier\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
890
890
|
},
|
|
891
891
|
{
|
|
892
892
|
"name": "with fieldset describedBy",
|
|
893
893
|
"options": {
|
|
894
894
|
"name": "example-name",
|
|
895
895
|
"fieldset": {
|
|
896
|
-
"describedBy": "some-id"
|
|
896
|
+
"describedBy": "some-id",
|
|
897
|
+
"legend": {
|
|
898
|
+
"text": "Which option?"
|
|
899
|
+
}
|
|
897
900
|
},
|
|
898
901
|
"items": [
|
|
899
902
|
{
|
|
@@ -909,8 +912,8 @@
|
|
|
909
912
|
"text": "If you have dual nationality, select all options that are relevant to you."
|
|
910
913
|
}
|
|
911
914
|
},
|
|
912
|
-
"
|
|
913
|
-
"
|
|
915
|
+
"hidden": true,
|
|
916
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-name-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Which option?\n \n </legend>\n \n\n <div id=\"example-name-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
914
917
|
},
|
|
915
918
|
{
|
|
916
919
|
"name": "attributes",
|
|
@@ -931,8 +934,8 @@
|
|
|
931
934
|
}
|
|
932
935
|
]
|
|
933
936
|
},
|
|
934
|
-
"
|
|
935
|
-
"
|
|
937
|
+
"hidden": true,
|
|
938
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\" data-attribute=\"value\" data-second-attribute=\"second-value\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
936
939
|
},
|
|
937
940
|
{
|
|
938
941
|
"name": "with checked item",
|
|
@@ -955,8 +958,8 @@
|
|
|
955
958
|
}
|
|
956
959
|
]
|
|
957
960
|
},
|
|
958
|
-
"
|
|
959
|
-
"
|
|
961
|
+
"hidden": true,
|
|
962
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-3\" name=\"example-name\" type=\"checkbox\" value=\"3\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-3\">\n Option 3\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
960
963
|
},
|
|
961
964
|
{
|
|
962
965
|
"name": "items with attributes",
|
|
@@ -981,8 +984,8 @@
|
|
|
981
984
|
}
|
|
982
985
|
]
|
|
983
986
|
},
|
|
984
|
-
"
|
|
985
|
-
"
|
|
987
|
+
"hidden": true,
|
|
988
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n Option 1\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"2\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Option 2\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
986
989
|
},
|
|
987
990
|
{
|
|
988
991
|
"name": "empty conditional",
|
|
@@ -998,8 +1001,8 @@
|
|
|
998
1001
|
}
|
|
999
1002
|
]
|
|
1000
1003
|
},
|
|
1001
|
-
"
|
|
1002
|
-
"
|
|
1004
|
+
"hidden": true,
|
|
1005
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-conditional\" name=\"example-conditional\" type=\"checkbox\" value=\"foo\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-conditional\">\n Foo\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1003
1006
|
},
|
|
1004
1007
|
{
|
|
1005
1008
|
"name": "with label classes",
|
|
@@ -1015,8 +1018,8 @@
|
|
|
1015
1018
|
}
|
|
1016
1019
|
]
|
|
1017
1020
|
},
|
|
1018
|
-
"
|
|
1019
|
-
"
|
|
1021
|
+
"hidden": true,
|
|
1022
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-label-classes\" name=\"example-label-classes\" type=\"checkbox\" value=\"yes\">\n <label class=\"govuk-label govuk-checkboxes__label bold\" for=\"example-label-classes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1020
1023
|
},
|
|
1021
1024
|
{
|
|
1022
1025
|
"name": "multiple hints",
|
|
@@ -1045,8 +1048,8 @@
|
|
|
1045
1048
|
}
|
|
1046
1049
|
]
|
|
1047
1050
|
},
|
|
1048
|
-
"
|
|
1049
|
-
"
|
|
1051
|
+
"hidden": true,
|
|
1052
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div id=\"example-multiple-hints-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-multiple-hints\" name=\"example-multiple-hints\" type=\"checkbox\" value=\"british\" aria-describedby=\"example-multiple-hints-hint example-multiple-hints-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-multiple-hints\">\n British\n </label>\n \n <div id=\"example-multiple-hints-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Hint for british option here\n </div>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-multiple-hints-2\" name=\"example-multiple-hints\" type=\"checkbox\" value=\"irish\" aria-describedby=\"example-multiple-hints-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-multiple-hints-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-multiple-hints-3\" name=\"example-multiple-hints\" type=\"checkbox\" value=\"other\" aria-describedby=\"example-multiple-hints-hint example-multiple-hints-3-item-hint\">\n \n \n <div id=\"example-multiple-hints-3-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Hint for other option here\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1050
1053
|
},
|
|
1051
1054
|
{
|
|
1052
1055
|
"name": "with error message and hint",
|
|
@@ -1074,8 +1077,8 @@
|
|
|
1074
1077
|
"text": "If you have dual nationality, select all options that are relevant to you."
|
|
1075
1078
|
}
|
|
1076
1079
|
},
|
|
1077
|
-
"
|
|
1078
|
-
"
|
|
1080
|
+
"hidden": true,
|
|
1081
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1079
1082
|
},
|
|
1080
1083
|
{
|
|
1081
1084
|
"name": "with error, hint and fieldset describedBy",
|
|
@@ -1104,8 +1107,8 @@
|
|
|
1104
1107
|
}
|
|
1105
1108
|
]
|
|
1106
1109
|
},
|
|
1107
|
-
"
|
|
1108
|
-
"
|
|
1110
|
+
"hidden": true,
|
|
1111
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n If you have dual nationality, select all options that are relevant to you.\n </div>\n\n\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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1109
1112
|
},
|
|
1110
1113
|
{
|
|
1111
1114
|
"name": "label with attributes",
|
|
@@ -1124,8 +1127,8 @@
|
|
|
1124
1127
|
}
|
|
1125
1128
|
]
|
|
1126
1129
|
},
|
|
1127
|
-
"
|
|
1128
|
-
"
|
|
1130
|
+
"hidden": true,
|
|
1131
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"1\">\n <label class=\"govuk-label govuk-checkboxes__label\" data-attribute=\"value\" data-second-attribute=\"second-value\" for=\"example-name\">\n <b>Option 1</b>\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1129
1132
|
},
|
|
1130
1133
|
{
|
|
1131
1134
|
"name": "fieldset params",
|
|
@@ -1155,8 +1158,8 @@
|
|
|
1155
1158
|
}
|
|
1156
1159
|
]
|
|
1157
1160
|
},
|
|
1158
|
-
"
|
|
1159
|
-
"
|
|
1161
|
+
"hidden": true,
|
|
1162
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-name-error\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your nationality?\n \n </legend>\n \n\n <p id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1160
1163
|
},
|
|
1161
1164
|
{
|
|
1162
1165
|
"name": "fieldset html params",
|
|
@@ -1178,8 +1181,8 @@
|
|
|
1178
1181
|
}
|
|
1179
1182
|
]
|
|
1180
1183
|
},
|
|
1181
|
-
"
|
|
1182
|
-
"
|
|
1184
|
+
"hidden": true,
|
|
1185
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n What is your <b>nationality</b>?\n \n </legend>\n \n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name\" name=\"example-name\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-name-2\" name=\"example-name\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-name-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1183
1186
|
},
|
|
1184
1187
|
{
|
|
1185
1188
|
"name": "with single option set 'aria-describedby' on input, and describedBy",
|
|
@@ -1196,8 +1199,8 @@
|
|
|
1196
1199
|
}
|
|
1197
1200
|
]
|
|
1198
1201
|
},
|
|
1199
|
-
"
|
|
1200
|
-
"
|
|
1202
|
+
"hidden": true,
|
|
1203
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c\" name=\"t-and-c\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c\">\n I agree to the terms and conditions\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1201
1204
|
},
|
|
1202
1205
|
{
|
|
1203
1206
|
"name": "with single option (and hint) set 'aria-describedby' on input, and describedBy",
|
|
@@ -1217,8 +1220,8 @@
|
|
|
1217
1220
|
}
|
|
1218
1221
|
]
|
|
1219
1222
|
},
|
|
1220
|
-
"
|
|
1221
|
-
"
|
|
1223
|
+
"hidden": true,
|
|
1224
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <p id=\"t-and-c-with-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </p>\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"t-and-c-with-hint\" name=\"t-and-c-with-hint\" type=\"checkbox\" value=\"yes\" aria-describedby=\"some-id t-and-c-with-hint-error t-and-c-with-hint-item-hint\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"t-and-c-with-hint\">\n I agree to the terms and conditions\n </label>\n \n <div id=\"t-and-c-with-hint-item-hint\" class=\"govuk-hint govuk-checkboxes__hint\">\n Go on, you know you want to!\n </div>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1222
1225
|
},
|
|
1223
1226
|
{
|
|
1224
1227
|
"name": "with error and idPrefix",
|
|
@@ -1235,8 +1238,8 @@
|
|
|
1235
1238
|
}
|
|
1236
1239
|
]
|
|
1237
1240
|
},
|
|
1238
|
-
"
|
|
1239
|
-
"
|
|
1241
|
+
"hidden": true,
|
|
1242
|
+
"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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"id-prefix\" name=\"name-of-checkboxes\" type=\"checkbox\" value=\"animal\" aria-describedby=\"id-prefix-error\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"id-prefix\">\n Waste from animal carcasses\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1240
1243
|
},
|
|
1241
1244
|
{
|
|
1242
1245
|
"name": "with error message and fieldset describedBy",
|
|
@@ -1262,8 +1265,8 @@
|
|
|
1262
1265
|
}
|
|
1263
1266
|
]
|
|
1264
1267
|
},
|
|
1265
|
-
"
|
|
1266
|
-
"
|
|
1268
|
+
"hidden": true,
|
|
1269
|
+
"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 What is your nationality?\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-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example\" name=\"example\" type=\"checkbox\" value=\"british\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example\">\n British\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-2\" name=\"example\" type=\"checkbox\" value=\"irish\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"example-2\">\n Irish\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1267
1270
|
},
|
|
1268
1271
|
{
|
|
1269
1272
|
"name": "item checked overrides values",
|
|
@@ -1289,8 +1292,8 @@
|
|
|
1289
1292
|
"green"
|
|
1290
1293
|
]
|
|
1291
1294
|
},
|
|
1292
|
-
"
|
|
1293
|
-
"
|
|
1295
|
+
"hidden": true,
|
|
1296
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\"\n data-module=\"govuk-checkboxes\">\n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colors\" name=\"colors\" type=\"checkbox\" value=\"red\" checked>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colors-2\" name=\"colors\" type=\"checkbox\" value=\"green\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colors-3\" name=\"colors\" type=\"checkbox\" value=\"blue\">\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colors-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
|
|
1294
1297
|
}
|
|
1295
1298
|
]
|
|
1296
1299
|
}
|