diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.js
index c1aeba08ff5..134ec7e1eeb 100644
--- a/src-docs/src/views/accordion/accordion.js
+++ b/src-docs/src/views/accordion/accordion.js
@@ -1,13 +1,18 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion id="accordion1" buttonContent="Click me to toggle">
-      <EuiPanel color="subdued">
-        Any content inside of <strong>EuiAccordion</strong> will appear here.
-      </EuiPanel>
-    </EuiAccordion>
-  </div>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <div>
+      <EuiAccordion id={accordionID} buttonContent="Click me to toggle">
+        <EuiPanel color="subdued">
+          Any content inside of <strong>EuiAccordion</strong> will appear here.
+        </EuiPanel>
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/src-docs/src/views/accordion/accordion_arrow.js
index 1308506500e..704ca0b3672 100644
--- a/src-docs/src/views/accordion/accordion_arrow.js
+++ b/src-docs/src/views/accordion/accordion_arrow.js
@@ -1,14 +1,19 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordion11"
-    arrowDisplay="none"
-    buttonContent="This one has it removed entirely">
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <EuiAccordion
+      id={accordionID}
+      arrowDisplay="none"
+      buttonContent="This one has it removed entirely">
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow_right.js b/src-docs/src/views/accordion/accordion_arrow_right.js
index c063cef8b04..fcb6dc7800f 100644
--- a/src-docs/src/views/accordion/accordion_arrow_right.js
+++ b/src-docs/src/views/accordion/accordion_arrow_right.js
@@ -1,14 +1,19 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordion10"
-    arrowDisplay="right"
-    buttonContent="This accordion has the arrow on the right">
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <EuiAccordion
+      id={accordionID}
+      arrowDisplay="right"
+      buttonContent="This accordion has the arrow on the right">
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js
index 45001259fba..1a5daf9aba2 100644
--- a/src-docs/src/views/accordion/accordion_extra.js
+++ b/src-docs/src/views/accordion/accordion_extra.js
@@ -1,13 +1,18 @@
 import React from 'react';
 
 import { EuiAccordion, EuiButton } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordionExtraWithLeftArrow"
-    buttonContent="Click to open"
-    extraAction={<EuiButton size="s">Extra action!</EuiButton>}
-    paddingSize="l">
-    <strong>Opened content.</strong>
-  </EuiAccordion>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <EuiAccordion
+      id={accordionID}
+      buttonContent="Click to open"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l">
+      <strong>Opened content.</strong>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index b7eae17e9de..e0cf3c25860 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -35,6 +35,8 @@ export default () => {
     setID(`${idPrefix}--${newState}`);
   };
 
