govuk_publishing_components 23.12.1 → 23.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (103) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/header.js +3 -0
  6. data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
  7. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
  8. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +66 -14
  9. data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
  10. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +8 -8
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +4 -0
  15. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
  16. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +17 -6
  17. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
  18. data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
  19. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  20. data/app/views/govuk_publishing_components/components/_document_list.html.erb +1 -1
  21. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +4 -2
  22. data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
  23. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  24. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
  25. data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
  26. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
  27. data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
  28. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  29. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +60 -1
  30. data/app/views/govuk_publishing_components/components/docs/document_list.yml +8 -0
  31. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
  32. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  33. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
  34. data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
  35. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
  36. data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
  37. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
  38. data/config/initializers/assets.rb +3 -0
  39. data/config/locales/cy.yml +6 -1
  40. data/config/locales/en.yml +8 -3
  41. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +124 -2
  42. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  43. data/lib/govuk_publishing_components/version.rb +1 -1
  44. data/node_modules/govuk-frontend/govuk/all.js +57 -0
  45. data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  47. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  48. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  49. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  50. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  51. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  52. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
  53. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  54. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  55. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  56. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  57. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  58. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  59. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
  60. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  61. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  62. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  64. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  65. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  66. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  67. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  68. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  69. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  70. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  71. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  72. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  73. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  74. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  75. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  76. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  77. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  83. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  84. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  85. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  86. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  87. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  88. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  89. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  90. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  91. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  92. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  93. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  94. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  95. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  96. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  97. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  98. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  99. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  100. data/node_modules/govuk-frontend/package.json +1 -1
  101. metadata +18 -4
  102. data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
  103. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
