diff --git a/CHANGELOG.md b/CHANGELOG.md
index 565db047cb..fdeaf063de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,13 @@
([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+- Allow attributes on checkboxes/radios
+
+ You can now provide attributes on checkbox and radio items
+ `attributes: { 'data-attribute': 'value' }`
+
+ ([PR #942](https://github.com/alphagov/govuk-frontend/pull/942))
+
🔧 Fixes:
- Pull Request Title goes here
diff --git a/src/components/checkboxes/README.md b/src/components/checkboxes/README.md
index 8bf82d7a72..85ce60b67a 100644
--- a/src/components/checkboxes/README.md
+++ b/src/components/checkboxes/README.md
@@ -911,6 +911,18 @@ If you are using Nunjucks,then macros take the following arguments
+
+
+object |
+
+No |
+
+Any extra HTML attributes (for example data attributes) to add to the checkbox input tag. |
+
+
+
+
+
string |
diff --git a/src/components/checkboxes/README.njk b/src/components/checkboxes/README.njk
index a726540977..a71339aadd 100644
--- a/src/components/checkboxes/README.njk
+++ b/src/components/checkboxes/README.njk
@@ -255,6 +255,20 @@
text: 'If true, checkbox will be disabled.'
}
],
+ [
+ {
+ text: 'items.{}.attributes'
+ },
+ {
+ text: 'object'
+ },
+ {
+ text: 'No'
+ },
+ {
+ text: 'Any extra HTML attributes (for example data attributes) to add to the checkbox input tag.'
+ }
+ ],
[
{
text: 'classes'
diff --git a/src/components/checkboxes/template.njk b/src/components/checkboxes/template.njk
index 184de24762..148f787a1f 100644
--- a/src/components/checkboxes/template.njk
+++ b/src/components/checkboxes/template.njk
@@ -55,7 +55,8 @@
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
- {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
+ {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+ {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
html: item.html,
text: item.text,
diff --git a/src/components/checkboxes/template.test.js b/src/components/checkboxes/template.test.js
index 14533b649a..59b7c094f6 100644
--- a/src/components/checkboxes/template.test.js
+++ b/src/components/checkboxes/template.test.js
@@ -253,6 +253,42 @@ describe('Checkboxes', () => {
expect($secondInput.attr('checked')).toEqual('checked')
expect($lastInput.attr('checked')).toEqual('checked')
})
+
+ describe('when they include attributes', () => {
+ it('it renders the attributes', () => {
+ const $ = render('checkboxes', {
+ name: 'example-name',
+ items: [
+ {
+ value: '1',
+ text: 'Option 1',
+ attributes: {
+ 'data-attribute': 'ABC',
+ 'data-second-attribute': 'DEF'
+ }
+ },
+ {
+ value: '2',
+ text: 'Option 2',
+ attributes: {
+ 'data-attribute': 'GHI',
+ 'data-second-attribute': 'JKL'
+ }
+ }
+ ]
+ })
+
+ const $component = $('.govuk-checkboxes')
+
+ const $firstInput = $component.find('.govuk-checkboxes__item:first-child input')
+ expect($firstInput.attr('data-attribute')).toEqual('ABC')
+ expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+ const $lastInput = $component.find('.govuk-checkboxes__item:last-child input')
+ expect($lastInput.attr('data-attribute')).toEqual('GHI')
+ expect($lastInput.attr('data-second-attribute')).toEqual('JKL')
+ })
+ })
})
describe('when they include a hint', () => {
diff --git a/src/components/radios/README.md b/src/components/radios/README.md
index c8e2381a4a..b8b483f7c6 100644
--- a/src/components/radios/README.md
+++ b/src/components/radios/README.md
@@ -883,6 +883,18 @@ If you are using Nunjucks,then macros take the following arguments
+
+
+object |
+
+No |
+
+Any extra HTML attributes (for example data attributes) to add to the radio input tag. |
+
+
+
+
+
string |
diff --git a/src/components/radios/README.njk b/src/components/radios/README.njk
index 865251f9fa..ea715ea33b 100644
--- a/src/components/radios/README.njk
+++ b/src/components/radios/README.njk
@@ -268,6 +268,20 @@ Let users select a single option from a list.
text: 'If true, radio will be disabled.'
}
],
+ [
+ {
+ text: 'items.{}.attributes'
+ },
+ {
+ text: 'object'
+ },
+ {
+ text: 'No'
+ },
+ {
+ text: 'Any extra HTML attributes (for example data attributes) to add to the radio input tag.'
+ }
+ ],
[
{
text: 'classes'
diff --git a/src/components/radios/template.njk b/src/components/radios/template.njk
index 639e31d4b2..39f16cecd6 100644
--- a/src/components/radios/template.njk
+++ b/src/components/radios/template.njk
@@ -57,7 +57,8 @@
{{-" checked" if item.checked }}
{{-" disabled" if item.disabled }}
{%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}
- {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}>
+ {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+ {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
{{ govukLabel({
html: item.html,
text: item.text,
diff --git a/src/components/radios/template.test.js b/src/components/radios/template.test.js
index 84780adc59..fb6681e5bc 100644
--- a/src/components/radios/template.test.js
+++ b/src/components/radios/template.test.js
@@ -198,6 +198,43 @@ describe('Radios', () => {
expect($lastInput.attr('checked')).toEqual('checked')
})
+ describe('when they include attributes', () => {
+ it('it renders the attributes', () => {
+ const $ = render('radios', {
+ name: 'example-name',
+ items: [
+ {
+ value: 'yes',
+ text: 'Yes',
+ attributes: {
+ 'data-attribute': 'ABC',
+ 'data-second-attribute': 'DEF'
+ }
+ },
+ {
+ value: 'no',
+ text: 'No',
+ checked: true,
+ attributes: {
+ 'data-attribute': 'GHI',
+ 'data-second-attribute': 'JKL'
+ }
+ }
+ ]
+ })
+
+ const $component = $('.govuk-radios')
+
+ const $firstInput = $component.find('.govuk-radios__item:first-child input')
+ expect($firstInput.attr('data-attribute')).toEqual('ABC')
+ expect($firstInput.attr('data-second-attribute')).toEqual('DEF')
+
+ const $lastInput = $component.find('.govuk-radios__item:last-child input')
+ expect($lastInput.attr('data-attribute')).toEqual('GHI')
+ expect($lastInput.attr('data-second-attribute')).toEqual('JKL')
+ })
+ })
+
describe('when they include a hint', () => {
it('it renders the hint text', () => {
const $ = render('radios', {