+  const accordionID = htmlIdGenerator('accordion')();
+
   return (
     <div>
       <EuiButtonGroup
@@ -45,7 +47,7 @@ export default () => {
       />
       <EuiSpacer />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={accordionID}
         forceState={trigger}
         onToggle={onToggle}
         buttonContent="I am a controlled accordion"
diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js
index 4c8a9469660..dedc5abe15b 100644
--- a/src-docs/src/views/accordion/accordion_form.js
+++ b/src-docs/src/views/accordion/accordion_form.js
@@ -16,6 +16,7 @@ import {
   EuiTitle,
   EuiButtonIcon,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const repeatableForm = (
   <EuiForm component="form">
@@ -76,26 +77,31 @@ const extraAction = (
   />
 );
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id="accordionForm1"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l">
-      {repeatableForm}
-    </EuiAccordion>
+export default () => {
+  const accordionID__1 = htmlIdGenerator('accordion')();
+  const accordionID__2 = htmlIdGenerator('accordion')();
 
-    <EuiAccordion
-      id="accordionForm2"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l">
-      {repeatableForm}
-    </EuiAccordion>
-  </div>
-);
+  return (
+    <div>
+      <EuiAccordion
+        id={accordionID__1}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l">
+        {repeatableForm}
+      </EuiAccordion>
+
+      <EuiAccordion
+        id={accordionID__2}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l">
+        {repeatableForm}
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js
index 98a033d3348..8cbc0bfccf7 100644
--- a/src-docs/src/views/accordion/accordion_grow.js
+++ b/src-docs/src/views/accordion/accordion_grow.js
@@ -18,6 +18,7 @@ const Rows = () => {
   }
   const growingAccordianDescriptionId = htmlIdGenerator()();
   const listId = htmlIdGenerator()();
+
   return (
     <EuiText size="s">
       <EuiScreenReaderOnly>
@@ -50,14 +51,18 @@ const Rows = () => {
   );
 };
 
-export default () => (
-  <EuiAccordion
-    id={htmlIdGenerator()()}
-    buttonContent="Click me to toggle close / open"
-    initialIsOpen={true}
-    paddingSize="s">
-    <EuiPanel color="subdued">
-      <Rows />
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <EuiAccordion
+      id={accordionID}
+      buttonContent="Click me to toggle close / open"
+      initialIsOpen={true}
+      paddingSize="s">
+      <EuiPanel color="subdued">
+        <Rows />
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js
index 0d801cfec29..b1b7178a84d 100644
--- a/src-docs/src/views/accordion/accordion_multiple.js
+++ b/src-docs/src/views/accordion/accordion_multiple.js
@@ -6,55 +6,63 @@ import {
   EuiSpacer,
   EuiPanel,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id="accordion3"
-      buttonContent="An accordion with padding applied through props"
-      paddingSize="l">
-      <EuiText size="s">
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-      </EuiText>
-    </EuiAccordion>
+export default () => {
+  const accordionID__1 = htmlIdGenerator('accordion')();
+  const accordionID__2 = htmlIdGenerator('accordion')();
+  const accordionID__3 = htmlIdGenerator('accordion')();
 
-    <EuiSpacer />
+  return (
+    <div>
+      <EuiAccordion
+        id={accordionID__1}
+        buttonContent="An accordion with padding applied through props"
+        paddingSize="l">
+        <EuiText size="s">
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+        </EuiText>
+      </EuiAccordion>
 
-    <EuiAccordion
-      id="accordion4"
-      buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
-      buttonContentClassName="eui-textTruncate"
-      paddingSize="l">
-      <EuiText size="s">
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-      </EuiText>
-    </EuiAccordion>
+      <EuiSpacer />
 
-    <EuiSpacer />
+      <EuiAccordion
+        id={accordionID__2}
+        buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
+        buttonContentClassName="eui-textTruncate"
+        paddingSize="l">
+        <EuiText size="s">
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+        </EuiText>
+      </EuiAccordion>
 
-    <EuiAccordion
-      id="accordion5"
-      buttonContent="A third accordion with a nested accordion"
-      paddingSize="m">
-      <EuiText size="s">
-        <p>
-          This content area will grow to accommodate when the accordion below
-          opens
-        </p>
-      </EuiText>
       <EuiSpacer />
-      <EuiAccordion id="accordion6" buttonContent="A fourth nested accordion">
-        <EuiPanel color="subdued">
-          Any content inside of <strong>EuiAccordion</strong> will appear here.
-        </EuiPanel>
+
+      <EuiAccordion
+        id={accordionID__3}
+        buttonContent="A third accordion with a nested accordion"
+        paddingSize="m">
+        <EuiText size="s">
+          <p>
+            This content area will grow to accommodate when the accordion below
+            opens
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiAccordion id="accordion6" buttonContent="A fourth nested accordion">
+          <EuiPanel color="subdued">
+            Any content inside of <strong>EuiAccordion</strong> will appear
+            here.
+          </EuiPanel>
+        </EuiAccordion>
       </EuiAccordion>
-    </EuiAccordion>
-  </div>
-);
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_open.js b/src-docs/src/views/accordion/accordion_open.js
index 407b79fddf3..20074c8a233 100644
--- a/src-docs/src/views/accordion/accordion_open.js
+++ b/src-docs/src/views/accordion/accordion_open.js
@@ -3,15 +3,19 @@ import React from 'react';
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
 import { htmlIdGenerator } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id={htmlIdGenerator()()}
-      buttonContent="I am opened by default. Click me to toggle close / open"
-      initialIsOpen={true}>
-      <EuiPanel color="subdued">
-        Any content inside of <strong>EuiAccordion</strong> will appear here.
-      </EuiPanel>
-    </EuiAccordion>
-  </div>
-);
+export default () => {
+  const accordionID = htmlIdGenerator('accordion')();
+
+  return (
+    <div>
+      <EuiAccordion
+        id={accordionID}
+        buttonContent="I am opened by default. Click me to toggle close / open"
+        initialIsOpen={true}>
+        <EuiPanel color="subdued">
+          Any content inside of <strong>EuiAccordion</strong> will appear here.
+        </EuiPanel>
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
index 3fe88a99fc1..9b6e8cdf18d 100644
--- a/src-docs/src/views/button/split_button.js
+++ b/src-docs/src/views/button/split_button.js
@@ -10,8 +10,11 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const buttonID = htmlIdGenerator('button')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -43,7 +46,7 @@ export default () => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="splitButtonExamplePopover"
+            id={buttonID}
             button={
               <EuiButtonIcon
                 display="base"
diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
index 268ccc8440e..665c2f6d93d 100644
--- a/src-docs/src/views/context_menu/content_panel.js
+++ b/src-docs/src/views/context_menu/content_panel.js
@@ -6,8 +6,11 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -29,7 +32,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contentPanel"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src-docs/src/views/context_menu/context_menu.js b/src-docs/src/views/context_menu/context_menu.js
index 90ce0f2f9f9..c3dfb816324 100644
--- a/src-docs/src/views/context_menu/context_menu.js
+++ b/src-docs/src/views/context_menu/context_menu.js
@@ -10,8 +10,13 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const switchID__1 = htmlIdGenerator('switch')();
+  const switchID__2 = htmlIdGenerator('switch')();
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -108,7 +113,7 @@ export default () => {
           <EuiFormRow label="Generate a public snapshot?" hasChildLabel={false}>
             <EuiSwitch
               name="switch"
-              id="asdf"
+              id={switchID__1}
               label="Snapshot data"
               checked={true}
               onChange={() => {}}
@@ -119,7 +124,7 @@ export default () => {
             hasChildLabel={false}>
             <EuiSwitch
               name="switch"
-              id="asdf2"
+              id={switchID__2}
               label="Current time range"
               checked={true}
               onChange={() => {}}
@@ -140,7 +145,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contextMenuExample"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src-docs/src/views/context_menu/context_menu_with_content.js b/src-docs/src/views/context_menu/context_menu_with_content.js
index 421639ef39c..97cda71942c 100644
--- a/src-docs/src/views/context_menu/context_menu_with_content.js
+++ b/src-docs/src/views/context_menu/context_menu_with_content.js
@@ -10,6 +10,7 @@ import {
 } from '../../../../src/components';
 
 import EuiTabsExample from '../tabs/tabbed_content';
+import { htmlIdGenerator } from '../../../../src/services';
 
 function flattenPanelTree(tree, array = []) {
   array.push(tree);
@@ -29,6 +30,8 @@ function flattenPanelTree(tree, array = []) {
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [isDynamicPopoverOpen, setDynamicPopover] = useState(false);
+  const popoverID__1 = htmlIdGenerator('popover')();
+  const popoverID__2 = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -111,7 +114,7 @@ export default () => {
   return (
     <React.Fragment>
       <EuiPopover
-        id="contextMenuNormal"
+        id={popoverID__1}
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
@@ -123,7 +126,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiPopover
-        id="contextMenuDynamic"
+        id={popoverID__2}
         button={dynamicButton}
         isOpen={isDynamicPopoverOpen}
         closePopover={closeDynamicPopover}
diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js
index bec8d6b933b..5beaf7a5806 100644
--- a/src-docs/src/views/context_menu/single_panel.js
+++ b/src-docs/src/views/context_menu/single_panel.js
@@ -7,9 +7,12 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [rowSize, setRowSize] = useState(50);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -74,7 +77,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="singlePanel"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src-docs/src/views/context_menu/small.js b/src-docs/src/views/context_menu/small.js
index 782d403afef..920f277c6ff 100644
--- a/src-docs/src/views/context_menu/small.js
+++ b/src-docs/src/views/context_menu/small.js
@@ -7,8 +7,11 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const popoverID = htmlIdGenerator('popover')();
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -38,7 +41,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="smallContextMenuExample"
+      id={popoverID}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
diff --git a/src-docs/src/views/expression/columns.js b/src-docs/src/views/expression/columns.js
index 4e93a4169b8..b4a31fd9048 100644
--- a/src-docs/src/views/expression/columns.js
+++ b/src-docs/src/views/expression/columns.js
@@ -10,6 +10,8 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [example1, setExample1] = useState({
     isOpen: false,
@@ -26,6 +28,9 @@ export default () => {
     value: 'count()',
   });
 
+  const popoverID__1 = htmlIdGenerator('popover')();
+  const popoverID__2 = htmlIdGenerator('popover')();
+
   const options = [
     {
       label: '.kibana_task_manager',
@@ -140,7 +145,7 @@ export default () => {
   return (
     <div style={{ maxWidth: 500 }}>
       <EuiPopover
-        id="columnsPopover1"
+        id={popoverID__1}
         button={
           <EuiExpression
             description="indices"
@@ -162,7 +167,7 @@ export default () => {
       </EuiPopover>
 
       <EuiPopover
-        id="columnsPopover2"
+        id={popoverID__2}
         panelPaddingSize="s"
         button={
           <EuiExpression
diff --git a/src-docs/src/views/expression/expression.js b/src-docs/src/views/expression/expression.js
index ca7730ee389..fae4ca55e3b 100644
--- a/src-docs/src/views/expression/expression.js
+++ b/src-docs/src/views/expression/expression.js
@@ -10,6 +10,8 @@ import {
   EuiExpression,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 // Rise the popovers above GuidePageSideNav
 const POPOVER_STYLE = { zIndex: '200' };
 
@@ -24,6 +26,9 @@ export default () => {
     description: 'Is above',
   });
 
+  const popoverID__1 = htmlIdGenerator('popover')();
+  const popoverID__2 = htmlIdGenerator('popover')();
+
   const openExample1 = () => {
     setExample1({
       ...example1,
@@ -132,7 +137,7 @@ export default () => {
     <EuiFlexGroup gutterSize="s">
       <EuiFlexItem grow={false}>
         <EuiPopover
-          id="popover1"
+          id={popoverID__1}
           button={
             <EuiExpression
               description="when"
@@ -151,7 +156,7 @@ export default () => {
 
       <EuiFlexItem grow={false}>
         <EuiPopover
-          id="popover2"
+          id={popoverID__2}
           panelPaddingSize="s"
           button={
             <EuiExpression
diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
index ff9fd049086..fce1abd85e2 100644
--- a/src-docs/src/views/flyout/flyout.js
+++ b/src-docs/src/views/flyout/flyout.js
@@ -10,8 +10,11 @@ import {
   EuiCodeBlock,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
 
@@ -32,10 +35,10 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="flyoutTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutTitle">A typical flyout</h2>
+            <h2 id={flyoutID__title}>A typical flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.js
index 5f68f49813d..0b15190cbcb 100644
--- a/src-docs/src/views/flyout/flyout_banner.js
+++ b/src-docs/src/views/flyout/flyout_banner.js
@@ -11,8 +11,11 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
@@ -34,10 +37,10 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutWithBannerTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutWithBannerTitle">A flyout with a banner</h2>
+            <h2 id={flyoutID__title}>A flyout with a banner</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={callOut}>
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index f432e5d1cce..3264a47163c 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -23,12 +23,15 @@ import {
   EuiSuperSelect,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('1');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [superSelectvalue, setSuperSelectValue] = useState('option_one');
   const [isExpressionOpen, setIsExpressionOpen] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const tabs = [
     {
@@ -182,10 +185,10 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         hideCloseButton
-        aria-labelledby="flyoutComplicatedTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutComplicatedTitle">Flyout header</h2>
+            <h2 id={flyoutID__title}>Flyout header</h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText color="subdued">
diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js
index d7e5b591d38..82eb690df0b 100644
--- a/src-docs/src/views/flyout/flyout_large.js
+++ b/src-docs/src/views/flyout/flyout_large.js
@@ -10,10 +10,13 @@ import {
   EuiButtonGroup,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [size, setSize] = useState('l');
   const [sizeName, setSizeName] = useState('large');
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const sizes = [
     {
@@ -45,10 +48,10 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         size={size}
-        aria-labelledby="flyoutLargeTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutLargeTitle">A {sizeName.toLowerCase()} flyout</h2>
+            <h2 id={flyoutID__title}>A {sizeName.toLowerCase()} flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
index 33b246a0cb4..f79575fa058 100644
--- a/src-docs/src/views/flyout/flyout_max_width.js
+++ b/src-docs/src/views/flyout/flyout_max_width.js
@@ -16,10 +16,13 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [flyoutSize, setFlyoutSize] = useState('m');
   const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
@@ -49,12 +52,12 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutMaxWidthTitle"
+        aria-labelledby={flyoutID__title}
         size={flyoutSize}
         maxWidth={flyoutMaxWidth}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMaxWidthTitle">{maxWidthTitle} maxWidth</h2>
+            <h2 id={flyoutID__title}>{maxWidthTitle} maxWidth</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_padding_medium.js b/src-docs/src/views/flyout/flyout_padding_medium.js
index fb2d75acbe6..c994f221f11 100644
--- a/src-docs/src/views/flyout/flyout_padding_medium.js
+++ b/src-docs/src/views/flyout/flyout_padding_medium.js
@@ -15,10 +15,14 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [paddingSize, setPaddingSize] = useState('l');
   const [paddingSizeName, setPaddingSizeName] = useState('large');
+  const flyoutID = htmlIdGenerator('flyout')();
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   const sizes = [
     {
@@ -56,11 +60,11 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         paddingSize={paddingSize}
-        id="flyoutMediumPadding"
-        aria-labelledby="flyoutMediumPaddingTitle">
+        id={flyoutID}
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMediumPaddingTitle">
+            <h2 id={flyoutID__title}>
               A flyout with a {paddingSizeName} padding
             </h2>
           </EuiTitle>
@@ -107,7 +111,7 @@ export default () => {
     <>
       <EuiButton
         onClick={showFlyout}
-        aria-controls="flyoutMediumPadding"
+        aria-controls={flyoutID}
         aria-expanded={isFlyoutVisible}
         aria-haspopup="true"
         aria-label="Show padding size flyout">
diff --git a/src-docs/src/views/flyout/flyout_push.js b/src-docs/src/views/flyout/flyout_push.js
index 5ba18cebc6b..237ce8fedd9 100644
--- a/src-docs/src/views/flyout/flyout_push.js
+++ b/src-docs/src/views/flyout/flyout_push.js
@@ -10,8 +10,11 @@ import {
   EuiFlyoutFooter,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
 
@@ -21,10 +24,10 @@ export default () => {
         type="push"
         size="s"
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="pushedFlyoutTitle">
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="pushedFlyoutTitle">A pushed flyout</h2>
+            <h2 id={flyoutID__title}>A pushed flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_small.js
index 852791c5bdf..1d09d482b5d 100644
--- a/src-docs/src/views/flyout/flyout_small.js
+++ b/src-docs/src/views/flyout/flyout_small.js
@@ -8,6 +8,7 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
+
 import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
@@ -17,7 +18,7 @@ export default () => {
 
   const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);
 
-  const flyoutTitleId = htmlIdGenerator('flyout')();
+  const flyoutID__title = htmlIdGenerator('flyout')();
 
   let flyout;
   if (isFlyoutVisible) {
@@ -25,10 +26,10 @@ export default () => {
       <EuiFlyout
         ownFocus={false}
         onClose={closeFlyout}
-        aria-labelledby={flyoutTitleId}>
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id={flyoutTitleId}>A flyout without ownFocus</h2>
+            <h2 id={flyoutID__title}>A flyout without ownFocus</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js
index 0da079e8076..6f96d676327 100644
--- a/src-docs/src/views/form_compressed/complex_example.js
+++ b/src-docs/src/views/form_compressed/complex_example.js
@@ -86,6 +86,12 @@ export default () => {
     setGranularityToggleButtonsIdSelected,
   ] = useState(`${idPrefix}4`);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+  const selectID__1 = htmlIdGenerator('select')();
+  const selectID__2 = htmlIdGenerator('select')();
+  const selectToolTipID = htmlIdGenerator('select-tooltip')();
+
   const onPopoverSliderValueChange = (e) => {
     setPopoverSliderValues(e.target.value);
   };
@@ -144,7 +150,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID__1}
           showInput
           compressed
           value={opacityValue}
@@ -156,7 +162,7 @@ export default () => {
       <EuiSpacer size="s" />
 
       <EuiScreenReaderOnly>
-        <span id="docsExampleSelectTooltipContent">{selectTooltipContent}</span>
+        <span id={selectToolTipID}>{selectTooltipContent}</span>
       </EuiScreenReaderOnly>
       <EuiFormRow
         label={
@@ -261,7 +267,7 @@ export default () => {
       <EuiFormRow label="Label" display="columnCompressed">
         <div>
           <EuiSelect
-            id="docsExampleLabelFont"
+            id={selectID__1}
             options={[
               { value: 'inter', text: 'Inter UI' },
               { value: 'roboto', text: 'Roboto' },
@@ -312,7 +318,7 @@ export default () => {
       <EuiFlexGroup gutterSize="s" responsive={false} wrap>
         <EuiFlexItem style={{ flexBasis: 72 }}>
           <EuiRange
-            id="docsExampleBorderSize"
+            id={rangeID__2}
             showInput="inputWithPopover"
             min={0}
             max={32}
@@ -324,7 +330,7 @@ export default () => {
         </EuiFlexItem>
         <EuiFlexItem grow={4} style={{ minWidth: 160 }}>
           <EuiSelect
-            id="docsExampleBorderStyle"
+            id={selectID__2}
             options={[
               { value: 'dashed', text: 'Dashed' },
               { value: 'dotted', text: 'Dotted' },
diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
index 42c0dc21ba2..5b30e592b0c 100644
--- a/src-docs/src/views/form_compressed/form_compressed.js
+++ b/src-docs/src/views/form_compressed/form_compressed.js
@@ -17,6 +17,7 @@ import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
   const idPrefix = htmlIdGenerator()();
+  const rangeID = htmlIdGenerator('range')();
 
   const [checkboxes] = useState([
     {
@@ -102,7 +103,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID}
           showInput
           compressed
           value={value}
diff --git a/src-docs/src/views/form_compressed/form_horizontal.js b/src-docs/src/views/form_compressed/form_horizontal.js
index 06ed6c015a9..54b5934ec99 100644
--- a/src-docs/src/views/form_compressed/form_horizontal.js
+++ b/src-docs/src/views/form_compressed/form_horizontal.js
@@ -11,10 +11,13 @@ import {
   EuiPanel,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isSwitchChecked, setIsSwitchChecked] = useState(false);
   const [comboBoxSelectionOptions, setComboBoxSelectionOptions] = useState([]);
   const [value, setValue] = useState('20');
+  const rangeID = htmlIdGenerator('range')();
 
   const onRangeChange = (e) => {
     setValue(e.target.value);
@@ -68,7 +71,7 @@ export default () => {
           min={0}
           max={100}
           name="range"
-          id="range"
+          id={rangeID}
           showInput
           compressed
           value={value}
diff --git a/src-docs/src/views/form_controls/checkbox.js b/src-docs/src/views/form_controls/checkbox.js
index 2d8c5359e13..4d76276203e 100644
--- a/src-docs/src/views/form_controls/checkbox.js
+++ b/src-docs/src/views/form_controls/checkbox.js
@@ -8,6 +8,11 @@ export default () => {
   const [checked, setChecked] = useState(false);
   const [indeterminate, setindeterminate] = useState(true);
 
+  const checkboxID__1 = htmlIdGenerator('checkbox')();
+  const checkboxID__2 = htmlIdGenerator('checkbox')();
+  const checkboxID__3 = htmlIdGenerator('checkbox')();
+  const checkboxID__4 = htmlIdGenerator('checkbox')();
+
   const onChange = (e) => {
     setChecked(e.target.checked);
   };
@@ -19,7 +24,7 @@ export default () => {
   return (
     <Fragment>
       <EuiCheckbox
-        id={htmlIdGenerator()()}
+        id={checkboxID__1}
         label="I am a checkbox"
         checked={checked}
         onChange={(e) => onChange(e)}
@@ -28,7 +33,7 @@ export default () => {
       <EuiSpacer size="m" />
 
       <EuiCheckbox
-        id={htmlIdGenerator()()}
+        id={checkboxID__2}
         label="I am an indeterminate checkbox"
         indeterminate={indeterminate}
         onChange={() => onChangeIndeterminate()}
@@ -37,7 +42,7 @@ export default () => {
       <EuiSpacer size="m" />
 
       <EuiCheckbox
-        id={htmlIdGenerator()()}
+        id={checkboxID__3}
         label="I am a disabled checkbox"
         checked={checked}
         onChange={(e) => onChange(e)}
@@ -47,7 +52,7 @@ export default () => {
       <EuiSpacer size="m" />
 
       <EuiCheckbox
-        id={htmlIdGenerator()()}
+        id={checkboxID__4}
         label="I am a compressed checkbox"
         checked={checked}
         onChange={(e) => onChange(e)}
diff --git a/src-docs/src/views/form_controls/file_picker.js b/src-docs/src/views/form_controls/file_picker.js
index ebb24cc0aa3..f44e21310a1 100644
--- a/src-docs/src/views/form_controls/file_picker.js
+++ b/src-docs/src/views/form_controls/file_picker.js
@@ -10,10 +10,14 @@ import {
   EuiSwitch,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [files, setFiles] = useState({});
   const [large, setLarge] = useState(true);
 
+  const filePickerID = htmlIdGenerator('filepicker')();
+
   const onChange = (files) => {
     setFiles(files.length > 0 ? files : {});
   };
@@ -54,7 +58,7 @@ export default () => {
               />,
             ]}>
             <EuiFilePicker
-              id="asdf2"
+              id={filePickerID}
               multiple
               initialPromptText="Select or drag and drop multiple files"
               onChange={(files) => {
diff --git a/src-docs/src/views/form_controls/file_picker_remove.js b/src-docs/src/views/form_controls/file_picker_remove.js
index ecb62eafc3b..2e374bce756 100644
--- a/src-docs/src/views/form_controls/file_picker_remove.js
+++ b/src-docs/src/views/form_controls/file_picker_remove.js
@@ -7,10 +7,14 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [files, setFiles] = useState({});
   const filePickerRef = useRef();
 
+  const filePickerID = htmlIdGenerator('filepicker')();
+
   const onChange = (files) => {
     setFiles(files.length > 0 ? files : {});
   };
@@ -21,7 +25,7 @@ export default () => {
         <EuiFlexItem>
           <EuiFilePicker
             ref={filePickerRef}
-            id="programmatic"
+            id={filePickerID}
             multiple
             initialPromptText="Select or drag and drop multiple files"
             onChange={onChange}
diff --git a/src-docs/src/views/form_controls/radio.js b/src-docs/src/views/form_controls/radio.js
index 18731d5d31a..8f9e5af1431 100644
--- a/src-docs/src/views/form_controls/radio.js
+++ b/src-docs/src/views/form_controls/radio.js
@@ -7,6 +7,10 @@ import { htmlIdGenerator } from '../../../../src/services';
 export default () => {
   const [checked, setChecked] = useState(false);
 
+  const radioID__1 = htmlIdGenerator('radio')();
+  const radioID__2 = htmlIdGenerator('radio')();
+  const radioID__3 = htmlIdGenerator('radio')();
+
   const onChange = (e) => {
     setChecked(e.target.checked);
   };
@@ -14,7 +18,7 @@ export default () => {
   return (
     <Fragment>
       <EuiRadio
-        id={htmlIdGenerator()()}
+        id={radioID__1}
         label="I am a radio"
         checked={checked}
         onChange={(e) => onChange(e)}
@@ -23,7 +27,7 @@ export default () => {
       <EuiSpacer size="m" />
 
       <EuiRadio
-        id={htmlIdGenerator()()}
+        id={radioID__2}
         label="I am a disabled radio"
         checked={checked}
         onChange={(e) => onChange(e)}
@@ -33,7 +37,7 @@ export default () => {
       <EuiSpacer size="m" />
 
       <EuiRadio
-        id={htmlIdGenerator()()}
+        id={radioID__3}
         label="I am a compressed radio"
         checked={checked}
         onChange={(e) => onChange(e)}
diff --git a/src-docs/src/views/form_controls/select.js b/src-docs/src/views/form_controls/select.js
index b8b7f96183d..7a1da42449e 100644
--- a/src-docs/src/views/form_controls/select.js
+++ b/src-docs/src/views/form_controls/select.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { EuiSelect } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
   const options = [
@@ -11,6 +12,7 @@ export default () => {
   ];
 
   const [value, setValue] = useState(options[1].value);
+  const selectID = htmlIdGenerator('select')();
 
   const onChange = (e) => {
     setValue(e.target.value);
@@ -20,7 +22,7 @@ export default () => {
     /* DisplayToggles wrapper for Docs only */
     <DisplayToggles canPrepend canAppend canReadOnly={false}>
       <EuiSelect
-        id="selectDocExample"
+        id={selectID}
         options={options}
         value={value}
         onChange={(e) => onChange(e)}
diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
index 506b40b3a9e..8ff698568f7 100644
--- a/src-docs/src/views/form_layouts/inline_popover.js
+++ b/src-docs/src/views/form_layouts/inline_popover.js
@@ -21,6 +21,10 @@ export default () => {
   const [isPopover2Open, setIsPopover2Open] = useState(false);
   const [isSwitchChecked, setIsSwitchChecked] = useState(true);
 
+  const switchID = htmlIdGenerator('switch')();
+  const popoverID__1 = htmlIdGenerator('popover')();
+  const popoverID__2 = htmlIdGenerator('popover')();
+
   const onButtonClick = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
@@ -87,7 +91,7 @@ export default () => {
     <EuiForm component="form">
       <EuiFormRow>
         <EuiSwitch
-          id={htmlIdGenerator()()}
+          id={switchID}
           name="popswitch"
           label="Isn't this popover form cool?"
           checked={isSwitchChecked}
@@ -111,7 +115,7 @@ export default () => {
   return (
     <div>
       <EuiPopover
-        id="inlineFormPopover"
+        id={popoverID__1}
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}>
@@ -119,7 +123,7 @@ export default () => {
       </EuiPopover>
       &emsp;
       <EuiPopover
-        id="formPopover"
+        id={popoverID__2}
         button={button2}
         isOpen={isPopover2Open}
         closePopover={closePopover2}
diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
index c349637bd56..13ded8d761c 100644
--- a/src-docs/src/views/header/header_alert.js
+++ b/src-docs/src/views/header/header_alert.js
@@ -33,6 +33,10 @@ const HeaderUpdates = () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
 
+  const flyoutID = htmlIdGenerator('flyout')();
+  const flyoutID__title = htmlIdGenerator('flyout')();
+  const popoverID = htmlIdGenerator('popoverID')();
+
   const alerts = [
     {
       title: 'Control access to features',
@@ -127,7 +131,7 @@ const HeaderUpdates = () => {
 
   const bellButton = (
     <EuiHeaderSectionItemButton
-      aria-controls="headerFlyoutNewsFeed"
+      aria-controls={flyoutID}
       aria-expanded={isFlyoutVisible}
       aria-haspopup="true"
       aria-label={'Alerts feed: Updates available'}
@@ -139,7 +143,7 @@ const HeaderUpdates = () => {
 
   const cheerButton = (
     <EuiHeaderSectionItemButton
-      aria-controls="headerPopoverNewsFeed"
+      aria-controls={popoverID}
       aria-expanded={isPopoverVisible}
       aria-haspopup="true"
       aria-label={"News feed: Updates available'"}
@@ -154,11 +158,11 @@ const HeaderUpdates = () => {
       <EuiFlyout
         onClose={closeFlyout}
         size="s"
-        id="headerFlyoutNewsFeed"
-        aria-labelledby="flyoutSmallTitle">
+        id={flyoutID}
+        aria-labelledby={flyoutID__title}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id="flyoutSmallTitle">What&apos;s new</h2>
+            <h2 id={flyoutID__title}>What&apos;s new</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
@@ -196,7 +200,7 @@ const HeaderUpdates = () => {
 
   const popover = (
     <EuiPopover
-      id="headerPopoverNewsFeed"
+      id={popoverID}
       ownFocus
       repositionOnScroll
       button={cheerButton}
diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js
index e2202ca0561..2476a8ba9d9 100644
--- a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js
+++ b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable.js
@@ -6,40 +6,44 @@ import {
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
+  const [keypadButtonID__1] = useState(htmlIdGenerator('keypad-button')());
+  const [keypadButtonID__2] = useState(htmlIdGenerator('keypad-button')());
+  const [keypadButtonID__3] = useState(htmlIdGenerator('keypad-button')());
+
   const radioGroupName = 'singleKeypadSelect';
-  const [singleSelectedID, setSingleSelectedID] = useState(
-    'singleKeypadSelect1'
-  );
+  const [singleSelectedID, setSingleSelectedID] = useState(keypadButtonID__1);
 
   return (
     <EuiKeyPadMenu checkable={{ ariaLegend: 'Single select as radios' }}>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect1"
+        id={keypadButtonID__1}
         label="Radio one"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect1'}>
+        isSelected={singleSelectedID === keypadButtonID__1}>
         <EuiIcon type="faceHappy" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect2"
+        id={keypadButtonID__2}
         label="Radio two"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect2'}>
+        isSelected={singleSelectedID === keypadButtonID__2}>
         <EuiIcon type="faceNeutral" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect3"
+        id={keypadButtonID__3}
         label="Disabled"
         isDisabled>
         <EuiIcon type="faceSad" size="l" />
diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js
index 511f479ba1a..bd505dd032f 100644
--- a/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js
+++ b/src-docs/src/views/key_pad_menu/key_pad_menu_checkable_multi.js
@@ -6,14 +6,21 @@ import {
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [multiSelect1isSelected, setmultiSelect1isSelected] = useState(true);
   const [multiSelect3isSelected, setmultiSelect2isSelected] = useState(false);
 
+  const keypadButtonID__1 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__2 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__3 = htmlIdGenerator('keypad-button')();
+
   return (
     <EuiKeyPadMenu checkable={{ legend: 'Multi select as checkboxes' }}>
       <EuiKeyPadMenuItem
         checkable="multi"
+        id={keypadButtonID__1}
         isSelected={multiSelect1isSelected}
         label="Check one"
         onChange={() => {
@@ -24,7 +31,7 @@ export default () => {
       <EuiKeyPadMenuItem
         checkable="multi"
         isSelected={multiSelect3isSelected}
-        id="multiKeypadSelect2a"
+        id={keypadButtonID__2}
         label="Check two"
         onChange={() => {
           setmultiSelect2isSelected((selected) => !selected);
@@ -33,7 +40,7 @@ export default () => {
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="multi"
-        id="multiKeypadSelect3a"
+        id={keypadButtonID__3}
         label="Disabled"
         isDisabled>
         <EuiIcon type="faceSad" size="l" />
diff --git a/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js b/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js
index d66d79a4407..7f2c75881d6 100644
--- a/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js
+++ b/src-docs/src/views/key_pad_menu/key_pad_menu_item_button.js
@@ -5,50 +5,57 @@ import {
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
-  const [selectedID, setSelectedID] = useState('keypadButton6');
+  const keypadButtonID__1 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__2 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__3 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__4 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__5 = htmlIdGenerator('keypad-button')();
+  const keypadButtonID__6 = htmlIdGenerator('keypad-button')();
+  const [selectedID, setSelectedID] = useState(keypadButtonID__6);
 
   return (
     <EuiKeyPadMenu>
       <EuiKeyPadMenuItem
-        id="keypadButton1"
+        id={keypadButtonID__1}
         label="Button"
-        isSelected={selectedID === 'keypadButton1'}
-        onClick={() => setSelectedID('keypadButton1')}>
+        isSelected={selectedID === keypadButtonID__1}
+        onClick={() => setSelectedID(keypadButtonID__1)}>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton3"
+        id={keypadButtonID__2}
         label="Button"
-        isSelected={selectedID === 'keypadButton3'}
-        onClick={() => setSelectedID('keypadButton3')}>
+        isSelected={selectedID === keypadButtonID__2}
+        onClick={() => setSelectedID(keypadButtonID__2)}>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
-      <EuiKeyPadMenuItem id="keypadButton2" label="Disabled" isDisabled>
+      <EuiKeyPadMenuItem id={keypadButtonID__3} label="Disabled" isDisabled>
         <EuiIcon type="grid" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton4"
+        id={keypadButtonID__4}
         label="Link"
         href="#/navigation/key-pad-menu"
-        isSelected={selectedID === 'keypadButton4'}
-        onClick={() => setSelectedID('keypadButton4')}>
+        isSelected={selectedID === keypadButtonID__4}
+        onClick={() => setSelectedID(keypadButtonID__4)}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton5"
+        id={keypadButtonID__5}
         label="Link"
         href="#/navigation/key-pad-menu"
-        isSelected={selectedID === 'keypadButton5'}
-        onClick={() => setSelectedID('keypadButton5')}>
+        isSelected={selectedID === keypadButtonID__5}
+        onClick={() => setSelectedID(keypadButtonID__5)}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
-        id="keypadButton6"
+        id={keypadButtonID__6}
         label="Disabled"
         isDisabled
-        isSelected={selectedID === 'keypadButton6'}>
+        isSelected={selectedID === keypadButtonID__6}>
         <EuiIcon type="link" size="l" />
       </EuiKeyPadMenuItem>
     </EuiKeyPadMenu>
diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.js
index 6cbdd4518a5..dbad52b0e65 100644
--- a/src-docs/src/views/list_group/list_group_link_actions.js
+++ b/src-docs/src/views/list_group/list_group_link_actions.js
@@ -2,35 +2,43 @@ import React, { useState } from 'react';
 
 import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
+  const [linkID__1] = useState(htmlIdGenerator('link')());
+  const [linkID__2] = useState(htmlIdGenerator('link')());
+  const [linkID__3] = useState(htmlIdGenerator('link')());
+  const [linkID__4] = useState(htmlIdGenerator('link')());
+  const [linkID__5] = useState(htmlIdGenerator('link')());
+
   const [favorite1, setFavorite1] = useState(undefined);
-  const [favorite2, setFavorite2] = useState('link2');
+  const [favorite2, setFavorite2] = useState(linkID__2);
   const [favorite3, setFavorite3] = useState(undefined);
   const [favorite4, setFavorite4] = useState(undefined);
 
   const link1Clicked = () => {
-    setFavorite1(favorite1 === 'link1' ? undefined : 'link1');
+    setFavorite1(favorite1 === linkID__1 ? undefined : linkID__1);
     if (favorite1 === undefined) {
       document.activeElement.blur();
     }
   };
 
   const link2Clicked = () => {
-    setFavorite2(favorite2 === 'link2' ? undefined : 'link2');
+    setFavorite2(favorite2 === linkID__2 ? undefined : linkID__2);
     if (favorite2 === undefined) {
       document.activeElement.blur();
     }
   };
 
   const link3Clicked = () => {
-    setFavorite3(favorite3 === 'link3' ? undefined : 'link3');
+    setFavorite3(favorite3 === linkID__3 ? undefined : linkID__3);
     if (favorite3 === undefined) {
       document.activeElement.blur();
     }
   };
 
   const link4Clicked = () => {
-    setFavorite4(favorite4 === 'link4' ? undefined : 'link4');
+    setFavorite4(favorite4 === linkID__4 ? undefined : linkID__4);
     if (favorite3 === undefined) {
       document.activeElement.blur();
     }
@@ -39,7 +47,7 @@ export default () => {
   return (
     <EuiListGroup maxWidth={288}>
       <EuiListGroupItem
-        id="link1"
+        id={linkID__1}
         iconType="bullseye"
         label="EUI button link"
         onClick={() => {}}
@@ -47,30 +55,30 @@ export default () => {
         extraAction={{
           color: 'subdued',
           onClick: link1Clicked,
-          iconType: favorite1 === 'link1' ? 'starFilled' : 'starEmpty',
+          iconType: favorite1 === linkID__1 ? 'starFilled' : 'starEmpty',
           iconSize: 's',
           'aria-label': 'Favorite link1',
-          alwaysShow: favorite1 === 'link1',
+          alwaysShow: favorite1 === linkID__1,
         }}
       />
 
       <EuiListGroupItem
-        id="link2"
+        id={linkID__2}
         iconType="visualizeApp"
         onClick={() => {}}
         label="EUI button link"
         extraAction={{
           color: 'subdued',
           onClick: link2Clicked,
-          iconType: favorite2 === 'link2' ? 'starFilled' : 'starEmpty',
+          iconType: favorite2 === linkID__2 ? 'starFilled' : 'starEmpty',
           iconSize: 's',
           'aria-label': 'Favorite link2',
-          alwaysShow: favorite2 === 'link2',
+          alwaysShow: favorite2 === linkID__2,
         }}
       />
 
       <EuiListGroupItem
-        id="link3"
+        id={linkID__3}
         iconType="lensApp"
         iconProps={{ color: 'default' }}
         onClick={() => {}}
@@ -78,31 +86,31 @@ export default () => {
         extraAction={{
           color: 'subdued',
           onClick: link3Clicked,
-          iconType: favorite3 === 'link3' ? 'starFilled' : 'starEmpty',
+          iconType: favorite3 === linkID__3 ? 'starFilled' : 'starEmpty',
           iconSize: 's',
           'aria-label': 'Favorite link3',
-          alwaysShow: favorite3 === 'link3',
+          alwaysShow: favorite3 === linkID__3,
         }}
       />
 
       <EuiListGroupItem
-        id="link4"
+        id={linkID__4}
         onClick={() => {}}
         iconType="broom"
         label="EUI button link"
         extraAction={{
           color: 'subdued',
           onClick: link4Clicked,
-          iconType: favorite4 === 'link4' ? 'starFilled' : 'starEmpty',
+          iconType: favorite4 === linkID__4 ? 'starFilled' : 'starEmpty',
           iconSize: 's',
           'aria-label': 'Favorite link4',
-          alwaysShow: favorite3 === 'link4',
+          alwaysShow: favorite3 === linkID__4,
           isDisabled: true,
         }}
       />
 
       <EuiListGroupItem
-        id="link5"
+        id={linkID__5}
         iconType="brush"
         isDisabled
         label="EUI button link"
diff --git a/src-docs/src/views/modal/modal_form.js b/src-docs/src/views/modal/modal_form.js
index bbd0ca93e1d..5b10080f2bd 100644
--- a/src-docs/src/views/modal/modal_form.js
+++ b/src-docs/src/views/modal/modal_form.js
@@ -24,6 +24,9 @@ export default () => {
   const [isSwitchChecked, setIsSwitchChecked] = useState(true);
   const [superSelectvalue, setSuperSelectValue] = useState('option_one');
 
+  const formID = htmlIdGenerator('form')();
+  const switchID = htmlIdGenerator('switch')();
+
   const onSwitchChange = () =>
     setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked);
 
@@ -77,10 +80,10 @@ export default () => {
   ];
 
   const formSample = (
-    <EuiForm id="modalFormId" component="form">
+    <EuiForm id={formID} component="form">
       <EuiFormRow>
         <EuiSwitch
-          id={htmlIdGenerator()()}
+          id={switchID}
           name="popswitch"
           label="Isn't this modal form cool?"
           checked={isSwitchChecked}
@@ -128,7 +131,7 @@ export default () => {
         <EuiModalFooter>
           <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
 
-          <EuiButton type="submit" form="modalFormId" onClick={closeModal} fill>
+          <EuiButton type="submit" form={formID} onClick={closeModal} fill>
             Save
           </EuiButton>
         </EuiModalFooter>
diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
index c1109085e1b..78c72141bd8 100644
--- a/src-docs/src/views/popover/trap_focus.js
+++ b/src-docs/src/views/popover/trap_focus.js
@@ -8,8 +8,12 @@ import {
   EuiSwitch,
 } from '../../../../src/components';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const formRowID__1 = htmlIdGenerator('formrow')();
+  const formRowID__2 = htmlIdGenerator('formrow')();
 
   const onButtonClick = () =>
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
@@ -27,10 +31,10 @@ export default () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      initialFocus="[id=asdf2]">
+      initalFocus={`[id=${formRowID__2}]`}>
       <EuiFormRow
         label="Generate a public snapshot?"
-        id="asdf"
+        id={formRowID__1}
         hasChildLabel={false}>
         <EuiSwitch
           name="switch"
@@ -40,7 +44,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Include the following in the embed" id="asdf2">
+      <EuiFormRow label="Include the following in the embed" id={formRowID__2}>
         <EuiSwitch
           name="switch"
           label="Current time range"
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
index e8eda53b7ab..4ba932d6d53 100644
--- a/src-docs/src/views/range/dual_range.js
+++ b/src-docs/src/views/range/dual_range.js
@@ -7,11 +7,13 @@ import { htmlIdGenerator } from '../../../../src/services';
 export default () => {
   const [value, setValue] = useState(['100', '150']);
   const [value2, setValue2] = useState(['40', '60']);
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
 
   return (
     <>
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__1}
         min={0}
         max={300}
         step={10}
@@ -30,7 +32,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__2}
         min={0}
         max={100}
         step={1}
diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js
index 4df4cad1dd2..32de8a8b071 100644
--- a/src-docs/src/views/range/input.js
+++ b/src-docs/src/views/range/input.js
@@ -8,6 +8,9 @@ export default () => {
   const [value, setValue] = useState('20');
   const [dualValue, setDualValue] = useState([20, 100]);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+
   const onChange = (e) => {
     setValue(e.target.value);
   };
@@ -19,7 +22,7 @@ export default () => {
   return (
     <Fragment>
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__1}
         value={value}
         onChange={onChange}
         showInput
@@ -29,7 +32,7 @@ export default () => {
       <EuiSpacer size="xl" />
 
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__2}
         value={dualValue}
         onChange={onDualChange}
         showInput
diff --git a/src-docs/src/views/range/input_only.js b/src-docs/src/views/range/input_only.js
index 6df4400efd7..8a3db236e5a 100644
--- a/src-docs/src/views/range/input_only.js
+++ b/src-docs/src/views/range/input_only.js
@@ -9,6 +9,9 @@ export default () => {
   const [value, setValue] = useState('20');
   const [dualValue, setDualValue] = useState([20, 100]);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+
   const onChange = (e) => {
     setValue(e.target.value);
   };
@@ -34,7 +37,7 @@ export default () => {
     <Fragment>
       <DisplayToggles canAppend canPrepend>
         <EuiRange
-          id={htmlIdGenerator()()}
+          id={rangeID__1}
           value={value}
           onChange={onChange}
           showInput="inputWithPopover"
@@ -47,7 +50,7 @@ export default () => {
 
       <DisplayToggles canAppend canPrepend canLoading={false}>
         <EuiDualRange
-          id={htmlIdGenerator()()}
+          id={rangeID__2}
           value={dualValue}
           onChange={onDualChange}
           showInput="inputWithPopover"
diff --git a/src-docs/src/views/range/levels.js b/src-docs/src/views/range/levels.js
index 50d728a60ae..ca074e1bf2d 100644
--- a/src-docs/src/views/range/levels.js
+++ b/src-docs/src/views/range/levels.js
@@ -13,6 +13,9 @@ export default () => {
   const [value, setvalue] = useState('20');
   const [dualValue, setDualValue] = useState([20, 100]);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+
   const levels = [
     {
       min: 0,
@@ -37,7 +40,7 @@ export default () => {
   return (
     <Fragment>
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__1}
         value={value}
         onChange={(e) => onChange(e)}
         showTicks
@@ -52,7 +55,7 @@ export default () => {
 
       <EuiSpacer size="xl" />
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__2}
         value={dualValue}
         onChange={(value) => onDualChange(value)}
         showTicks
diff --git a/src-docs/src/views/range/range.js b/src-docs/src/views/range/range.js
index 243b0c1c605..f23a9a077a4 100644
--- a/src-docs/src/views/range/range.js
+++ b/src-docs/src/views/range/range.js
@@ -6,6 +6,9 @@ import { htmlIdGenerator } from '../../../../src/services';
 
 export default () => {
   const [value, setValue] = useState('120');
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+  const rangeID__3 = htmlIdGenerator('range')();
 
   const onChange = (e) => {
     setValue(e.target.value);
@@ -14,7 +17,7 @@ export default () => {
   return (
     <Fragment>
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__1}
         min={100}
         max={200}
         step={0.05}
@@ -27,7 +30,7 @@ export default () => {
       <EuiSpacer size="xl" />
 
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__2}
         min={100}
         max={200}
         value={value}
@@ -40,7 +43,7 @@ export default () => {
       <EuiSpacer size="xl" />
 
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__3}
         min={100}
         max={200}
         value={value}
diff --git a/src-docs/src/views/range/states.js b/src-docs/src/views/range/states.js
index c23f16e3890..b702f3fc7e1 100644
--- a/src-docs/src/views/range/states.js
+++ b/src-docs/src/views/range/states.js
@@ -8,6 +8,10 @@ import { htmlIdGenerator } from '../../../../src/services';
 export default () => {
   const [value, setValue] = useState('20');
   const [dualValue, setDualValue] = useState([20, 100]);
+
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+
   const levels = [
     {
       min: 0,
@@ -33,7 +37,7 @@ export default () => {
     <Fragment>
       <DisplayToggles canAppend canPrepend canLoading={false}>
         <EuiRange
-          id={htmlIdGenerator()()}
+          id={rangeID__1}
           value={value}
           onChange={onChange}
           showTicks
@@ -51,7 +55,7 @@ export default () => {
 
       <DisplayToggles canLoading={false}>
         <EuiDualRange
-          id={htmlIdGenerator()()}
+          id={rangeID__2}
           value={dualValue}
           onChange={onDualChange}
           showLabels
diff --git a/src-docs/src/views/range/ticks.js b/src-docs/src/views/range/ticks.js
index 2ae0789dec2..98ca07bc98e 100644
--- a/src-docs/src/views/range/ticks.js
+++ b/src-docs/src/views/range/ticks.js
@@ -13,6 +13,11 @@ export default () => {
   const [value, setValue] = useState('20');
   const [dualValue, setDualValue] = useState([20, 100]);
 
+  const rangeID__1 = htmlIdGenerator('range')();
+  const rangeID__2 = htmlIdGenerator('range')();
+  const rangeID__3 = htmlIdGenerator('range')();
+  const rangeID__4 = htmlIdGenerator('range')();
+
   const onChange = (e) => {
     setValue(e.target.value);
   };
@@ -24,7 +29,7 @@ export default () => {
   return (
     <Fragment>
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__1}
         step={10}
         value={value}
         onChange={onChange}
@@ -41,7 +46,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiRange
-        id={htmlIdGenerator()()}
+        id={rangeID__2}
         value={value}
         onChange={onChange}
         showInput
@@ -60,7 +65,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__3}
         value={dualValue}
         onChange={onDualChange}
         showTicks
@@ -81,7 +86,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiDualRange
-        id={htmlIdGenerator()()}
+        id={rangeID__4}
         value={dualValue}
         onChange={onDualChange}
         showTicks
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.js b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
index 525bc7c5605..3117a5237fd 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.js
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
@@ -9,6 +9,7 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 import { fake } from 'faker';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const text = (
   <>
@@ -18,13 +19,15 @@ const text = (
   </>
 );
 
-const firstPanelId = 'resizable-panel__1';
-const secondPanelId = 'resizable-panel__2';
+//const firstPanelId = 'resizable-panel__1';
+//const secondPanelId = 'resizable-panel__2';
+const panelID__1 = htmlIdGenerator('panel')();
+const panelID__2 = htmlIdGenerator('panel')();
 const stored = localStorage.getItem('resizableContainer');
 const storedSizes = stored && JSON.parse(stored);
 const defaultSizes = storedSizes || {
-  [firstPanelId]: 50,
-  [secondPanelId]: 50,
+  [panelID__1]: 50,
+  [panelID__2]: 50,
 };
 
 export default () => {
@@ -40,16 +43,16 @@ export default () => {
   const onClick30x70 = useCallback(
     () =>
       setSizes({
-        [firstPanelId]: 30,
-        [secondPanelId]: 70,
+        [panelID__1]: 30,
+        [panelID__2]: 70,
       }),
     []
   );
   const onClick80x20 = useCallback(
     () =>
       setSizes({
-        [firstPanelId]: 80,
-        [secondPanelId]: 20,
+        [panelID__1]: 80,
+        [panelID__2]: 20,
       }),
     []
   );
@@ -88,8 +91,8 @@ export default () => {
         {(EuiResizablePanel, EuiResizableButton) => (
           <>
             <EuiResizablePanel
-              id={firstPanelId}
-              size={sizes[firstPanelId]}
+              id={panelID__1}
+              size={sizes[panelID__1]}
               minSize="30%">
               <EuiText>
                 <div>{text}</div>
@@ -99,8 +102,8 @@ export default () => {
             <EuiResizableButton />
 
             <EuiResizablePanel
-              id={secondPanelId}
-              size={sizes[secondPanelId]}
+              id={panelID__2}
+              size={sizes[panelID__2]}
               minSize="200px">
               <EuiText>
                 <div>{text}</div>
diff --git a/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
index bd1679baf58..79b6320edf6 100644
--- a/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
+++ b/src-docs/src/views/resizable_container/resizable_panel_collapsible_external.js
@@ -10,6 +10,7 @@ import {
   EuiFlexItem,
   EuiText,
 } from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const toggleButtons = [
   {
@@ -26,6 +27,9 @@ export default () => {
   const collapseFn = useRef(() => {});
 
   const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
+  const panelID__1 = htmlIdGenerator('panel')();
+  const panelID__2 = htmlIdGenerator('panel')();
+  const panelID__3 = htmlIdGenerator('panel')();
 
   const onCollapse = (optionId) => {
     const newToggleIdToSelectedMap = {
@@ -61,7 +65,7 @@ export default () => {
             togglePanel(id, { direction });
           return (
             <>
-              <EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
+              <EuiResizablePanel id={panelID__1} initialSize={30} minSize="10%">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>
                   <EuiTitle>
                     <p>Panel 1</p>
@@ -71,7 +75,10 @@ export default () => {
 
               <EuiResizableButton />
 
-              <EuiResizablePanel id="panel2" initialSize={35} minSize="50px">
+              <EuiResizablePanel
+                id={panelID__2}
+                initialSize={35}
+                minSize="50px">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>
                   <EuiTitle>
                     <p>Panel 2</p>
@@ -83,7 +90,7 @@ export default () => {
 
               <EuiResizablePanel
                 mode={['custom', { position: 'top' }]}
-                id="panel3"
+                id={panelID__3}
                 initialSize={35}
                 minSize="10%">
                 <EuiPanel paddingSize="l" style={{ height: '100%' }}>