@@ -0,0 +1,68 @@
1
+ [
2
+ {
3
+ "name": "text",
4
+ "type": "string",
5
+ "required": true,
6
+ "description": "The text that displays in the notification banner. You can use any string with this option. If you set `html`, this option is not required and is ignored."
7
+ },
8
+ {
9
+ "name": "html",
10
+ "type": "string",
11
+ "required": true,
12
+ "description": "The HTML to use within the notification banner. You can use any string with this option. If you set `html`, `text` is not required and is ignored."
13
+ },
14
+ {
15
+ "name": "titleText",
16
+ "type": "string",
17
+ "required": false,
18
+ "description": "The title text that displays in the notification banner. You can use any string with this option. Use this option to set text that does not contain HTML. The available default values are 'Important', 'Success', and null:\n- if you do not set `type`, `titleText` defaults to 'Important'\n- if you set `type` to `success`, `titleText` defaults to 'Success'\n- if you set `titleHtml`, this option is ignored\n"
19
+ },
20
+ {
21
+ "name": "titleHtml",
22
+ "type": "string",
23
+ "required": false,
24
+ "description": "The title HTML to use within the notification banner. You can use any string with this option. Use this option to set text that contains HTML. If you set `titleHtml`, the `titleText` option is ignored."
25
+ },
26
+ {
27
+ "name": "titleHeadingLevel",
28
+ "type": "string",
29
+ "required": false,
30
+ "description": "Sets heading level for the title only. You can only use values between `1` and `6` with this option. The default is `2`."
31
+ },
32
+ {
33
+ "name": "type",
34
+ "type": "string",
35
+ "required": false,
36
+ "description": "The type of notification to render. You can use only the `success` or null values with this option. If you set `type` to `success`, the notification banner sets `role` to `alert`. JavaScript then moves the keyboard focus to the notification banner when the page loads. If you do not set `type`, the notification banner sets `role` to `region`."
37
+ },
38
+ {
39
+ "name": "role",
40
+ "type": "string",
41
+ "required": false,
42
+ "description": "Overrides the value of the `role` attribute for the notification banner. Defaults to `region`. If you set `type` to `success`, `role` defaults to `alert`."
43
+ },
44
+ {
45
+ "name": "titleId",
46
+ "type": "string",
47
+ "required": false,
48
+ "description": "The `id` for the banner title, and the `aria-labelledby` attribute in the banner. Defaults to `govuk-notification-banner-title`."
49
+ },
50
+ {
51
+ "name": "disableAutoFocus",
52
+ "type": "boolean",
53
+ "required": false,
54
+ "description": "If you set `type` to `success`, or `role` to `alert`, JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set `disableAutoFocus` to `true`."
55
+ },
56
+ {
57
+ "name": "classes",
58
+ "type": "string",
59
+ "required": false,
60
+ "description": "The classes that you want to add to the notification banner."
61
+ },
62
+ {
63
+ "name": "attributes",
64
+ "type": "object",
65
+ "required": false,
66
+ "description": "The HTML attributes that you want to add to the notification banner, for example, data attributes."
67
+ }
68
+ ]
@@ -0,0 +1,3 @@
1
+ {% macro govukNotificationBanner(params) %}
2
+ {%- include "./template.njk" -%}
3
+ {% endmacro %}
@@ -0,0 +1,61 @@
1
+ (function (global, factory) {
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
3
+ typeof define === 'function' && define.amd ? define('GOVUKFrontend', factory) :
4
+ (global.GOVUKFrontend = factory());
5
+ }(this, (function () { 'use strict';
6
+
7
+ function NotificationBanner ($module) {
8
+ this.$module = $module;
9
+ }
10
+
11
+ /**
12
+ * Initialise the component
13
+ */
14
+ NotificationBanner.prototype.init = function () {
15
+ var $module = this.$module;
16
+ // Check for module
17
+ if (!$module) {
18
+ return
19
+ }
20
+
21
+ this.setFocus();
22
+ };
23
+
24
+ /**
25
+ * Focus the element
26
+ *
27
+ * If `role="alert"` is set, focus the element to help some assistive technologies
28
+ * prioritise announcing it.
29
+ *
30
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
31
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
32
+ * with another element which should be focused when the page loads.
33
+ */
34
+ NotificationBanner.prototype.setFocus = function () {
35
+ var $module = this.$module;
36
+
37
+ if ($module.getAttribute('data-disable-auto-focus') === 'true') {
38
+ return
39
+ }
40
+
41
+ if ($module.getAttribute('role') !== 'alert') {
42
+ return
43
+ }
44
+
45
+ // Set tabindex to -1 to make the element focusable with JavaScript.
46
+ // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
47
+ // loaded.
48
+ if (!$module.getAttribute('tabindex')) {
49
+ $module.setAttribute('tabindex', '-1');
50
+
51
+ $module.addEventListener('blur', function () {
52
+ $module.removeAttribute('tabindex');
53
+ });
54
+ }
55
+
56
+ $module.focus();
57
+ };
58
+
59
+ return NotificationBanner;
60
+
61
+ })));
@@ -0,0 +1,47 @@
1
+ {%- if params.type == "success" %}
2
+ {% set successBanner = true %}
3
+ {% endif %}
4
+
5
+ {%- if successBanner %}
6
+ {% set typeClass = "govuk-notification-banner--" + params.type %}
7
+ {% endif %}
8
+
9
+ {% if params.role %}
10
+ {% set role = params.role %}
11
+ {% elif successBanner %}
12
+ {# If type is success, add `role="alert"` to prioritise the information in the notification banner to users of assistive technologies #}
13
+ {% set role = "alert" %}
14
+ {% else %}
15
+ {# Otherwise add `role="region"` to make the notification banner a landmark to help users of assistive technologies to navigate to the banner #}
16
+ {% set role = "region" %}
17
+ {% endif %}
18
+
19
+ {%- if params.titleHtml %}
20
+ {% set title = params.titleHtml | safe %}
21
+ {%- elif params.titleText %}
22
+ {% set title = params.titleText %}
23
+ {%- elif successBanner %}
24
+ {% set title = "Success" %}
25
+ {%- else %}
26
+ {% set title = "Important" %}
27
+ {%- endif -%}
28
+
29
+ <div class="govuk-notification-banner{% if typeClass %} {{ typeClass }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" role="{{ role }}"
30
+ aria-labelledby="{{ params.titleId | default('govuk-notification-banner-title')}}"
31
+ data-module="govuk-notification-banner"
32
+ {%- if params.disableAutoFocus %} data-disable-auto-focus="true"{% endif %}
33
+ {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
34
+ <div class="govuk-notification-banner__header">
35
+ <h{{ params.titleHeadingLevel | default(2) }} class="govuk-notification-banner__title" id="{{ params.titleId | default('govuk-notification-banner-title') }}" >
36
+ {{ title }}
37
+ </h{{ params.titleHeadingLevel | default(2) }}>
38
+ </div>
39
+ <div class="govuk-notification-banner__content">
40
+ {%- if params.html -%}
41
+ {{ params.html | safe }}
42
+ {%- elif params.text -%}
43
+ {# Set default style for single line content #}
44
+ <p class="govuk-notification-banner__heading">{{ params.text }}</p>
45
+ {%- endif -%}
46
+ </div>
47
+ </div>
@@ -7,7 +7,8 @@
7
7
  "titleHtml": "Application complete",
8
8
  "text": "Your reference number: HDJ2123F"
9
9
  },
10
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n \n</div>"
10
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n \n</div>",
11
+ "hidden": false
11
12
  },
12
13
  {
13
14
  "name": "custom heading level",
@@ -16,59 +17,75 @@
16
17
  "headingLevel": 2,
17
18
  "text": "Your reference number: HDJ2123F"
18
19
  },
19
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h2 class=\"govuk-panel__title\">\n Application complete\n </h2>\n \n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n \n</div>"
20
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h2 class=\"govuk-panel__title\">\n Application complete\n </h2>\n \n <div class=\"govuk-panel__body\">\n Your reference number: HDJ2123F\n </div>\n \n</div>",
21
+ "hidden": false
20
22
  },
21
23
  {
22
24
  "name": "title html as text",
23
25
  "options": {
24
- "titleText": "Application <strong>not</strong> complete"
26
+ "titleText": "Application <strong>not</strong> complete",
27
+ "text": "Please complete form 1"
25
28
  },
26
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application &lt;strong&gt;not&lt;/strong&gt; complete\n </h1>\n \n</div>"
29
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application &lt;strong&gt;not&lt;/strong&gt; complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Please complete form 1\n </div>\n \n</div>",
30
+ "hidden": true
27
31
  },
28
32
  {
29
33
  "name": "title html",
30
34
  "options": {
31
- "titleHtml": "Application <strong>not</strong> complete"
35
+ "titleHtml": "Application <strong>not</strong> complete",
36
+ "html": "Please complete <strong>form 1</strong>"
32
37
  },
33
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application <strong>not</strong> complete\n </h1>\n \n</div>"
38
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application <strong>not</strong> complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Please complete <strong>form 1</strong>\n </div>\n \n</div>",
39
+ "hidden": true
34
40
  },
35
41
  {
36
42
  "name": "body html as text",
37
43
  "options": {
44
+ "titleText": "Application complete",
38
45
  "text": "Your reference number<br><strong>HDJ2123F</strong>"
39
46
  },
40
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n \n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n </div>\n \n</div>"
47
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number&lt;br&gt;&lt;strong&gt;HDJ2123F&lt;/strong&gt;\n </div>\n \n</div>",
48
+ "hidden": true
41
49
  },
42
50
  {
43
51
  "name": "body html",
44
52
  "options": {
53
+ "titleText": "Application complete",
45
54
  "html": "Your reference number<br><strong>HDJ2123F</strong>"
46
55
  },
47
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n \n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number<br><strong>HDJ2123F</strong>\n </div>\n \n</div>"
56
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number<br><strong>HDJ2123F</strong>\n </div>\n \n</div>",
57
+ "hidden": true
48
58
  },
49
59
  {
50
60
  "name": "classes",
51
61
  "options": {
62
+ "titleText": "Application complete",
63
+ "text": "Your reference number is HDJ2123F",
52
64
  "classes": "extra-class one-more-class"
53
65
  },
54
- "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n <h1 class=\"govuk-panel__title\">\n \n </h1>\n \n</div>"
66
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation extra-class one-more-class\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number is HDJ2123F\n </div>\n \n</div>",
67
+ "hidden": true
55
68
  },
56
69
  {
57
70
  "name": "attributes",
58
71
  "options": {
72
+ "titleText": "Application complete",
73
+ "text": "Your reference number is HDJ2123F",
59
74
  "attributes": {
60
- "first-attribute": true,
61
- "second-attribute": false
75
+ "first-attribute": "foo",
76
+ "second-attribute": "bar"
62
77
  }
63
78
  },
64
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"true\" second-attribute=\"false\">\n <h1 class=\"govuk-panel__title\">\n \n </h1>\n \n</div>"
79
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\" first-attribute=\"foo\" second-attribute=\"bar\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n <div class=\"govuk-panel__body\">\n Your reference number is HDJ2123F\n </div>\n \n</div>",
80
+ "hidden": true
65
81
  },
66
82
  {
67
83
  "name": "title with no body text",
68
84
  "options": {
69
85
  "titleText": "Application complete"
70
86
  },
71
- "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n</div>"
87
+ "html": "<div class=\"govuk-panel govuk-panel--confirmation\">\n <h1 class=\"govuk-panel__title\">\n Application complete\n </h1>\n \n</div>",
88
+ "hidden": true
72
89
  }
73
90
  ]
