diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 3766e4a815e..f6b8d0fded4 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -6,61 +6,72 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
-
-const idPrefix = htmlIdGenerator()();
-const idPrefix2 = htmlIdGenerator()();
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
+  const basicButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'basicButtonGroup',
+  });
+  const multiSelectButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'multiSelectButtonGroup',
+  });
+  const disabledButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'disabledButtonGroup',
+  });
+
   const toggleButtons = [
     {
-      id: `${idPrefix}0`,
+      id: `${basicButtonGroupPrefix}__0`,
       label: 'Option one',
     },
     {
-      id: `${idPrefix}1`,
+      id: `${basicButtonGroupPrefix}__1`,
       label: 'Option two is selected by default',
     },
     {
-      id: `${idPrefix}2`,
+      id: `${basicButtonGroupPrefix}__2`,
       label: 'Option three',
     },
   ];
 
   const toggleButtonsDisabled = [
     {
-      id: `${idPrefix}3`,
+      id: `${disabledButtonGroupPrefix}__0`,
       label: 'Option one',
     },
     {
-      id: `${idPrefix}4`,
+      id: `${disabledButtonGroupPrefix}__1`,
       label: 'Option two is selected by default',
     },
     {
-      id: `${idPrefix}5`,
+      id: `${disabledButtonGroupPrefix}__2`,
       label: 'Option three',
     },
   ];
 
   const toggleButtonsMulti = [
     {
-      id: `${idPrefix2}0`,
+      id: `${multiSelectButtonGroupPrefix}__0`,
       label: 'Option 1',
     },
     {
-      id: `${idPrefix2}1`,
+      id: `${multiSelectButtonGroupPrefix}__1`,
       label: 'Option 2 is selected by default',
     },
     {
-      id: `${idPrefix2}2`,
+      id: `${multiSelectButtonGroupPrefix}__2`,
       label: 'Option 3',
     },
   ];
 
