diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index 09be03f6e2..5ea4d4a08d 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -85,4 +85,6 @@ export default {
 };
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+	id: "default-checkbox",
+};
diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
index 5e2ed0cc54..eb41c9fadd 100644
--- a/components/checkbox/stories/template.js
+++ b/components/checkbox/stories/template.js
@@ -73,7 +73,7 @@ export const Template = ({
 					if (isDisabled) return;
 					updateArgs({ isChecked: !isChecked });
 				}}
-				id=${id}
+				id=${ifDefined(id ? `${id}-input` : undefined)}
 			/>
 			<span class="${rootClass}-box">
 				${Icon({
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index a12840ae57..723c5a0cc6 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -1,11 +1,11 @@
-import { html, css } from "lit";
+import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
+import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as Divider } from "@spectrum-css/divider/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
 import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
 
 import "../index.css";
@@ -28,6 +28,7 @@ export const MenuItem = ({
   items = [],
   size,
   id,
+  idx = 0,
   hasActions,
   selectionMode,
   value,
@@ -103,6 +104,7 @@ export const MenuItem = ({
           size,
           isEmphasized: true,
           label: label,
+          id: `checkbox-${idx}`,
           customClasses: [
             `${rootClass}Checkbox`,
           ],
@@ -128,6 +130,7 @@ export const MenuItem = ({
               ...globals,
               size,
               label: null,
+              id: `switch-${idx}`,
               customClasses: [
                 `${rootClass}Switch`,
               ],
@@ -220,6 +223,7 @@ export const Template = ({
           return MenuItem({
             ...globals,
             ...i,
+            idx,
             rootClass: `${rootClass}-item`,
             role: subrole,
             size,
diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js
index 1cbfaca973..f624fe68cf 100644
--- a/components/switch/stories/template.js
+++ b/components/switch/stories/template.js
@@ -24,6 +24,9 @@ export const Template = ({
 		console.warn(e);
 	}
 
+	// ID attribute value for the input element.
+	const inputId = id ? `${id}-input` : 'switch-onoff-0';
+
 	return html`
 		<div
 			class=${classMap({
@@ -36,10 +39,16 @@ export const Template = ({
 			})}
 			id=${ifDefined(id)}
 		>
-			<input type="checkbox" class="${rootClass}-input" id="switch-onoff-0" ?disabled=${isDisabled} ?checked=${isChecked}/>
+			<input
+				type="checkbox"
+				class="${rootClass}-input"
+				id=${inputId}
+				?disabled=${isDisabled}
+				?checked=${isChecked}
+			/>
 			<span class="${rootClass}-switch"></span>
 			${label
-				? html`<label class="${rootClass}-label" for="switch-onoff-0"
+				? html`<label class="${rootClass}-label" for=${inputId}
 						>${label}</label
 				  >`
 				: ""}