74
91
  }
@@ -9,57 +9,68 @@
9
9
  },
10
10
  "html": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
11
11
  },
12
- "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it.\n </span>\n </p>\n</div>"
12
+ "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it.\n </span>\n </p>\n</div>",
13
+ "hidden": false
13
14
  },
14
15
  {
15
16
  "name": "classes",
16
17
  "options": {
18
+ "text": "This is a new service – your feedback will help us to improve it",
17
19
  "classes": "extra-class one-more-class"
18
20
  },
19
- "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n \n </span>\n </p>\n</div>"
21
+ "html": "<div class=\"govuk-phase-banner extra-class one-more-class\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
22
+ "hidden": true
20
23
  },
21
24
  {
22
25
  "name": "text",
23
26
  "options": {
24
27
  "text": "This is a new service – your feedback will help us to improve it"
25
28
  },
26
- "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>"
29
+ "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
30
+ "hidden": true
27
31
  },
28
32
  {
29
33
  "name": "html as text",
30
34
  "options": {
31
35
  "text": "This is a new service - your <a href=\"#\" class=\"govuk-link\">feedback</a> will help us to improve it."
32
36
  },
33
- "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service - your &lt;a href=&quot;#&quot; class=&quot;govuk-link&quot;&gt;feedback&lt;/a&gt; will help us to improve it.\n </span>\n </p>\n</div>"
37
+ "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service - your &lt;a href=&quot;#&quot; class=&quot;govuk-link&quot;&gt;feedback&lt;/a&gt; will help us to improve it.\n </span>\n </p>\n</div>",
38
+ "hidden": true
34
39
  },
35
40
  {
36
41
  "name": "attributes",
37
42
  "options": {
43
+ "text": "This is a new service – your feedback will help us to improve it",
38
44
  "attributes": {
39
- "first-attribute": true,
40
- "second-attribute": false
45
+ "first-attribute": "foo",
46
+ "second-attribute": "bar"
41
47
  }
42
48
  },
43
- "html": "<div class=\"govuk-phase-banner\" first-attribute=\"true\" second-attribute=\"false\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n \n </span>\n </p>\n</div>"
49
+ "html": "<div class=\"govuk-phase-banner\" first-attribute=\"foo\" second-attribute=\"bar\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n \n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
50
+ "hidden": true
44
51
  },
45
52
  {
46
53
  "name": "tag html",
47
54
  "options": {
55
+ "text": "This is a new service – your feedback will help us to improve it",
48
56
  "tag": {
49
57
  "html": "<em>alpha</em>"
50
58
  }
51
59
  },
52
- "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n <em>alpha</em>\n </strong>\n <span class=\"govuk-phase-banner__text\">\n \n </span>\n </p>\n</div>"
60
+ "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag\">\n <em>alpha</em>\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
61
+ "hidden": true
53
62
  },