-  const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}1`);
-  const [toggleIdDisabled, setToggleIdDisabled] = useState(`${idPrefix}4`);
+  const [toggleIdSelected, setToggleIdSelected] = useState(
+    `${basicButtonGroupPrefix}__1`
+  );
+  const [toggleIdDisabled, setToggleIdDisabled] = useState(
+    `${disabledButtonGroupPrefix}__1`
+  );
   const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({
-    [`${idPrefix2}1`]: true,
+    [`${multiSelectButtonGroupPrefix}__1`]: true,
   });
 
   const onChange = (optionId) => {
diff --git a/src-docs/src/views/button/button_group_compressed.js b/src-docs/src/views/button/button_group_compressed.js
index 1f18f82e351..6cd55c890ee 100644
--- a/src-docs/src/views/button/button_group_compressed.js
+++ b/src-docs/src/views/button/button_group_compressed.js
@@ -6,49 +6,53 @@ import {
   EuiPanel,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
-
-const idPrefix2 = htmlIdGenerator()();
-const idPrefix3 = htmlIdGenerator()();
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
+  const compressedToggleButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'compressedToggleButtonGroup',
+  });
+  const multiSelectButtonGroupPrefix = useGeneratedHtmlId({
+    prefix: 'multiSelectButtonGroup',
+  });
+
   const toggleButtonsCompressed = [
     {
-      id: `${idPrefix2}3`,
+      id: `${compressedToggleButtonGroupPrefix}__0`,
       label: 'fine',
     },
     {
-      id: `${idPrefix2}4`,
+      id: `${compressedToggleButtonGroupPrefix}__1`,
       label: 'rough',
     },
     {
-      id: `${idPrefix2}5`,
+      id: `${compressedToggleButtonGroupPrefix}__2`,
       label: 'coarse',
     },
   ];
 
   const toggleButtonsIconsMulti = [
     {
-      id: `${idPrefix3}3`,
+      id: `${multiSelectButtonGroupPrefix}__0`,
       label: 'Bold',
       name: 'bold',
       iconType: 'editorBold',
     },
     {
-      id: `${idPrefix3}4`,
+      id: `${multiSelectButtonGroupPrefix}__1`,
       label: 'Italic',
       name: 'italic',
       iconType: 'editorItalic',
       isDisabled: true,
     },
     {
-      id: `${idPrefix3}5`,
+      id: `${multiSelectButtonGroupPrefix}__2`,
       label: 'Underline',
       name: 'underline',
       iconType: 'editorUnderline',
     },
     {
-      id: `${idPrefix3}6`,
+      id: `${multiSelectButtonGroupPrefix}__3`,
       label: 'Strikethrough',
       name: 'strikethrough',
       iconType: 'editorStrike',
@@ -60,7 +64,7 @@ export default () => {
     setToggleIconIdToSelectedMapIcon,
   ] = useState({});
   const [toggleCompressedIdSelected, setToggleCompressedIdSelected] = useState(
-    `${idPrefix2}4`
+    `${compressedToggleButtonGroupPrefix}__1`
   );
 
   const onChangeCompressed = (optionId) => {
diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
index d813de7f6d1..61c6519a37c 100644
--- a/src-docs/src/views/button/split_button.js
+++ b/src-docs/src/views/button/split_button.js
@@ -9,9 +9,13 @@ import {
   EuiContextMenuItem,
   EuiPopover,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const splitButtonPopoverId = useGeneratedHtmlId({
+    prefix: 'splitButtonPopover',
+  });
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -43,7 +47,7 @@ export default () => {
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="splitButtonExamplePopover"
+            id={splitButtonPopoverId}
             button={
               <EuiButtonIcon
                 display="base"
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 61d9861761e..e037b1a5125 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -31,6 +31,7 @@ import { EuiShowFor } from '../../../../src/components/responsive';
 import { EuiImage } from '../../../../src/components/image';
 import contentSvg from '../../images/content.svg';
 import { useExitPath } from '../../services/routing/routing';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const TopLinks: EuiPinnableListGroupItemProps[] = [
   {
@@ -140,117 +141,121 @@ const CollapsibleNavAll = () => {
     return `Unpin ${listItem.label}`;
   }
 
-  const collapsibleNav = (
-    <EuiCollapsibleNav
-      id="guideCollapsibleNavAllExampleNav"
-      aria-label="Main navigation"
-      isOpen={navIsOpen}
-      isDocked={navIsDocked}
-      button={
-        <EuiHeaderSectionItemButton
-          aria-label="Toggle main navigation"
-          onClick={() => setNavIsOpen(!navIsOpen)}
-        >
-          <EuiIcon type={'menu'} size="m" aria-hidden="true" />
-        </EuiHeaderSectionItemButton>
-      }
-      onClose={() => setNavIsOpen(false)}
-    >
-      {/* Dark deployments section */}
-      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-        {DeploymentsGroup}
-      </EuiFlexItem>
+  const collapsibleNavId = useGeneratedHtmlId({ prefix: 'collapsibleNav' });
 
-      {/* Shaded pinned section always with a home item */}
-      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-        <EuiCollapsibleNavGroup
-          background="light"
-          className="eui-yScroll"
-          style={{ maxHeight: '40vh' }}
-        >
-          <EuiPinnableListGroup
-            aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
-            listItems={alterLinksWithCurrentState(TopLinks).concat(
-              alterLinksWithCurrentState(pinnedItems, true)
-            )}
-            unpinTitle={addLinkNameToUnpinTitle}
-            onPinClick={removePin}
-            maxWidth="none"
-            color="text"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
-      </EuiFlexItem>
+  const collapsibleNav = () => {
+    return (
+      <EuiCollapsibleNav
+        id={collapsibleNavId}
+        aria-label="Main navigation"
+        isOpen={navIsOpen}
+        isDocked={navIsDocked}
+        button={
+          <EuiHeaderSectionItemButton
+            aria-label="Toggle main navigation"
+            onClick={() => setNavIsOpen(!navIsOpen)}
+          >
+            <EuiIcon type={'menu'} size="m" aria-hidden="true" />
+          </EuiHeaderSectionItemButton>
+        }
+        onClose={() => setNavIsOpen(false)}
+      >
+        {/* Dark deployments section */}
+        <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+          {DeploymentsGroup}
+        </EuiFlexItem>
 
-      <EuiHorizontalRule margin="none" />
+        {/* Shaded pinned section always with a home item */}
+        <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+          <EuiCollapsibleNavGroup
+            background="light"
+            className="eui-yScroll"
+            style={{ maxHeight: '40vh' }}
+          >
+            <EuiPinnableListGroup
+              aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
+              listItems={alterLinksWithCurrentState(TopLinks).concat(
+                alterLinksWithCurrentState(pinnedItems, true)
+              )}
+              unpinTitle={addLinkNameToUnpinTitle}
+              onPinClick={removePin}
+              maxWidth="none"
+              color="text"
+              gutterSize="none"
+              size="s"
+            />
+          </EuiCollapsibleNavGroup>
+        </EuiFlexItem>
 
-      {/* BOTTOM */}
-      <EuiFlexItem className="eui-yScroll">
-        {/* Kibana section */}
-        <EuiCollapsibleNavGroup
-          title="Kibana"
-          iconType="logoKibana"
-          isCollapsible={true}
-          initialIsOpen={openGroups.includes('Kibana')}
-          onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')}
-        >
-          <EuiPinnableListGroup
-            aria-label="Kibana" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
-            listItems={alterLinksWithCurrentState(KibanaLinks)}
-            pinTitle={addLinkNameToPinTitle}
-            onPinClick={addPin}
-            maxWidth="none"
-            color="subdued"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
+        <EuiHorizontalRule margin="none" />
 
-        {/* Security callout */}
-        {SecurityGroup}
+        {/* BOTTOM */}
+        <EuiFlexItem className="eui-yScroll">
+          {/* Kibana section */}
+          <EuiCollapsibleNavGroup
+            title="Kibana"
+            iconType="logoKibana"
+            isCollapsible={true}
+            initialIsOpen={openGroups.includes('Kibana')}
+            onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')}
+          >
+            <EuiPinnableListGroup
+              aria-label="Kibana" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
+              listItems={alterLinksWithCurrentState(KibanaLinks)}
+              pinTitle={addLinkNameToPinTitle}
+              onPinClick={addPin}
+              maxWidth="none"
+              color="subdued"
+              gutterSize="none"
+              size="s"
+            />
+          </EuiCollapsibleNavGroup>
 
-        {/* Learn section */}
-        <EuiCollapsibleNavGroup
-          title="Learn"
-          iconType="training"
-          isCollapsible={true}
-          initialIsOpen={openGroups.includes('Learn')}
-          onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')}
-        >
-          <EuiPinnableListGroup
-            aria-label="Learn" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
-            listItems={alterLinksWithCurrentState(LearnLinks)}
-            pinTitle={addLinkNameToPinTitle}
-            onPinClick={addPin}
-            maxWidth="none"
-            color="subdued"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
+          {/* Security callout */}
+          {SecurityGroup}
 
-        {/* Docking button only for larger screens that can support it*/}
-        <EuiShowFor sizes={['l', 'xl']}>
-          <EuiCollapsibleNavGroup>
-            <EuiListGroupItem
-              size="xs"
+          {/* Learn section */}
+          <EuiCollapsibleNavGroup
+            title="Learn"
+            iconType="training"
+            isCollapsible={true}
+            initialIsOpen={openGroups.includes('Learn')}
+            onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')}
+          >
+            <EuiPinnableListGroup
+              aria-label="Learn" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
+              listItems={alterLinksWithCurrentState(LearnLinks)}
+              pinTitle={addLinkNameToPinTitle}
+              onPinClick={addPin}
+              maxWidth="none"
               color="subdued"
-              label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
-              onClick={() => {
-                setNavIsDocked(!navIsDocked);
-                localStorage.setItem(
-                  'nav2IsDocked',
-                  JSON.stringify(!navIsDocked)
-                );
-              }}
-              iconType={navIsDocked ? 'lock' : 'lockOpen'}
+              gutterSize="none"
+              size="s"
             />
           </EuiCollapsibleNavGroup>
-        </EuiShowFor>
-      </EuiFlexItem>
-    </EuiCollapsibleNav>
-  );
+
+          {/* Docking button only for larger screens that can support it*/}
+          <EuiShowFor sizes={['l', 'xl']}>
+            <EuiCollapsibleNavGroup>
+              <EuiListGroupItem
+                size="xs"
+                color="subdued"
+                label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
+                onClick={() => {
+                  setNavIsDocked(!navIsDocked);
+                  localStorage.setItem(
+                    'nav2IsDocked',
+                    JSON.stringify(!navIsDocked)
+                  );
+                }}
+                iconType={navIsDocked ? 'lock' : 'lockOpen'}
+              />
+            </EuiCollapsibleNavGroup>
+          </EuiShowFor>
+        </EuiFlexItem>
+      </EuiCollapsibleNav>
+    );
+  };
 
   const leftSectionItems = [
     collapsibleNav,
diff --git a/src-docs/src/views/context_menu/content_panel.js b/src-docs/src/views/context_menu/content_panel.js
index 8c1335874d5..fec20bd20ec 100644
--- a/src-docs/src/views/context_menu/content_panel.js
+++ b/src-docs/src/views/context_menu/content_panel.js
@@ -6,8 +6,13 @@ import {
   EuiPopover,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const customContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'customContextMenuPopover',
+  });
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -30,7 +35,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contentPanel"
+      id={customContextMenuPopoverId}
       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 b28828f7a73..38964c9bb5c 100644
--- a/src-docs/src/views/context_menu/context_menu.js
+++ b/src-docs/src/views/context_menu/context_menu.js
@@ -10,9 +10,23 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
 
+  const embeddedCodeSwitchId__1 = useGeneratedHtmlId({
+    prefix: 'embeddedCodeSwitch',
+    suffix: 'first',
+  });
+  const embeddedCodeSwitchId__2 = useGeneratedHtmlId({
+    prefix: 'embeddedCodeSwitch',
+    suffix: 'second',
+  });
+  const contextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'contextMenuPopover',
+  });
+
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
@@ -108,7 +122,7 @@ export default () => {
           <EuiFormRow label="Generate a public snapshot?" hasChildLabel={false}>
             <EuiSwitch
               name="switch"
-              id="asdf"
+              id={embeddedCodeSwitchId__1}
               label="Snapshot data"
               checked={true}
               onChange={() => {}}
@@ -120,7 +134,7 @@ export default () => {
           >
             <EuiSwitch
               name="switch"
-              id="asdf2"
+              id={embeddedCodeSwitchId__2}
               label="Current time range"
               checked={true}
               onChange={() => {}}
@@ -141,7 +155,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contextMenuExample"
+      id={contextMenuPopoverId}
       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 bcf4b212a98..61042fd1694 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 { useGeneratedHtmlId } from '../../../../src/services';
 
 function flattenPanelTree(tree, array = []) {
   array.push(tree);
@@ -30,6 +31,13 @@ export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [isDynamicPopoverOpen, setDynamicPopover] = useState(false);
 
+  const normalContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'normalContextMenuPopover',
+  });
+  const dynamicContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'dynamicContextMenuPopover',
+  });
+
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
@@ -112,7 +120,7 @@ export default () => {
   return (
     <React.Fragment>
       <EuiPopover
-        id="contextMenuNormal"
+        id={normalContextMenuPopoverId}
         button={button}
         isOpen={isPopoverOpen}
         closePopover={closePopover}
@@ -125,7 +133,7 @@ export default () => {
       <EuiSpacer size="l" />
 
       <EuiPopover
-        id="contextMenuDynamic"
+        id={dynamicContextMenuPopoverId}
         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 cf1a4e4ccb0..aaa87fbb3e5 100644
--- a/src-docs/src/views/context_menu/single_panel.js
+++ b/src-docs/src/views/context_menu/single_panel.js
@@ -6,11 +6,16 @@ import {
   EuiContextMenuItem,
   EuiPopover,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [rowSize, setRowSize] = useState(50);
 
+  const singleContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'singleContextMenuPopover',
+  });
+
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
@@ -79,7 +84,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="singlePanel"
+      id={singleContextMenuPopoverId}
       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 82f06865c94..80a3890155e 100644
--- a/src-docs/src/views/context_menu/small.js
+++ b/src-docs/src/views/context_menu/small.js
@@ -6,9 +6,13 @@ import {
   EuiContextMenuItem,
   EuiPopover,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
+  const smallContextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'smallContextMenuPopover',
+  });
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
@@ -38,7 +42,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="smallContextMenuExample"
+      id={smallContextMenuPopoverId}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
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 dc199b601b0..b66ef450fd9 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,10 +6,26 @@ import {
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
-  const radioGroupName = 'singleKeypadSelect';
+  const radioGroupName = useGeneratedHtmlId({ prefix: 'radioGroup' });
+
+  const keypadRadioButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadRadioButton',
+    suffix: 'first',
+  });
+  const keypadRadioButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadRadioButton',
+    suffix: 'second',
+  });
+  const keypadRadioButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadRadioButton',
+    suffix: 'third',
+  });
+
   const [singleSelectedID, setSingleSelectedID] = useState(
-    'singleKeypadSelect1'
+    keypadRadioButtonId__1
   );
 
   return (
@@ -17,31 +33,31 @@ export default () => {
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect1"
+        id={keypadRadioButtonId__1}
         label="Radio one"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect1'}
+        isSelected={singleSelectedID === keypadRadioButtonId__1}
       >
         <EuiIcon type="faceHappy" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect2"
+        id={keypadRadioButtonId__2}
         label="Radio two"
         onChange={(id) => {
           setSingleSelectedID(id);
         }}
-        isSelected={singleSelectedID === 'singleKeypadSelect2'}
+        isSelected={singleSelectedID === keypadRadioButtonId__2}
       >
         <EuiIcon type="faceNeutral" size="l" />
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="single"
         name={radioGroupName}
-        id="singleKeypadSelect3"
+        id={keypadRadioButtonId__3}
         label="Disabled"
         isDisabled
       >
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 43b3712a54c..7d710475215 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
@@ -5,8 +5,22 @@ import {
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
+  const keypadMultiSelectButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadMultiSelectButton',
+    suffix: 'first',
+  });
+  const keypadMultiSelectButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadMultiSelectButton',
+    suffix: 'second',
+  });
+  const keypadMultiSelectButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadMultiSelectButton',
+    suffix: 'third',
+  });
+
   const [multiSelect1isSelected, setmultiSelect1isSelected] = useState(true);
   const [multiSelect3isSelected, setmultiSelect2isSelected] = useState(false);
 
@@ -15,6 +29,7 @@ export default () => {
       <EuiKeyPadMenuItem
         checkable="multi"
         isSelected={multiSelect1isSelected}
+        id={keypadMultiSelectButtonId__1}
         label="Check one"
         onChange={() => {
           setmultiSelect1isSelected((selected) => !selected);
@@ -25,7 +40,7 @@ export default () => {
       <EuiKeyPadMenuItem
         checkable="multi"
         isSelected={multiSelect3isSelected}
-        id="multiKeypadSelect2a"
+        id={keypadMultiSelectButtonId__2}
         label="Check two"
         onChange={() => {
           setmultiSelect2isSelected((selected) => !selected);
@@ -35,7 +50,7 @@ export default () => {
       </EuiKeyPadMenuItem>
       <EuiKeyPadMenuItem
         checkable="multi"
-        id="multiKeypadSelect3a"
+        id={keypadMultiSelectButtonId__3}
         label="Disabled"
         isDisabled
       >
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 180d3954da8..c1166921f81 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,54 +5,80 @@ import {
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
-  const [selectedID, setSelectedID] = useState('keypadButton6');
+  const keypadButtonId__1 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'first',
+  });
+  const keypadButtonId__2 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'second',
+  });
+  const keypadButtonId__3 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'third',
+  });
+  const keypadButtonId__4 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fourth',
+  });
+  const keypadButtonId__5 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'fifth',
+  });
+  const keypadButtonId__6 = useGeneratedHtmlId({
+    prefix: 'keypadButton',
+    suffix: 'sixth',
+  });
+
+  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>
diff --git a/src-docs/src/views/tabs/tabs_flyout.tsx b/src-docs/src/views/tabs/tabs_flyout.tsx
index 11d858bc945..f79bdbd929f 100644
--- a/src-docs/src/views/tabs/tabs_flyout.tsx
+++ b/src-docs/src/views/tabs/tabs_flyout.tsx
@@ -15,10 +15,14 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('1');
+  const complicatedFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'complicatedFlyoutTitle',
+  });
 
   const tabs = [
     {
@@ -54,11 +58,11 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutComplicatedTitle"
+        aria-labelledby={complicatedFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutComplicatedTitle">Flyout header</h2>
+            <h2 id={complicatedFlyoutTitleId}>Flyout header</h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText color="subdued">
diff --git a/src-docs/src/views/tabs/tabs_small.tsx b/src-docs/src/views/tabs/tabs_small.tsx
index d59712e1aab..286f30ae5e7 100644
--- a/src-docs/src/views/tabs/tabs_small.tsx
+++ b/src-docs/src/views/tabs/tabs_small.tsx
@@ -8,6 +8,7 @@ import {
   EuiPopover,
   EuiSpacer,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const tabs = [
   {
@@ -31,6 +32,7 @@ const tabs = [
 export default () => {
   const [isPopoverOpen, setPopover] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('cobalt');
+  const contentPopoverId = useGeneratedHtmlId({ prefix: 'contentPopover' });
 
   const onSelectedTabChanged = (id: string) => {
     setSelectedTabId(id);
@@ -66,7 +68,7 @@ export default () => {
 
   return (
     <EuiPopover
-      id="contentPanel"
+      id={contentPopoverId}
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}