diff --git a/src/govuk/common.js b/src/govuk/common.js
index f050fccd357..7e8703295f2 100644
--- a/src/govuk/common.js
+++ b/src/govuk/common.js
@@ -29,6 +29,6 @@ export function generateUniqueID () {
 
 export function getSelectorForID (id) {
   if (id && id.replace) {
-    return '#' + (id).replace(/\./g, '\\.')
+    return '#' + (id).replace(/([.:\][])/g, '\\$1')
   }
 }
diff --git a/src/govuk/components/checkboxes/checkboxes.test.js b/src/govuk/components/checkboxes/checkboxes.test.js
index 1e1bd55b78e..0c45ab36a11 100644
--- a/src/govuk/components/checkboxes/checkboxes.test.js
+++ b/src/govuk/components/checkboxes/checkboxes.test.js
@@ -86,17 +86,17 @@ describe('Checkboxes with conditional reveals', () => {
       const isExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=true]')
       expect(isExpanded).toBeTruthy()
     })
-    // it('indicates when conditional content is collapsed or revealed with full stop in ID', async () => {
-    //   await goToAndGetComponent('checkboxes', 'with-conditional-items-with-full-stop-in-id')
-    //
-    //   const isNotExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=false]')
-    //   expect(isNotExpanded).toBeTruthy()
-    //
-    //   await page.click('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
-    //
-    //   const isExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=true]')
-    //   expect(isExpanded).toBeTruthy()
-    // })
+    it('indicates when conditional content is collapsed or revealed with all special chars in the ID', async () => {
+      await goToAndGetComponent('checkboxes', 'with-conditional-items-with-all-special-chars-in-id')
+
+      const isNotExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=false]')
+      expect(isNotExpanded).toBeTruthy()
+
+      await page.click('.govuk-checkboxes__item:first-child .govuk-checkboxes__input')
+
+      const isExpanded = await waitForVisibleSelector('.govuk-checkboxes__item:first-child .govuk-checkboxes__input[aria-expanded=true]')
+      expect(isExpanded).toBeTruthy()
+    })
     it('toggles the conditional content when clicking an input', async () => {
       const $ = await goToAndGetComponent('checkboxes', 'with-conditional-items')
       const $component = $('.govuk-checkboxes')
diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml
index 21a5aece9aa..beae4eb1488 100644
--- a/src/govuk/components/checkboxes/checkboxes.yaml
+++ b/src/govuk/components/checkboxes/checkboxes.yaml
@@ -416,31 +416,31 @@ examples:
             <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
             <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
 
-- name: with conditional items with full stop in id
+- name: with conditional items with all special chars in id
   data:
-    name: with-conditional-items-with-full-stop-in-id
-    idPrefix: with-conditional-items-with-full-stop-in-id
+    name: with-conditional-items-with-all-special-chars-in-id
+    idPrefix: with-conditional-items-with-all-special-chars-in-id
     fieldset:
       legend:
         text: How do you want to be contacted?
     items:
       - value: email
         text: Email
-        id: option.email
+        id: option-1:choice.condition[email]
         conditional:
           html: |
             <label class="govuk-label" for="context-email">Email address</label>
             <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       - value: phone
         text: Phone
-        id: option.phone
+        id: option-1:choice.condition[phone]
         conditional:
           html: |
             <label class="govuk-label" for="contact-phone">Phone number</label>
             <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       - value: text
         text: Text message
-        id: option.text
+        id: option-1:choice.condition[text]
         conditional:
           html: |
             <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
diff --git a/src/govuk/components/radios/radios.test.js b/src/govuk/components/radios/radios.test.js
index 790eccf529e..a6b7300c4b5 100644
--- a/src/govuk/components/radios/radios.test.js
+++ b/src/govuk/components/radios/radios.test.js
@@ -86,8 +86,8 @@ describe('Radios with conditional reveals', () => {
       const isExpanded = await waitForVisibleSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=true]')
       expect(isExpanded).toBeTruthy()
     })
-    it('indicates when conditional content is collapsed or revealed with a full stop in the ID', async () => {
-      await goToAndGetComponent('radios', 'with-conditional-items-with-full-stop-in-id')
+    it('indicates when conditional content is collapsed or revealed with all special chars in the ID', async () => {
+      await goToAndGetComponent('radios', 'with-conditional-items-with-all-special-chars-in-id')
 
       const isNotExpanded = await waitForVisibleSelector('.govuk-radios__item:first-child .govuk-radios__input[aria-expanded=false]')
       expect(isNotExpanded).toBeTruthy()
diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml
index 10777852908..2e804b513f8 100644
--- a/src/govuk/components/radios/radios.yaml
+++ b/src/govuk/components/radios/radios.yaml
@@ -321,31 +321,31 @@ examples:
             <label class="govuk-label" for="contact-text-message">Mobile phone number</label>
             <input class="govuk-input govuk-!-width-one-third" name="contact-text-message" type="text" id="contact-text-message">
 
-- name: with conditional items with full stop in id
+- name: with conditional items with all special chars in id
   data:
-    idPrefix: with-conditional-items-with-full-stop-in-id
-    name: with-conditional-items-with-full-stop-in-id
+    idPrefix: with-conditional-items-with-all-special-chars-in-id
+    name: with-conditional-items-with-all-special-chars-in-id
     fieldset:
       legend:
         text: How do you want to be contacted?
     items:
       - value: email
         text: Email
-        id: option.email
+        id: option-1:choice.condition[email]
         conditional:
           html: |
             <label class="govuk-label" for="context-email">Email address</label>
             <input class="govuk-input govuk-!-width-one-third" name="context-email" type="text" id="context-email">
       - value: phone
         text: Phone
-        id: option.phone
+        id: option-1:choice.condition[phone]
         conditional:
           html: |
             <label class="govuk-label" for="contact-phone">Phone number</label>
             <input class="govuk-input govuk-!-width-one-third" name="contact-phone" type="text" id="contact-phone">
       - value: text
         text: Text message
-        id: option.text
+        id: option-1:choice.condition[text]
         conditional:
           html: |
             <label class="govuk-label" for="contact-text-message">Mobile phone number</label>