54
63
  {
55
64
  "name": "tag classes",
56
65
  "options": {
66
+ "text": "This is a new service – your feedback will help us to improve it",
57
67
  "tag": {
58
68
  "classes": "govuk-tag--inactive",
59
69
  "text": "alpha"
60
70
  }
61
71
  },
62
- "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n \n </span>\n </p>\n</div>"
72
+ "html": "<div class=\"govuk-phase-banner\">\n <p class=\"govuk-phase-banner__content\">\n <strong class=\"govuk-tag govuk-phase-banner__content__tag govuk-tag--inactive\">\n alpha\n </strong>\n <span class=\"govuk-phase-banner__text\">\n This is a new service – your feedback will help us to improve it\n </span>\n </p>\n</div>",
73
+ "hidden": true
63
74
  }
64
75
  ]
65
76
  }
@@ -20,7 +20,8 @@
20
20
  }
21
21
  ]
22
22
  },
23
- "html": "<div class=\"govuk-form-group\">\n\n <div id=\"example-default-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
23
+ "html": "<div class=\"govuk-form-group\">\n\n <div id=\"example-default-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default\" name=\"example-default\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-default-2\" name=\"example-default\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-default-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
24
+ "hidden": false
24
25
  },
25
26
  {
26
27
  "name": "inline",
@@ -48,7 +49,8 @@
48
49
  }
49
50
  ]
50
51
  },
51
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
52
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
53
+ "hidden": false
52
54
  },
53
55
  {
54
56
  "name": "with disabled",
@@ -76,7 +78,8 @@
76
78
  }
77
79
  ]
78
80
  },
79
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-disabled-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-disabled-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-disabled\" name=\"example-disabled\" type=\"radio\" value=\"yes\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-disabled\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-disabled-2\" name=\"example-disabled\" type=\"radio\" value=\"no\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-disabled-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
81
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-disabled-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-disabled-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-disabled\" name=\"example-disabled\" type=\"radio\" value=\"yes\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-disabled\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-disabled-2\" name=\"example-disabled\" type=\"radio\" value=\"no\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-disabled-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
82
+ "hidden": false
80
83
  },
81
84
  {
82
85
  "name": "with legend as page heading",
@@ -104,7 +107,8 @@
104
107
  }
105
108
  ]
106
109
  },
107
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n Which part of the Housing Act was your licence issued under?\n </h1>\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
110
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n \n <h1 class=\"govuk-fieldset__heading\">\n Which part of the Housing Act was your licence issued under?\n </h1>\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
111
+ "hidden": false
108
112
  },
109
113
  {
110
114
  "name": "with a medium legend",
@@ -131,7 +135,8 @@
131
135
  }
132
136
  ]
133
137
  },
134
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n \n Which part of the Housing Act was your licence issued under?\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
138
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"housing-act-hint\">\n \n <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n \n Which part of the Housing Act was your licence issued under?\n \n </legend>\n \n\n <div id=\"housing-act-hint\" class=\"govuk-hint\">\n Select one of the options below.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act\" name=\"housing-act\" type=\"radio\" value=\"part-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 2 of the Housing Act 2004</span> For properties that are 3 or more stories high and occupied by 5 or more people\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"housing-act-2\" name=\"housing-act\" type=\"radio\" value=\"part-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"housing-act-2\">\n <span class=\"govuk-heading-s govuk-!-margin-bottom-1\">Part 3 of the Housing Act 2004</span> For properties that are within a geographical area defined by a local council\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
139
+ "hidden": false
135
140
  },
136
141
  {
137
142
  "name": "with a divider",
@@ -161,7 +166,8 @@
161
166
  }
162
167
  ]
163
168
  },
164
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
169
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
170
+ "hidden": false
165
171
  },
166
172
  {
167
173
  "name": "with hints on items",
@@ -193,7 +199,8 @@
193
199
  }
194
200
  ]
195
201
  },
196
- "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-radios\">\n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"gateway\" name=\"gov\" type=\"radio\" value=\"gateway\" aria-describedby=\"gateway-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"gateway-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"verify\" name=\"gov\" type=\"radio\" value=\"verify\" aria-describedby=\"verify-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"verify-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
202
+ "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-radios\">\n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"gateway\" name=\"gov\" type=\"radio\" value=\"gateway\" aria-describedby=\"gateway-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"gateway\">\n Sign in with Government Gateway\n </label>\n \n <div id=\"gateway-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before.\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"verify\" name=\"gov\" type=\"radio\" value=\"verify\" aria-describedby=\"verify-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"verify\">\n Sign in with GOV.UK Verify\n </label>\n \n <div id=\"verify-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity.\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
203
+ "hidden": false
197
204
  },
198
205
  {
199
206
  "name": "without fieldset",
@@ -214,7 +221,8 @@
214
221
  }
215
222
  ]
216
223
  },
217
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours\" name=\"colours\" type=\"radio\" value=\"red\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-2\" name=\"colours\" type=\"radio\" value=\"green\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-3\" name=\"colours\" type=\"radio\" value=\"blue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
224
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours\" name=\"colours\" type=\"radio\" value=\"red\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours\">\n Red\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-2\" name=\"colours\" type=\"radio\" value=\"green\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-2\">\n Green\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"colours-3\" name=\"colours\" type=\"radio\" value=\"blue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"colours-3\">\n Blue\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
225
+ "hidden": false
218
226
  },
219
227
  {
220
228
  "name": "with fieldset and error message",
@@ -241,7 +249,8 @@
241
249
  }
