diff --git a/CHANGELOG.md b/CHANGELOG.md
index 606ddb947d5..f8c8b540589 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.12.0`.
+**Bug fixes**
+
+- Fixed `id` attribute to be unique across `EuiButtonGroupButton` elements ([#4657](https://github.com/elastic/eui/pull/4657))
 
 ## [`31.12.0`](https://github.com/elastic/eui/tree/v31.12.0)
 
diff --git a/src-docs/src/views/datagrid/styling.js b/src-docs/src/views/datagrid/styling.js
index e4bf3337ed3..1d68669afa5 100644
--- a/src-docs/src/views/datagrid/styling.js
+++ b/src-docs/src/views/datagrid/styling.js
@@ -566,7 +566,7 @@ const DataGrid = () => {
                       buttonSize="compressed"
                       legend="Border"
                       options={showColumnSelectorOptions}
-                      idSelected={displayColumnSelector.toString()}
+                      idSelected={displayColumnSelector ? 'true' : 'false'}
                       onChange={onShowColumnSelectorChange}
                     />
                   </EuiFormRow>
diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
index 0d2dba2a90b..1f842553f42 100644
--- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
+++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -37,7 +37,8 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -57,8 +58,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -95,7 +97,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -109,7 +111,8 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -119,7 +122,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -133,7 +136,8 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -144,8 +148,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -183,7 +188,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -203,7 +208,8 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -223,8 +229,9 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -261,7 +268,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -275,7 +282,8 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -285,7 +293,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -299,7 +307,8 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -310,8 +319,9 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -349,7 +359,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -369,7 +379,8 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -389,8 +400,9 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -427,7 +439,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -441,7 +453,8 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -451,7 +464,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -465,7 +478,8 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -476,8 +490,9 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -515,7 +530,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -535,7 +550,8 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -555,8 +571,9 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -593,7 +610,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -607,7 +624,8 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -617,7 +635,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -631,7 +649,8 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -642,8 +661,9 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--danger euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -681,7 +701,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -701,7 +721,8 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -721,8 +742,9 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -759,7 +781,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -773,7 +795,8 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -783,7 +806,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -797,7 +820,8 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -808,8 +832,9 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--ghost euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -847,7 +872,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -867,7 +892,8 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -887,8 +913,9 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -925,7 +952,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -939,7 +966,8 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -949,7 +977,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -963,7 +991,8 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -974,8 +1003,9 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] =
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--primary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1013,7 +1043,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1033,7 +1063,8 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1053,8 +1084,9 @@ exports[`EuiButtonGroup button props color secondary is rendered for multi 1`] =
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1091,7 +1123,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1105,7 +1137,8 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1115,7 +1148,7 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1129,7 +1162,8 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1140,8 +1174,9 @@ exports[`EuiButtonGroup button props color secondary is rendered for single 1`]
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--secondary euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1179,7 +1214,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1199,7 +1234,8 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1219,8 +1255,9 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1257,7 +1294,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1271,7 +1308,8 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1281,7 +1319,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1295,7 +1333,8 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1306,8 +1345,9 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1345,7 +1385,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1365,7 +1405,8 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1385,8 +1426,9 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1423,7 +1465,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1437,7 +1479,8 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1447,7 +1490,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1461,7 +1504,8 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1472,8 +1516,9 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] =
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--warning euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1513,7 +1558,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled testClass1 testClass2"
       data-test-subj="test subject string"
       disabled=""
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1533,8 +1578,9 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button01"
       disabled=""
-      id="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1554,8 +1600,9 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1595,7 +1642,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled testClass1 testClass2"
       data-test-subj="test subject string"
       disabled=""
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1615,8 +1662,9 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button01"
       disabled=""
-      id="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1636,8 +1684,9 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1675,7 +1724,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1695,7 +1744,8 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1715,8 +1765,9 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1753,7 +1804,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1767,7 +1818,8 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1777,7 +1829,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1791,7 +1843,8 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1802,8 +1855,9 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1841,7 +1895,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1861,7 +1915,8 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -1881,8 +1936,9 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -1919,7 +1975,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1933,7 +1989,8 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1943,7 +2000,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -1957,7 +2014,8 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -1968,8 +2026,9 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled euiButtonGroupButton-isIconOnly"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -2006,7 +2065,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2021,7 +2080,8 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
           <input
             checked=""
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -2031,7 +2091,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2045,7 +2105,8 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -2056,8 +2117,9 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -2095,7 +2157,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
       aria-pressed="true"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -2115,7 +2177,8 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     <button
       aria-pressed="true"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -2135,8 +2198,9 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -2176,7 +2240,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      id="button00"
+      id="generated-id"
       type="button"
     >
       <span
@@ -2196,7 +2260,8 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      id="button01"
+      data-test-subj="button01"
+      id="generated-id"
       type="button"
     >
       <span
@@ -2216,8 +2281,9 @@ exports[`EuiButtonGroup type multi is rendered 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
@@ -2256,7 +2322,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
       aria-label="aria-label"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small testClass1 testClass2"
       data-test-subj="test subject string"
-      for="button00"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2270,7 +2336,8 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button00"
+            data-test-subj="button00"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -2280,7 +2347,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     </label>
     <label
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
-      for="button01"
+      for="generated-id"
     >
       <span
         class="euiButtonContent euiButton__content"
@@ -2294,7 +2361,8 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
         >
           <input
             class="euiScreenReaderOnly"
-            id="button01"
+            data-test-subj="button01"
+            id="generated-id"
             name="test"
             type="radio"
           />
@@ -2305,8 +2373,9 @@ exports[`EuiButtonGroup type single is rendered 1`] = `
     <button
       aria-pressed="false"
       class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isDisabled"
+      data-test-subj="button02"
       disabled=""
-      id="button02"
+      id="generated-id"
       type="submit"
     >
       <span
diff --git a/src/components/button/button_group/button_group_button.tsx b/src/components/button/button_group/button_group_button.tsx
index de7e477d8a5..d420eac9611 100644
--- a/src/components/button/button_group/button_group_button.tsx
+++ b/src/components/button/button_group/button_group_button.tsx
@@ -18,10 +18,11 @@
  */
 
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useRef } from 'react';
 import { EuiButtonDisplay } from '../button';
 import { EuiButtonGroupOptionProps, EuiButtonGroupProps } from './button_group';
 import { useInnerText } from '../../inner_text';
+import { htmlIdGenerator } from '../../../../src/services';
 
 type Props = EuiButtonGroupOptionProps & {
   /**
@@ -75,18 +76,19 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
 }) => {
   // Force element to be a button if disabled
   const el = isDisabled ? 'button' : element;
+  const newId = useRef(htmlIdGenerator()()).current;
 
   let elementProps = {};
   let singleInput;
   if (el === 'label') {
     elementProps = {
       ...elementProps,
-      htmlFor: id,
+      htmlFor: newId,
       onClick: () => onChange(id, value),
     };
     singleInput = (
       <input
-        id={id}
+        id={newId}
         className="euiScreenReaderOnly"
         name={name}
         checked={isSelected}
@@ -94,12 +96,14 @@ export const EuiButtonGroupButton: FunctionComponent<Props> = ({
         value={value}
         type="radio"
         onChange={() => onChange(id, value)}
+        data-test-subj={id}
       />
     );
   } else {
     elementProps = {
       ...elementProps,
-      id,
+      id: newId,
+      'data-test-subj': id,
       isSelected,
       type,
       onClick: () => onChange(id),