Allow attributes on checkboxes/radios

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

src/components/checkboxes/README.md

@@ -911,6 +911,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the checkbox input tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

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'

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,

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', () => {

src/components/radios/README.md

@@ -883,6 +883,18 @@ If you are using Nunjucks,then macros take the following arguments
 
 <tr class="govuk-table__row">
 
+<th class="govuk-table__header" scope="row">items.{}.attributes</th>
+
+<td class="govuk-table__cell ">object</td>
+
+<td class="govuk-table__cell ">No</td>
+
+<td class="govuk-table__cell ">Any extra HTML attributes (for example data attributes) to add to the radio input tag.</td>
+
+</tr>
+
+<tr class="govuk-table__row">
+
 <th class="govuk-table__header" scope="row">classes</th>
 
 <td class="govuk-table__cell ">string</td>

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'

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,

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', {