242
250
  ]
243
251
  },
244
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
252
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
253
+ "hidden": false
245
254
  },
246
255
  {
247
256
  "name": "with very long option text",
@@ -273,7 +282,8 @@
273
282
  }
274
283
  ]
275
284
  },
276
- "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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste\" name=\"waste\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-2\" name=\"waste\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-3\" name=\"waste\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
285
+ "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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste\" name=\"waste\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-2\" name=\"waste\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"waste-3\" name=\"waste\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"waste-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
286
+ "hidden": false
277
287
  },
278
288
  {
279
289
  "name": "with conditional items",
@@ -290,7 +300,7 @@
290
300
  "value": "email",
291
301
  "text": "Email",
292
302
  "conditional": {
293
- "html": "<label class=\"govuk-label\" for=\"context-email\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
303
+ "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"
294
304
  }
295
305
  },
296
306
  {
@@ -309,7 +319,8 @@
309
319
  }
310
320
  ]
311
321
  },
312
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Mobile phone number</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 <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
322
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
323
+ "hidden": false
313
324
  },
314
325
  {
315
326
  "name": "inline with conditional items",
@@ -346,7 +357,8 @@
346
357
  }
347
358
  ]
348
359
  },
349
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--inline govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
360
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--inline govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted\" name=\"how-contacted\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-3\" name=\"how-contacted\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
361
+ "hidden": false
350
362
  },
351
363
  {
352
364
  "name": "with conditional item checked",
@@ -383,7 +395,8 @@
383
395
  }
384
396
  ]
385
397
  },
386
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
398
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked\" name=\"how-contacted-checked\" type=\"radio\" value=\"email\" checked data-aria-controls=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-checked\">\n <label class=\"govuk-label\" for=\"context-email\">Email</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-2\" name=\"how-contacted-checked\" type=\"radio\" value=\"phone\" data-aria-controls=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-checked-3\" name=\"how-contacted-checked\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-checked-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-checked-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
399
+ "hidden": false
387
400
  },
388
401
  {
389
402
  "name": "with optional form-group classes showing group error",
@@ -403,7 +416,7 @@
403
416
  "value": "email",
404
417
  "text": "Email",
405
418
  "conditional": {
406
- "html": "<label class=\"govuk-label\" for=\"context-email\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
419
+ "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"
407
420
  }
408
421
  },
409
422
  {
@@ -423,7 +436,8 @@
423
436
  }
424
437
  ]
425
438
  },
426
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Mobile phone number</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 <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
439
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Email address</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\" checked data-aria-controls=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional\" id=\"conditional-how-contacted-2-2\">\n <label class=\"govuk-label\" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\"govuk-error-message\">Problem with input</span>\n<input class=\"govuk-input govuk-input--error govuk-!-width-one-third\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" data-aria-controls=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2-3\">\n <label class=\"govuk-label\" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n\n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
440
+ "hidden": false
427
441
  },
428
442
  {
429
443
  "name": "small",
@@ -453,7 +467,8 @@
453
467
  }
454
468
  ]
455
469
  },
456
- "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
470
+ "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
471
+ "hidden": false
457
472
  },
458
473
  {
459
474
  "name": "small with long text",
@@ -481,7 +496,8 @@
481
496
  }
482
497
  ]
483
498
  },
484
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Venenatis Condimentum\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo\" name=\"foo\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-2\" name=\"foo\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-3\" name=\"foo\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
499
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Venenatis Condimentum\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo\" name=\"foo\" type=\"radio\" value=\"nullam\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo\">\n Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-2\" name=\"foo\" type=\"radio\" value=\"aenean\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-2\">\n Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"foo-3\" name=\"foo\" type=\"radio\" value=\"fusce\">\n <label class=\"govuk-label govuk-radios__label\" for=\"foo-3\">\n Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis.\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
500
+ "hidden": false
485
501
  },
486
502
  {
487
503
  "name": "small with error",
@@ -514,7 +530,8 @@
514
530
  }
515
531
  ]
516
532
  },
517
- "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-2-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <span id=\"how-contacted-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </span>\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
533
+ "html": "<div class=\"govuk-form-group govuk-form-group--error govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"how-contacted-2-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <span id=\"how-contacted-2-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Select a thing\n </span>\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
534
+ "hidden": false
518
535
  },
519
536
  {
520
537
  "name": "small with hint",
@@ -547,7 +564,8 @@
547
564
  }
548
565
  ]
549
566
  },
550
- "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" aria-describedby=\"how-contacted-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n <div id=\"how-contacted-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for email address\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
567
+ "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" aria-describedby=\"how-contacted-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n <div id=\"how-contacted-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for email address\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
568
+ "hidden": false
551
569
  },
552
570
  {
553
571
  "name": "small with disabled",
@@ -578,7 +596,8 @@
578
596
  }
579
597
  ]
580
598
  },
581
- "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
599
+ "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\" disabled>\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
600
+ "hidden": false
582
601
  },
583
602
  {
584
603
  "name": "small with conditional reveal",
@@ -611,7 +630,8 @@
611
630
  }
612
631
  ]
613
632
  },
