Add ability to pass explicit names for checkbox items

CHANGELOG.md

@@ -23,6 +23,8 @@ New features:
 
 - Add inset text component (PR [#709](https://github.com/alphagov/govuk-frontend/pull/709))
 
+- Add ability to pass explicit name value to checkbox items (PR [#719](https://github.com/alphagov/govuk-frontend/pull/719))
+
 Internal:
 
 - Run tests in pre-release

src/components/checkboxes/README.md

@@ -87,6 +87,74 @@ Find out when to use the Checkboxes component in your service in the [GOV.UK Des
       ]
     }) }}
 
+### Checkboxes--with-id-plus-name
+
+[Preview the checkboxes--with-id-plus-name example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-id-plus-name/preview)
+
+#### Markup
+
+    <div class="govuk-form-group">
+
+      <fieldset class="govuk-fieldset" aria-describedby="undefined-hint">
+
+      <legend class="govuk-fieldset__legend">
+        What is your nationality?
+      </legend>
+
+      <span id="undefined-hint" class="govuk-hint">
+        If you have dual nationality, select all options that are relevant to you.
+      </span>
+
+      <div class="govuk-checkboxes">
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="item_british" name="british" type="checkbox" value="yes">
+          <label class="govuk-label govuk-checkboxes__label" for="item_british">
+            British
+          </label>
+        </div>
+
+        <div class="govuk-checkboxes__item">
+          <input class="govuk-checkboxes__input" id="item_irish" name="irish" type="checkbox" value="irish">
+          <label class="govuk-label govuk-checkboxes__label" for="item_irish">
+            Irish
+          </label>
+        </div>
+
+      </div>
+      </fieldset>
+
+    </div>
+
+#### Macro
+
+    {% from 'checkboxes/macro.njk' import govukCheckboxes %}
+
+    {{ govukCheckboxes({
+      "fieldset": {
+        "legend": {
+          "text": "What is your nationality?"
+        }
+      },
+      "hint": {
+        "text": "If you have dual nationality, select all options that are relevant to you."
+      },
+      "items": [
+        {
+          "name": "british",
+          "id": "item_british",
+          "value": "yes",
+          "text": "British"
+        },
+        {
+          "name": "irish",
+          "id": "item_irish",
+          "value": "irish",
+          "text": "Irish"
+        }
+      ]
+    }) }}
+
 ### Checkboxes--with-disabled
 
 [Preview the checkboxes--with-disabled example](http://govuk-frontend-review.herokuapp.com/components/checkboxes/with-disabled/preview)

src/components/checkboxes/checkboxes.yaml

@@ -26,6 +26,23 @@ examples:
       - value: 'other'
         text: 'Citizen of another country'
 
+- name: with-id-plus-name
+  data:
+    fieldset:
+      legend:
+        text: What is your nationality?
+    hint:
+      text: If you have dual nationality, select all options that are relevant to you.
+    items:
+      - name: 'british'
+        id: 'item_british'
+        value: 'yes'
+        text: 'British'
+      - name: 'irish'
+        id: 'item_irish'
+        value: 'irish'
+        text: 'Irish'
+
 - name: with-disabled
   data:
     name: colours

src/components/checkboxes/template.njk

@@ -46,9 +46,10 @@
     {%- if isConditional %} data-module="checkboxes"{% endif -%}>
     {% for item in params.items %}
     {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
+    {% set name = item.name if item.name else params.name %}
     {% set conditionalId = "conditional-" + id %}
     <div class="govuk-checkboxes__item">
-      <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ params.name }}" type="checkbox" value="{{ item.value }}"
+      <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
       {%- if item.conditional %} data-aria-controls="{{ conditionalId }}"{% endif -%}>

src/components/checkboxes/template.test.js

@@ -151,6 +151,59 @@ describe('Checkboxes', () => {
       expect($lastLabel.attr('for')).toEqual('custom-2')
     })
 
+    it('render explicitly passed item ids', () => {
+      const $ = render('checkboxes', {
+        name: 'example-name',
+        items: [
+          {
+            value: '1',
+            text: 'Option 1'
+          },
+          {
+            id: 'custom_item_id',
+            value: '2',
+            text: 'Option 2'
+          }
+        ]
+      })
+
+      const $component = $('.govuk-checkboxes')
+
+      const $firstInput = $component.find('.govuk-checkboxes__item:first-child input')
+      expect($firstInput.attr('id')).toBe('example-name-1')
+
+      const $lastInput = $component.find('.govuk-checkboxes__item:last-child input')
+      const $lastLabel = $component.find('.govuk-checkboxes__item:last-child label')
+      expect($lastInput.attr('id')).toBe('custom_item_id')
+      expect($lastLabel.attr('for')).toEqual('custom_item_id')
+    })
+
+    it('render explicitly passed item names', () => {
+      const $ = render('checkboxes', {
+        name: 'example-name',
+        items: [
+          {
+            value: '1',
+            text: 'Option 1',
+            name: 'custom-item-name-1'
+          },
+          {
+            value: '2',
+            text: 'Option 2',
+            name: 'custom-item-name-2'
+          }
+        ]
+      })
+
+      const $component = $('.govuk-checkboxes')
+
+      const $firstInput = $component.find('.govuk-checkboxes__item:first-child input')
+      expect($firstInput.attr('name')).toBe('custom-item-name-1')
+
+      const $lastInput = $component.find('.govuk-checkboxes__item:last-child input')
+      expect($lastInput.attr('name')).toBe('custom-item-name-2')
+    })
+
     it('render disabled', () => {
       const $ = render('checkboxes', {
         name: 'example-name',