govuk_publishing_components 23.13.0 → 23.13.1
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/govuk_publishing_components/components/step-by-step-nav.js +32 -36
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
- data/config/locales/en.yml +2 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/all.js +57 -0
- data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
- data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
- data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
- data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
- data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
- data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
- data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
- data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
- data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
- data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
- data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
- data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
- data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
- data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
- data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
- data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
- data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
- data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
- data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
- data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
- data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
- data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
- data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
- data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
- data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
- data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
- data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +10 -2
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
"text": "Can you provide more detail?"
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
14
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
15
|
+
"hidden": false
|
|
15
16
|
},
|
|
16
17
|
{
|
|
17
18
|
"name": "with hint",
|
|
@@ -26,7 +27,8 @@
|
|
|
26
27
|
"text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
|
|
27
28
|
}
|
|
28
29
|
},
|
|
29
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint\">\n Can you provide more detail?\n </label>\n\n \n \n <div id=\"with-hint-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
30
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint\">\n Can you provide more detail?\n </label>\n\n \n \n <div id=\"with-hint-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
31
|
+
"hidden": false
|
|
30
32
|
},
|
|
31
33
|
{
|
|
32
34
|
"name": "with default value",
|
|
@@ -39,7 +41,8 @@
|
|
|
39
41
|
},
|
|
40
42
|
"value": "221B Baker Street\nLondon\nNW1 6XE\n"
|
|
41
43
|
},
|
|
42
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-default-value\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 100 characters\n</div>\n\n</div>"
|
|
44
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-default-value\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 100 characters\n</div>\n\n</div>",
|
|
45
|
+
"hidden": false
|
|
43
46
|
},
|
|
44
47
|
{
|
|
45
48
|
"name": "with default value exceeding limit",
|
|
@@ -55,7 +58,8 @@
|
|
|
55
58
|
"text": "Please do not exceed the maximum allowed limit"
|
|
56
59
|
}
|
|
57
60
|
},
|
|
58
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n\n\n \n \n <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
61
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n\n\n \n \n <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
62
|
+
"hidden": false
|
|
59
63
|
},
|
|
60
64
|
{
|
|
61
65
|
"name": "with custom rows",
|
|
@@ -68,7 +72,8 @@
|
|
|
68
72
|
},
|
|
69
73
|
"rows": 8
|
|
70
74
|
},
|
|
71
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"custom-rows\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
75
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"custom-rows\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
76
|
+
"hidden": false
|
|
72
77
|
},
|
|
73
78
|
{
|
|
74
79
|
"name": "with label as page heading",
|
|
@@ -81,7 +86,8 @@
|
|
|
81
86
|
"isPageHeading": true
|
|
82
87
|
}
|
|
83
88
|
},
|
|
84
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
89
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
90
|
+
"hidden": false
|
|
85
91
|
},
|
|
86
92
|
{
|
|
87
93
|
"name": "with word count",
|
|
@@ -93,7 +99,8 @@
|
|
|
93
99
|
"text": "Full address"
|
|
94
100
|
}
|
|
95
101
|
},
|
|
96
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"word-count\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 words\n</div>\n\n</div>"
|
|
102
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"word-count\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 words\n</div>\n\n</div>",
|
|
103
|
+
"hidden": false
|
|
97
104
|
},
|
|
98
105
|
{
|
|
99
106
|
"name": "with threshold",
|
|
@@ -106,65 +113,115 @@
|
|
|
106
113
|
"text": "Full address"
|
|
107
114
|
}
|
|
108
115
|
},
|
|
109
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-threshold\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
|
|
116
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-threshold\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
117
|
+
"hidden": false
|
|
110
118
|
},
|
|
111
119
|
{
|
|
112
120
|
"name": "classes",
|
|
113
121
|
"options": {
|
|
122
|
+
"id": "with-classes",
|
|
123
|
+
"name": "with-classes",
|
|
124
|
+
"maxlength": 10,
|
|
125
|
+
"label": {
|
|
126
|
+
"text": "With classes"
|
|
127
|
+
},
|
|
114
128
|
"classes": "app-character-count--custom-modifier"
|
|
115
129
|
},
|
|
116
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"
|
|
130
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n</div>\n\n <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
131
|
+
"hidden": true
|
|
117
132
|
},
|
|
118
133
|
{
|
|
119
134
|
"name": "attributes",
|
|
120
135
|
"options": {
|
|
136
|
+
"id": "with-attributes",
|
|
137
|
+
"name": "with-attributes",
|
|
138
|
+
"maxlength": 10,
|
|
139
|
+
"label": {
|
|
140
|
+
"text": "With attributes"
|
|
141
|
+
},
|
|
121
142
|
"attributes": {
|
|
122
143
|
"data-attribute": "my data value"
|
|
123
144
|
}
|
|
124
145
|
},
|
|
125
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"
|
|
146
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" aria-describedby=\"with-attributes-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n <div id=\"with-attributes-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
147
|
+
"hidden": true
|
|
126
148
|
},
|
|
127
149
|
{
|
|
128
150
|
"name": "formGroup with classes",
|
|
129
151
|
"options": {
|
|
152
|
+
"id": "with-formgroup",
|
|
153
|
+
"name": "with-formgroup",
|
|
154
|
+
"maxlength": 10,
|
|
155
|
+
"label": {
|
|
156
|
+
"text": "With formgroup"
|
|
157
|
+
},
|
|
130
158
|
"formGroup": {
|
|
131
159
|
"classes": "app-character-count--custom-modifier"
|
|
132
160
|
}
|
|
133
161
|
},
|
|
134
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"
|
|
162
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n <label class=\"govuk-label\" for=\"with-formgroup\">\n With formgroup\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-formgroup\" name=\"with-formgroup\" rows=\"5\" aria-describedby=\"with-formgroup-info\"></textarea>\n</div>\n\n <div id=\"with-formgroup-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
163
|
+
"hidden": true
|
|
135
164
|
},
|
|
136
165
|
{
|
|
137
166
|
"name": "custom classes on countMessage",
|
|
138
167
|
"options": {
|
|
168
|
+
"id": "with-custom-countmessage-class",
|
|
169
|
+
"name": "with-custom-countmessage-class",
|
|
170
|
+
"maxlength": 10,
|
|
171
|
+
"label": {
|
|
172
|
+
"text": "With custom countMessage class"
|
|
173
|
+
},
|
|
139
174
|
"countMessage": {
|
|
140
175
|
"classes": "app-custom-count-message"
|
|
141
176
|
}
|
|
142
177
|
},
|
|
143
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"
|
|
178
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-custom-countmessage-class\">\n With custom countMessage class\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-custom-countmessage-class\" name=\"with-custom-countmessage-class\" rows=\"5\" aria-describedby=\"with-custom-countmessage-class-info\"></textarea>\n</div>\n\n <div id=\"with-custom-countmessage-class-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
179
|
+
"hidden": true
|
|
144
180
|
},
|
|
145
181
|
{
|
|
146
182
|
"name": "spellcheck enabled",
|
|
147
183
|
"options": {
|
|
184
|
+
"id": "with-spellcheck",
|
|
185
|
+
"name": "with-spellcheck",
|
|
186
|
+
"maxlength": 10,
|
|
187
|
+
"label": {
|
|
188
|
+
"text": "With spellcheck"
|
|
189
|
+
},
|
|
148
190
|
"spellcheck": true
|
|
149
191
|
},
|
|
150
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"
|
|
192
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-spellcheck\">\n With spellcheck\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-spellcheck\" name=\"with-spellcheck\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"with-spellcheck-info\"></textarea>\n</div>\n\n <div id=\"with-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
193
|
+
"hidden": true
|
|
151
194
|
},
|
|
152
195
|
{
|
|
153
196
|
"name": "spellcheck disabled",
|
|
154
197
|
"options": {
|
|
198
|
+
"id": "without-spellcheck",
|
|
199
|
+
"name": "without-spellcheck",
|
|
200
|
+
"maxlength": 10,
|
|
201
|
+
"label": {
|
|
202
|
+
"text": "Without spellcheck"
|
|
203
|
+
},
|
|
155
204
|
"spellcheck": false
|
|
156
205
|
},
|
|
157
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"
|
|
206
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"without-spellcheck\">\n Without spellcheck\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"without-spellcheck\" name=\"without-spellcheck\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"without-spellcheck-info\"></textarea>\n</div>\n\n <div id=\"without-spellcheck-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
207
|
+
"hidden": true
|
|
158
208
|
},
|
|
159
209
|
{
|
|
160
210
|
"name": "custom classes with error message",
|
|
161
211
|
"options": {
|
|
212
|
+
"id": "with-custom-error-class",
|
|
213
|
+
"name": "with-custom-error-class",
|
|
214
|
+
"maxlength": 10,
|
|
215
|
+
"label": {
|
|
216
|
+
"text": "With custom error class"
|
|
217
|
+
},
|
|
162
218
|
"classes": "app-character-count--custom-modifier",
|
|
163
219
|
"errorMessage": {
|
|
164
220
|
"text": "Error message"
|
|
165
221
|
}
|
|
166
222
|
},
|
|
167
|
-
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"
|
|
223
|
+
"html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-custom-error-class\">\n With custom error class\n </label>\n\n\n \n \n <span id=\"with-custom-error-class-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"with-custom-error-class\" name=\"with-custom-error-class\" rows=\"5\" aria-describedby=\"with-custom-error-class-info with-custom-error-class-error\"></textarea>\n</div>\n\n <div id=\"with-custom-error-class-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>",
|
|
224
|
+
"hidden": true
|
|
168
225
|
}
|
|
169
226
|
]
|
|
170
227
|
}
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
{
|
|
39
39
|
"name": "threshold",
|
|
40
40
|
"type": "string",
|
|
41
|
-
"required":
|
|
41
|
+
"required": false,
|
|
42
42
|
"description": "The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default."
|
|
43
43
|
},
|
|
44
44
|
{
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
}
|
|
21
21
|
]
|
|
22
22
|
},
|
|
23
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>"
|
|
23
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>",
|
|
24
|
+
"hidden": false
|
|
24
25
|
},
|
|
25
26
|
{
|
|
26
27
|
"name": "with id and name",
|
|
@@ -54,11 +55,13 @@
|
|
|
54
55
|
}
|
|
55
56
|
]
|
|
56
57
|
},
|
|
57
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
58
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
59
|
+
"hidden": false
|
|
58
60
|
},
|
|
59
61
|
{
|
|
60
62
|
"name": "with hints on items",
|
|
61
63
|
"options": {
|
|
64
|
+
"name": "with-hints-on-items",
|
|
62
65
|
"fieldset": {
|
|
63
66
|
"legend": {
|
|
64
67
|
"text": "How do you want to sign in?",
|
|
@@ -86,7 +89,8 @@
|
|
|
86
89
|
}
|
|
87
90
|
]
|
|
88
91
|
},
|
|
89
|
-
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\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 \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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
92
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\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 \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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
93
|
+
"hidden": false
|
|
90
94
|
},
|
|
91
95
|
{
|
|
92
96
|
"name": "with disabled item",
|
|
@@ -108,7 +112,8 @@
|
|
|
108
112
|
}
|
|
109
113
|
]
|
|
110
114
|
},
|
|
111
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colours-3\" name=\"colours\" type=\"checkbox\" value=\"blue\" disabled>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n </div>\n\n</div>"
|
|
115
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"colours-3\" name=\"colours\" type=\"checkbox\" value=\"blue\" disabled>\n <label class=\"govuk-label govuk-checkboxes__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n </div>\n\n</div>",
|
|
116
|
+
"hidden": false
|
|
112
117
|
},
|
|
113
118
|
{
|
|
114
119
|
"name": "with legend as a page heading",
|
|
@@ -139,7 +144,8 @@
|
|
|
139
144
|
}
|
|
140
145
|
]
|
|
141
146
|
},
|
|
142
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
147
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
148
|
+
"hidden": false
|
|
143
149
|
},
|
|
144
150
|
{
|
|
145
151
|
"name": "with a medium legend",
|
|
@@ -172,7 +178,8 @@
|
|
|
172
178
|
}
|
|
173
179
|
]
|
|
174
180
|
},
|
|
175
|
-
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select which types of waste you transport regularly\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
181
|
+
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select which types of waste you transport regularly\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
182
|
+
"hidden": false
|
|
176
183
|
},
|
|
177
184
|
{
|
|
178
185
|
"name": "without fieldset",
|
|
@@ -193,7 +200,8 @@
|
|
|
193
200
|
}
|
|
194
201
|
]
|
|
195
202
|
},
|
|
196
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>"
|
|
203
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>",
|
|
204
|
+
"hidden": false
|
|
197
205
|
},
|
|
198
206
|
{
|
|
199
207
|
"name": "with single option set 'aria-describedby' on input",
|
|
@@ -209,7 +217,8 @@
|
|
|
209
217
|
}
|
|
210
218
|
]
|
|
211
219
|
},
|
|
212
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
220
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
221
|
+
"hidden": false
|
|
213
222
|
},
|
|
214
223
|
{
|
|
215
224
|
"name": "with single option (and hint) set 'aria-describedby' on input",
|
|
@@ -228,12 +237,13 @@
|
|
|
228
237
|
}
|
|
229
238
|
]
|
|
230
239
|
},
|
|
231
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span 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 </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
240
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span 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 </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
241
|
+
"hidden": false
|
|
232
242
|
},
|
|
233
243
|
{
|
|
234
244
|
"name": "with fieldset and error message",
|
|
235
245
|
"options": {
|
|
236
|
-
"name": "
|
|
246
|
+
"name": "nationality",
|
|
237
247
|
"errorMessage": {
|
|
238
248
|
"text": "Please accept the terms and conditions"
|
|
239
249
|
},
|
|
@@ -257,7 +267,8 @@
|
|
|
257
267
|
}
|
|
258
268
|
]
|
|
259
269
|
},
|
|
260
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"
|
|
270
|
+
"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 <span id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
271
|
+
"hidden": false
|
|
261
272
|
},
|
|
262
273
|
{
|
|
263
274
|
"name": "with error message",
|
|
@@ -286,7 +297,8 @@
|
|
|
286
297
|
}
|
|
287
298
|
]
|
|
288
299
|
},
|
|
289
|
-
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
300
|
+
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
301
|
+
"hidden": false
|
|
290
302
|
},
|
|
291
303
|
{
|
|
292
304
|
"name": "with error message and hints on items",
|
|
@@ -324,7 +336,8 @@
|
|
|
324
336
|
}
|
|
325
337
|
]
|
|
326
338
|
},
|
|
327
|
-
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
339
|
+
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
340
|
+
"hidden": false
|
|
328
341
|
},
|
|
329
342
|
{
|
|
330
343
|
"name": "with very long option text",
|
|
@@ -356,7 +369,8 @@
|
|
|
356
369
|
}
|
|
357
370
|
]
|
|
358
371
|
},
|
|
359
|
-
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
372
|
+
"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 <span id=\"waste-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
373
|
+
"hidden": false
|
|
360
374
|
},
|
|
361
375
|
{
|
|
362
376
|
"name": "with conditional items",
|
|
@@ -373,7 +387,7 @@
|
|
|
373
387
|
"value": "email",
|
|
374
388
|
"text": "Email",
|
|
375
389
|
"conditional": {
|
|
376
|
-
"html": "<label class=\"govuk-label\" for=\"context-email\">
|
|
390
|
+
"html": "<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"
|
|
377
391
|
}
|
|
378
392
|
},
|
|
379
393
|
{
|
|
@@ -392,7 +406,8 @@
|
|
|
392
406
|
}
|
|
393
407
|
]
|
|
394
408
|
},
|
|
395
|
-
"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\" 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=\"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\">
|
|
409
|
+
"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\" 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=\"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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
410
|
+
"hidden": false
|
|
396
411
|
},
|
|
397
412
|
{
|
|
398
413
|
"name": "with conditional item checked",
|
|
@@ -410,7 +425,7 @@
|
|
|
410
425
|
"text": "Email",
|
|
411
426
|
"checked": true,
|
|
412
427
|
"conditional": {
|
|
413
|
-
"html": "<label class=\"govuk-label\" for=\"context-email\">
|
|
428
|
+
"html": "<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"
|
|
414
429
|
}
|
|
415
430
|
},
|
|
416
431
|
{
|
|
@@ -429,7 +444,8 @@
|
|
|
429
444
|
}
|
|
430
445
|
]
|
|
431
446
|
},
|
|
432
|
-
"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\" 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=\"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\">
|
|
447
|
+
"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\" 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=\"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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
448
|
+
"hidden": false
|
|
433
449
|
},
|
|
434
450
|
{
|
|
435
451
|
"name": "with optional form-group classes showing group error",
|
|
@@ -449,7 +465,7 @@
|
|
|
449
465
|
"value": "email",
|
|
450
466
|
"text": "Email",
|
|
451
467
|
"conditional": {
|
|
452
|
-
"html": "<label class=\"govuk-label\" for=\"context-email\">
|
|
468
|
+
"html": "<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"
|
|
453
469
|
}
|
|
454
470
|
},
|
|
455
471
|
{
|
|
@@ -469,7 +485,8 @@
|
|
|
469
485
|
}
|
|
470
486
|
]
|
|
471
487
|
},
|
|
472
|
-
"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\" 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=\"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\">
|
|
488
|
+
"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\" 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=\"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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
489
|
+
"hidden": false
|
|
473
490
|
},
|
|
474
491
|
{
|
|
475
492
|
"name": "small",
|
|
@@ -497,7 +514,8 @@
|
|
|
497
514
|
}
|
|
498
515
|
]
|
|
499
516
|
},
|
|
500
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
517
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
518
|
+
"hidden": false
|
|
501
519
|
},
|
|
502
520
|
{
|
|
503
521
|
"name": "small with long text",
|
|
@@ -525,7 +543,8 @@
|
|
|
525
543
|
}
|
|
526
544
|
]
|
|
527
545
|
},
|
|
528
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
546
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
547
|
+
"hidden": false
|
|
529
548
|
},
|
|
530
549
|
{
|
|
531
550
|
"name": "small with error",
|
|
@@ -556,7 +575,8 @@
|
|
|
556
575
|
}
|
|
557
576
|
]
|
|
558
577
|
},
|
|
559
|
-
"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 <span id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </span>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
578
|
+
"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 <span id=\"nationality-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </span>\n\n <div class=\"govuk-checkboxes govuk-checkboxes--small\">\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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
579
|
+
"hidden": false
|
|
560
580
|
},
|
|
561
581
|
{
|
|
562
582
|
"name": "small with hint",
|
|
@@ -587,7 +607,8 @@
|
|
|
587
607
|
}
|
|
588
608
|
]
|
|
589
609
|
},
|
|
590
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
610
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
611
|
+
"hidden": false
|
|
591
612
|
},
|
|
592
613
|
{
|
|
593
614
|
"name": "small with disabled",
|
|
@@ -616,7 +637,8 @@
|
|
|
616
637
|
}
|
|
617
638
|
]
|
|
618
639
|
},
|
|
619
|
-
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
640
|
+
"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 \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 <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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
641
|
+
"hidden": false
|
|
620
642
|
},
|
|
621
643
|
{
|
|
622
644
|
"name": "small with conditional reveal",
|
|
@@ -643,7 +665,8 @@
|
|
|
643
665
|
}
|
|
644
666
|
]
|
|
645
667
|
},
|
|
646
|
-
"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\" 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=\"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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
668
|
+
"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\" 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=\"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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
669
|
+
"hidden": false
|
|
647
670
|
},
|
|
648
671
|
{
|
|
649
672
|
"name": "with idPrefix",
|
|
@@ -661,7 +684,8 @@
|
|
|
661
684
|
}
|
|
662
685
|
]
|
|
663
686
|
},
|
|
664
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>"
|
|
687
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>",
|
|
688
|
+
"hidden": true
|
|
665
689
|
},
|
|
666
690
|
{
|
|
667
691
|
"name": "with falsey values",
|
|
@@ -681,7 +705,8 @@
|
|
|
681
705
|
}
|
|
682
706
|
]
|
|
683
707
|
},
|
|
684
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>"
|
|
708
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>",
|
|
709
|
+
"hidden": true
|
|
685
710
|
},
|
|
686
711
|
{
|
|
687
712
|
"name": "classes",
|
|
@@ -699,7 +724,8 @@
|
|
|
699
724
|
}
|
|
700
725
|
]
|
|
701
726
|
},
|
|
702
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes app-checkboxes--custom-modifier\">\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 <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 </div>\n\n</div>"
|
|
727
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes app-checkboxes--custom-modifier\">\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 <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 </div>\n\n</div>",
|
|
728
|
+
"hidden": true
|
|
703
729
|
},
|
|
704
730
|
{
|
|
705
731
|
"name": "with fieldset describedBy",
|
|
@@ -722,7 +748,8 @@
|
|
|
722
748
|
"text": "If you have dual nationality, select all options that are relevant to you."
|
|
723
749
|
}
|
|
724
750
|
},
|
|
725
|
-
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-name-hint\">\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 \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 <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 </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
751
|
+
"html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-name-hint\">\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 \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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
752
|
+
"hidden": true
|
|
726
753
|
},
|
|
727
754
|
{
|
|
728
755
|
"name": "attributes",
|
|
@@ -743,7 +770,8 @@
|
|
|
743
770
|
}
|
|
744
771
|
]
|
|
745
772
|
},
|
|
746
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\" data-attribute=\"value\" data-second-attribute=\"second-value\">\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 <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 </div>\n\n</div>"
|
|
773
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\" data-attribute=\"value\" data-second-attribute=\"second-value\">\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 <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 </div>\n\n</div>",
|
|
774
|
+
"hidden": true
|
|
747
775
|
},
|
|
748
776
|
{
|
|
749
777
|
"name": "with checked item",
|
|
@@ -766,7 +794,8 @@
|
|
|
766
794
|
}
|
|
767
795
|
]
|
|
768
796
|
},
|
|
769
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>"
|
|
797
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 <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 </div>\n\n</div>",
|
|
798
|
+
"hidden": true
|
|
770
799
|
},
|
|
771
800
|
{
|
|
772
801
|
"name": "items with attributes",
|
|
@@ -791,7 +820,8 @@
|
|
|
791
820
|
}
|
|
792
821
|
]
|
|
793
822
|
},
|
|
794
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>"
|
|
823
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n\n</div>",
|
|
824
|
+
"hidden": true
|
|
795
825
|
},
|
|
796
826
|
{
|
|
797
827
|
"name": "empty conditional",
|
|
@@ -807,7 +837,8 @@
|
|
|
807
837
|
}
|
|
808
838
|
]
|
|
809
839
|
},
|
|
810
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
840
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
841
|
+
"hidden": true
|
|
811
842
|
},
|
|
812
843
|
{
|
|
813
844
|
"name": "with label classes",
|
|
@@ -823,7 +854,8 @@
|
|
|
823
854
|
}
|
|
824
855
|
]
|
|
825
856
|
},
|
|
826
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
857
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
858
|
+
"hidden": true
|
|
827
859
|
},
|
|
828
860
|
{
|
|
829
861
|
"name": "multiple hints",
|
|
@@ -845,18 +877,30 @@
|
|
|
845
877
|
"text": "Irish"
|
|
846
878
|
},
|
|
847
879
|
{
|
|
880
|
+
"value": "other",
|
|
848
881
|
"hint": {
|
|
849
882
|
"text": "Hint for other option here"
|
|
850
883
|
}
|
|
851
884
|
}
|
|
852
885
|
]
|
|
853
886
|
},
|
|
854
|
-
"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 \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 <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 <div class=\"govuk-checkboxes__item\">\n <input class=\"govuk-checkboxes__input\" id=\"example-multiple-hints-3\" name=\"example-multiple-hints\" type=\"checkbox\" value=\"\" 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 </div>\n\n</div>"
|
|
887
|
+
"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 \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 <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 <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 </div>\n\n</div>",
|
|
888
|
+
"hidden": true
|
|
855
889
|
},
|
|
856
890
|
{
|
|
857
891
|
"name": "with error message and hint",
|
|
858
892
|
"options": {
|
|
859
893
|
"name": "example",
|
|
894
|
+
"items": [
|
|
895
|
+
{
|
|
896
|
+
"value": "british",
|
|
897
|
+
"text": "British"
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
"value": "irish",
|
|
901
|
+
"text": "Irish"
|
|
902
|
+
}
|
|
903
|
+
],
|
|
860
904
|
"errorMessage": {
|
|
861
905
|
"text": "Please select an option"
|
|
862
906
|
},
|
|
@@ -869,7 +913,8 @@
|
|
|
869
913
|
"text": "If you have dual nationality, select all options that are relevant to you."
|
|
870
914
|
}
|
|
871
915
|
},
|
|
872
|
-
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
916
|
+
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
917
|
+
"hidden": true
|
|
873
918
|
},
|
|
874
919
|
{
|
|
875
920
|
"name": "with error, hint and fieldset describedBy",
|
|
@@ -886,9 +931,20 @@
|
|
|
886
931
|
},
|
|
887
932
|
"hint": {
|
|
888
933
|
"text": "If you have dual nationality, select all options that are relevant to you."
|
|
889
|
-
}
|
|
934
|
+
},
|
|
935
|
+
"items": [
|
|
936
|
+
{
|
|
937
|
+
"value": "british",
|
|
938
|
+
"text": "British"
|
|
939
|
+
},
|
|
940
|
+
{
|
|
941
|
+
"value": "irish",
|
|
942
|
+
"text": "Irish"
|
|
943
|
+
}
|
|
944
|
+
]
|
|
890
945
|
},
|
|
891
|
-
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
946
|
+
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
947
|
+
"hidden": true
|
|
892
948
|
},
|
|
893
949
|
{
|
|
894
950
|
"name": "label with attributes",
|
|
@@ -907,7 +963,8 @@
|
|
|
907
963
|
}
|
|
908
964
|
]
|
|
909
965
|
},
|
|
910
|
-
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
966
|
+
"html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
967
|
+
"hidden": true
|
|
911
968
|
},
|
|
912
969
|
{
|
|
913
970
|
"name": "fieldset params",
|
|
@@ -916,18 +973,29 @@
|
|
|
916
973
|
"errorMessage": {
|
|
917
974
|
"text": "Please select an option"
|
|
918
975
|
},
|
|
919
|
-
"legend": {
|
|
920
|
-
"text": "What is your nationality?"
|
|
921
|
-
},
|
|
922
976
|
"fieldset": {
|
|
977
|
+
"legend": {
|
|
978
|
+
"text": "What is your nationality?"
|
|
979
|
+
},
|
|
923
980
|
"classes": "app-fieldset--custom-modifier",
|
|
924
981
|
"attributes": {
|
|
925
982
|
"data-attribute": "value",
|
|
926
983
|
"data-second-attribute": "second-value"
|
|
927
984
|
}
|
|
928
|
-
}
|
|
985
|
+
},
|
|
986
|
+
"items": [
|
|
987
|
+
{
|
|
988
|
+
"value": "british",
|
|
989
|
+
"text": "British"
|
|
990
|
+
},
|
|
991
|
+
{
|
|
992
|
+
"value": "irish",
|
|
993
|
+
"text": "Irish"
|
|
994
|
+
}
|
|
995
|
+
]
|
|
929
996
|
},
|
|
930
|
-
"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\n <span id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
997
|
+
"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 <span id=\"example-name-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
998
|
+
"hidden": true
|
|
931
999
|
},
|
|
932
1000
|
{
|
|
933
1001
|
"name": "fieldset html params",
|
|
@@ -937,9 +1005,20 @@
|
|
|
937
1005
|
"legend": {
|
|
938
1006
|
"html": "What is your <b>nationality</b>?"
|
|
939
1007
|
}
|
|
940
|
-
}
|
|
1008
|
+
},
|
|
1009
|
+
"items": [
|
|
1010
|
+
{
|
|
1011
|
+
"value": "british",
|
|
1012
|
+
"text": "British"
|
|
1013
|
+
},
|
|
1014
|
+
{
|
|
1015
|
+
"value": "irish",
|
|
1016
|
+
"text": "Irish"
|
|
1017
|
+
}
|
|
1018
|
+
]
|
|
941
1019
|
},
|
|
942
|
-
"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 \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1020
|
+
"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 \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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
1021
|
+
"hidden": true
|
|
943
1022
|
},
|
|
944
1023
|
{
|
|
945
1024
|
"name": "with single option set 'aria-describedby' on input, and describedBy",
|
|
@@ -956,7 +1035,8 @@
|
|
|
956
1035
|
}
|
|
957
1036
|
]
|
|
958
1037
|
},
|
|
959
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
1038
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"t-and-c-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please accept the terms and conditions\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
1039
|
+
"hidden": true
|
|
960
1040
|
},
|
|
961
1041
|
{
|
|
962
1042
|
"name": "with single option (and hint) set 'aria-describedby' on input, and describedBy",
|
|
@@ -976,7 +1056,8 @@
|
|
|
976
1056
|
}
|
|
977
1057
|
]
|
|
978
1058
|
},
|
|
979
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span 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 </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
1059
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span 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 </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
1060
|
+
"hidden": true
|
|
980
1061
|
},
|
|
981
1062
|
{
|
|
982
1063
|
"name": "with error and idPrefix",
|
|
@@ -993,7 +1074,8 @@
|
|
|
993
1074
|
}
|
|
994
1075
|
]
|
|
995
1076
|
},
|
|
996
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"id-prefix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>"
|
|
1077
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"id-prefix-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 </div>\n\n</div>",
|
|
1078
|
+
"hidden": true
|
|
997
1079
|
},
|
|
998
1080
|
{
|
|
999
1081
|
"name": "with error message and fieldset describedBy",
|
|
@@ -1007,9 +1089,20 @@
|
|
|
1007
1089
|
"legend": {
|
|
1008
1090
|
"text": "What is your nationality?"
|
|
1009
1091
|
}
|
|
1010
|
-
}
|
|
1092
|
+
},
|
|
1093
|
+
"items": [
|
|
1094
|
+
{
|
|
1095
|
+
"value": "british",
|
|
1096
|
+
"text": "British"
|
|
1097
|
+
},
|
|
1098
|
+
{
|
|
1099
|
+
"value": "irish",
|
|
1100
|
+
"text": "Irish"
|
|
1101
|
+
}
|
|
1102
|
+
]
|
|
1011
1103
|
},
|
|
1012
|
-
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
|
|
1104
|
+
"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 <span id=\"example-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-checkboxes\">\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 <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 </div>\n \n\n</fieldset>\n\n\n</div>",
|
|
1105
|
+
"hidden": true
|
|
1013
1106
|
}
|
|
1014
1107
|
]
|
|
1015
1108
|
}
|