614
- "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
633
+ "html": "<div class=\"govuk-form-group govuk-radios--small\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to be contacted?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2\" name=\"how-contacted-2\" type=\"radio\" value=\"email\" data-aria-controls=\"conditional-how-contacted-2\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2\">\n Email\n </label>\n \n </div>\n \n <div class=\"govuk-radios__conditional govuk-radios__conditional--hidden\" id=\"conditional-how-contacted-2\">\n <label class=\"govuk-label\" for=\"context-email\">Foo</label>\n<input class=\"govuk-input govuk-!-width-one-third\" name=\"context-email\" type=\"text\" id=\"context-email\">\n\n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-2\" name=\"how-contacted-2\" type=\"radio\" value=\"phone\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-2\">\n Phone\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"how-contacted-2-3\" name=\"how-contacted-2\" type=\"radio\" value=\"text\">\n <label class=\"govuk-label govuk-radios__label\" for=\"how-contacted-2-3\">\n Text message\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
634
+ "hidden": false
615
635
  },
616
636
  {
617
637
  "name": "small inline",
@@ -639,7 +659,8 @@
639
659
  }
640
660
  ]
641
661
  },
642
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
662
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
663
+ "hidden": false
643
664
  },
644
665
  {
645
666
  "name": "small inline extreme",
@@ -695,7 +716,8 @@
695
716
  }
696
717
  ]
697
718
  },
698
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-4\" name=\"example\" type=\"radio\" value=\"modified\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-4\">\n modified\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-5\" name=\"example\" type=\"radio\" value=\"category\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-5\">\n category\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-6\" name=\"example\" type=\"radio\" value=\"votes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-6\">\n votes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-7\" name=\"example\" type=\"radio\" value=\"flavour\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-7\">\n flavour\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-8\" name=\"example\" type=\"radio\" value=\"hue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-8\">\n hue\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-9\" name=\"example\" type=\"radio\" value=\"happiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-9\">\n happiness\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-10\" name=\"example\" type=\"radio\" value=\"funkiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-10\">\n funkiness\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
719
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Sort by\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small govuk-radios--inline\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort\" name=\"example\" type=\"radio\" value=\"relevance\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort\">\n relevance\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-2\" name=\"example\" type=\"radio\" value=\"title\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-2\">\n title\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-3\" name=\"example\" type=\"radio\" value=\"created\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-3\">\n created\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-4\" name=\"example\" type=\"radio\" value=\"modified\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-4\">\n modified\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-5\" name=\"example\" type=\"radio\" value=\"category\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-5\">\n category\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-6\" name=\"example\" type=\"radio\" value=\"votes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-6\">\n votes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-7\" name=\"example\" type=\"radio\" value=\"flavour\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-7\">\n flavour\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-8\" name=\"example\" type=\"radio\" value=\"hue\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-8\">\n hue\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-9\" name=\"example\" type=\"radio\" value=\"happiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-9\">\n happiness\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"sort-10\" name=\"example\" type=\"radio\" value=\"funkiness\">\n <label class=\"govuk-label govuk-radios__label\" for=\"sort-10\">\n funkiness\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
720
+ "hidden": false
699
721
  },
700
722
  {
701
723
  "name": "small with a divider",
@@ -726,7 +748,8 @@
726
748
  }
727
749
  ]
728
750
  },
729
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
751
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n How do you want to sign in?\n \n </legend>\n \n\n <div class=\"govuk-radios govuk-radios--small\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider\" name=\"example\" type=\"radio\" value=\"governement-gateway\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider\">\n Use Government Gateway\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-2\" name=\"example\" type=\"radio\" value=\"govuk-verify\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-2\">\n Use GOV.UK Verify\n </label>\n \n </div>\n \n \n \n \n \n <div class=\"govuk-radios__divider\">or</div>\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-small-divider-4\" name=\"example\" type=\"radio\" value=\"create-account\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-small-divider-4\">\n Create an account\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
752
+ "hidden": false
730
753
  },
731
754
  {
732
755
  "name": "with idPrefix",
@@ -744,7 +767,8 @@
744
767
  }
745
768
  ]
746
769
  },
747
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix\" name=\"example-radio\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix-2\" name=\"example-radio\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
770
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix\" name=\"example-radio\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-id-prefix-2\" name=\"example-radio\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-id-prefix-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
771
+ "hidden": false
748
772
  },
749
773
  {
750
774
  "name": "minimal items and name",
@@ -761,7 +785,8 @@
761
785
  }
762
786
  ]
763
787
  },
764
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
788
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
789
+ "hidden": true
765
790
  },
766
791
  {
767
792
  "name": "with falsey items",
@@ -780,7 +805,8 @@
780
805
  }
781
806
  ]
782
807
  },
783
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-4\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-4\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
808
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-4\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-4\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
809
+ "hidden": true
784
810
  },
785
811
  {
786
812
  "name": "fieldset with describedBy",
@@ -800,7 +826,8 @@
800
826
  }
801
827
  ]
802
828
  },
803
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
829
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
830
+ "hidden": true
804
831
  },
805
832
  {
806
833
  "name": "attributes",
@@ -821,7 +848,8 @@
821
848
  }
822
849
  ]
823
850
  },
824
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
851
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
852
+ "hidden": true
825
853
  },
826
854
  {
827
855
  "name": "items with attributes",
@@ -846,7 +874,8 @@
846
874
  }
847
875
  ]
848
876
  },
849
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
877
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name\" name=\"example-name\" type=\"radio\" value=\"yes\" data-attribute=\"ABC\" data-second-attribute=\"DEF\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-name-2\" name=\"example-name\" type=\"radio\" value=\"no\" data-attribute=\"GHI\" data-second-attribute=\"JKL\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-name-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
878
+ "hidden": true
850
879
  },
851
880
  {
852
881
  "name": "with empty conditional",
@@ -866,7 +895,8 @@
866
895
  }
867
896
  ]
868
897
  },
869
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional\" name=\"example-conditional\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional-2\" name=\"example-conditional\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
898
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional\" name=\"example-conditional\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-conditional-2\" name=\"example-conditional\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-conditional-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
899
+ "hidden": true
870
900
  },
871
901
  {
872
902
  "name": "label with classes",
@@ -882,7 +912,8 @@
882
912
  }
883
913
  ]
884
914
  },
885
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-label-classes\" name=\"example-label-classes\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label bold\" for=\"example-label-classes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
915
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-label-classes\" name=\"example-label-classes\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label bold\" for=\"example-label-classes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
916
+ "hidden": true
886
917
  },
887
918
  {
888
919
  "name": "with hints on parent and items",
@@ -898,18 +929,23 @@
898
929
  },
899
930
  "items": [
900
931
  {
932
+ "value": "yes",
933
+ "text": "Yes",
901
934
  "hint": {
902
935
  "text": "Hint for yes option here"
903
936
  }
904
937
  },
905
938
  {
939
+ "value": "no",
940
+ "text": "No",
906
941
  "hint": {
907
942
  "text": "Hint for no option here"
908
943
  }
909
944
  }
910
945
  ]
911
946
  },
912
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-multiple-hints-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-multiple-hints-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints\" name=\"example-multiple-hints\" type=\"radio\" value=\"\" aria-describedby=\"example-multiple-hints-item-hint\">\n \n \n <div id=\"example-multiple-hints-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for yes option here\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints-2\" name=\"example-multiple-hints\" type=\"radio\" value=\"\" aria-describedby=\"example-multiple-hints-2-item-hint\">\n \n \n <div id=\"example-multiple-hints-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for no option here\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
947
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-multiple-hints-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-multiple-hints-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints\" name=\"example-multiple-hints\" type=\"radio\" value=\"yes\" aria-describedby=\"example-multiple-hints-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-multiple-hints\">\n Yes\n </label>\n \n <div id=\"example-multiple-hints-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for yes option here\n </div>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-multiple-hints-2\" name=\"example-multiple-hints\" type=\"radio\" value=\"no\" aria-describedby=\"example-multiple-hints-2-item-hint\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-multiple-hints-2\">\n No\n </label>\n \n <div id=\"example-multiple-hints-2-item-hint\" class=\"govuk-hint govuk-radios__hint\">\n Hint for no option here\n </div>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
948
+ "hidden": true
913
949
  },
914
950
  {
915
951
  "name": "with describedBy and hint",
@@ -923,9 +959,20 @@
923
959
  },
924
960
  "hint": {
925
961
  "text": "This includes changing your last name or spelling your name differently."
926
- }
962
+ },
963
+ "items": [
964
+ {
965
+ "value": "yes",
966
+ "text": "Yes"
967
+ },
968
+ {
969
+ "value": "no",
970
+ "text": "No"
971
+ }
972
+ ]
927
973
  },
928
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint-describedby-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint-describedby-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
974
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-hint-describedby-hint\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-hint-describedby-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-hint-describedby\" name=\"example-hint-describedby\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-hint-describedby\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-hint-describedby-2\" name=\"example-hint-describedby\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-hint-describedby-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
975
+ "hidden": true
929
976
  },
930
977
  {
931
978
  "name": "with error message",
@@ -933,9 +980,20 @@
933
980
  "name": "example-error-message",
934
981
  "errorMessage": {
935
982
  "text": "Please select an option"
936
- }
983
+ },
984
+ "items": [
985
+ {
986
+ "value": "yes",
987
+ "text": "Yes"
988
+ },
989
+ {
990
+ "value": "no",
991
+ "text": "No"
992
+ }
993
+ ]
937
994
  },
938
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"example-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n </div>\n\n</div>"
995
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <span id=\"example-error-message-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message\" name=\"example-error-message\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-2\" name=\"example-error-message\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
996
+ "hidden": true
939
997
  },
940
998
  {
941
999
  "name": "with error message and idPrefix",
@@ -944,9 +1002,20 @@
944
1002
  "idPrefix": "id-prefix",
945
1003
  "errorMessage": {
946
1004
  "text": "Please select an option"
947
- }
1005
+ },
1006
+ "items": [
1007
+ {
1008
+ "value": "yes",
1009
+ "text": "Yes"
1010
+ },
1011
+ {
1012
+ "value": "no",
1013
+ "text": "No"
1014
+ }
1015
+ ]
948
1016
  },
949
- "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-radios\">\n \n </div>\n\n</div>"
1017
+ "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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"id-prefix\" name=\"example-error-message\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"id-prefix\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"id-prefix-2\" name=\"example-error-message\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"id-prefix-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1018
+ "hidden": true
950
1019
  },
951
1020
  {
952
1021
  "name": "with hint and error message",
@@ -962,9 +1031,20 @@
962
1031
  },
963
1032
  "hint": {
964
1033
  "text": "This includes changing your last name or spelling your name differently."
965
- }
1034
+ },
1035
+ "items": [
1036
+ {
1037
+ "value": "yes",
1038
+ "text": "Yes"
1039
+ },
1040
+ {
1041
+ "value": "no",
1042
+ "text": "No"
1043
+ }
1044
+ ]
966
1045
  },
967
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <span id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
1046
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <span id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint\" name=\"example-error-message-hint\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint-2\" name=\"example-error-message-hint\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1047
+ "hidden": true
968
1048
  },
969
1049
  {
970
1050
  "name": "with hint, error message and describedBy",
@@ -981,13 +1061,25 @@
981
1061
  },
982
1062
  "hint": {
983
1063
  "text": "This includes changing your last name or spelling your name differently."
984
- }
1064
+ },
1065
+ "items": [
1066
+ {
1067
+ "value": "yes",
1068
+ "text": "Yes"
1069
+ },
1070
+ {
1071
+ "value": "no",
1072
+ "text": "No"
1073
+ }
1074
+ ]
985
1075
  },
986
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <span id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
1076
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error-message-hint-hint example-error-message-hint-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-error-message-hint-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n \n \n <span id=\"example-error-message-hint-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please select an option\n </span>\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint\" name=\"example-error-message-hint\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-error-message-hint-2\" name=\"example-error-message-hint\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-error-message-hint-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1077
+ "hidden": true
987
1078
  },
988
1079
  {
989
1080
  "name": "label with attributes",
990
1081
  "options": {
1082
+ "name": "with-label-attributes",
991
1083
  "items": [
992
1084
  {
993
1085
  "value": "yes",
@@ -1001,7 +1093,8 @@
1001
1093
  }
1002
1094
  ]
1003
1095
  },
1004
- "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"\" name=\"\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>"
1096
+ "html": "<div class=\"govuk-form-group\">\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-label-attributes\" name=\"with-label-attributes\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" data-attribute=\"value\" data-second-attribute=\"second-value\" for=\"with-label-attributes\">\n Yes\n </label>\n \n </div>\n \n \n \n \n </div>\n\n</div>",
1097
+ "hidden": true
1005
1098
  },
1006
1099
  {
1007
1100
  "name": "fieldset params",
@@ -1019,20 +1112,43 @@
1019
1112
  },
1020
1113
  "hint": {
1021
1114
  "text": "This includes changing your last name or spelling your name differently."
1022
- }
1115
+ },
1116
+ "items": [
1117
+ {
1118
+ "value": "yes",
1119
+ "text": "Yes"
1120
+ },
1121
+ {
1122
+ "value": "no",
1123
+ "text": "No"
1124
+ }
1125
+ ]
1023
1126
  },
1024
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-fieldset-params-hint\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-fieldset-params-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
1127
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\" aria-describedby=\"example-fieldset-params-hint\" data-attribute=\"value\" data-second-attribute=\"second-value\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <div id=\"example-fieldset-params-hint\" class=\"govuk-hint\">\n This includes changing your last name or spelling your name differently.\n </div>\n\n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-fieldset-params\" name=\"example-fieldset-params\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-fieldset-params\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-fieldset-params-2\" name=\"example-fieldset-params\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example-fieldset-params-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1128
+ "hidden": true
1025
1129
  },
1026
1130
  {
1027
1131
  "name": "fieldset with html",
1028
1132
  "options": {
1133
+ "name": "with-fieldset-html",
1029
1134
  "fieldset": {
1030
1135
  "legend": {
1031
1136
  "html": "Have <b>you</b> changed your name?"
1032
1137
  }
1033
- }
1138
+ },
1139
+ "items": [
1140
+ {
1141
+ "value": "yes",
1142
+ "text": "Yes"
1143
+ },
1144
+ {
1145
+ "value": "no",
1146
+ "text": "No"
1147
+ }
1148
+ ]
1034
1149
  },
1035
- "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have <b>you</b> changed your name?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n </div>\n \n\n</fieldset>\n\n\n</div>"
1150
+ "html": "<div class=\"govuk-form-group\">\n\n <fieldset class=\"govuk-fieldset\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have <b>you</b> changed your name?\n \n </legend>\n \n\n <div class=\"govuk-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-fieldset-html\" name=\"with-fieldset-html\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"with-fieldset-html\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"with-fieldset-html-2\" name=\"with-fieldset-html\" type=\"radio\" value=\"no\">\n <label class=\"govuk-label govuk-radios__label\" for=\"with-fieldset-html-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1151
+ "hidden": true
1036
1152
  },
1037
1153
  {
1038
1154
  "name": "with fieldset, error message and describedBy",
@@ -1060,7 +1176,8 @@
1060
1176
  }
1061
1177
  ]
1062
1178
  },
1063
- "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>"
1179
+ "html": "<div class=\"govuk-form-group govuk-form-group--error\">\n\n <fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id example-error\">\n \n <legend class=\"govuk-fieldset__legend\">\n \n Have you changed your name?\n \n </legend>\n \n\n <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-radios\">\n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example\" name=\"example\" type=\"radio\" value=\"yes\">\n <label class=\"govuk-label govuk-radios__label\" for=\"example\">\n Yes\n </label>\n \n </div>\n \n \n \n \n \n \n \n <div class=\"govuk-radios__item\">\n <input class=\"govuk-radios__input\" id=\"example-2\" name=\"example\" type=\"radio\" value=\"no\" checked>\n <label class=\"govuk-label govuk-radios__label\" for=\"example-2\">\n No\n </label>\n \n </div>\n \n \n \n \n </div>\n \n\n</fieldset>\n\n\n</div>",
1180
+ "hidden": true
1064
1181
  }
1065
1182
  ]
1066
1183
  }