diff --git a/code/addons/docs/src/blocks/blocks/Controls.tsx b/code/addons/docs/src/blocks/blocks/Controls.tsx
index 5f7e9eee69fa..0b96cb4d53f6 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.tsx
+++ b/code/addons/docs/src/blocks/blocks/Controls.tsx
@@ -75,6 +75,7 @@ export const Controls: FC<ControlsProps> = (props) => {
         globals={globals}
         updateArgs={updateArgs}
         resetArgs={resetArgs}
+        idPrefix={story.id}
       />
     );
   }
@@ -101,6 +102,7 @@ export const Controls: FC<ControlsProps> = (props) => {
       globals={globals}
       updateArgs={updateArgs}
       resetArgs={resetArgs}
+      idPrefix={story.id}
     />
   );
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index dd6f7a997544..f9ac8cbe992a 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -21,6 +21,11 @@ export interface ArgControlProps {
   arg: any;
   updateArgs: (args: Args) => void;
   isHovered: boolean;
+  /**
+   * Optional prefix to ensure unique control IDs when multiple Controls blocks
+   * are rendered on the same page. Typically the story ID.
+   */
+  idPrefix?: string;
 }
 
 const Controls: Record<string, FC<any>> = {
@@ -43,7 +48,7 @@ const Controls: Record<string, FC<any>> = {
 
 const NoControl = () => <>-</>;
 
-export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered }) => {
+export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered, idPrefix }) => {
   const { key, control } = row;
 
   const [isFocused, setFocused] = useState(false);
@@ -84,7 +89,7 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   }
   // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
   // row.key is a hash key and therefore a much safer choice
-  const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus };
+  const props = { name: key, argType: row, value: boxedValue.value, onChange, onBlur, onFocus, idPrefix };
   const Control = Controls[control.type] || NoControl;
   return <Control {...props} {...control} controlType={control.type} />;
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
index c6ccb0099ae2..2fdf2a66e1b7 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
@@ -21,6 +21,11 @@ interface ArgRowProps {
   compact?: boolean;
   expandable?: boolean;
   initialExpandedArgs?: boolean;
+  /**
+   * Optional prefix to ensure unique control IDs when multiple Controls blocks
+   * are rendered on the same page. Typically the story ID.
+   */
+  idPrefix?: string;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
index 874edbc2ccc2..ddb870e52e1d 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -204,6 +204,11 @@ export interface ArgsTableOptionProps {
   initialExpandedArgs?: boolean;
   isLoading?: boolean;
   sort?: SortType;
+  /**
+   * Optional prefix to ensure unique control IDs when multiple Controls blocks
+   * are rendered on the same page. Typically the story ID.
+   */
+  idPrefix?: string;
 }
 interface ArgsTableDataProps {
   rows: ArgTypes;
@@ -327,6 +332,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     initialExpandedArgs,
     sort = 'none',
     isLoading,
+    idPrefix,
   } = props;
 
   if ('error' in props) {
@@ -380,7 +386,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs };
+  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs, idPrefix };
 
   return (
     <ResetWrapper>
diff --git a/code/addons/docs/src/blocks/controls/Boolean.tsx b/code/addons/docs/src/blocks/controls/Boolean.tsx
index 584ed2a6d0e0..cb46a228fa72 100644
--- a/code/addons/docs/src/blocks/controls/Boolean.tsx
+++ b/code/addons/docs/src/blocks/controls/Boolean.tsx
@@ -121,6 +121,7 @@ export const BooleanControl: FC<BooleanProps> = ({
   onBlur,
   onFocus,
   argType,
+  idPrefix,
 }) => {
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
   const readonly = !!argType?.table?.readonly;
@@ -130,7 +131,7 @@ export const BooleanControl: FC<BooleanProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, idPrefix)}
         onClick={onSetFalse}
         disabled={readonly}
       >
@@ -138,7 +139,7 @@ export const BooleanControl: FC<BooleanProps> = ({
       </Button>
     );
   }
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   const parsedValue = typeof value === 'string' ? parse(value) : value;
 
diff --git a/code/addons/docs/src/blocks/controls/Color.tsx b/code/addons/docs/src/blocks/controls/Color.tsx
index 3c3610c21621..851b2ff7baa0 100644
--- a/code/addons/docs/src/blocks/controls/Color.tsx
+++ b/code/addons/docs/src/blocks/controls/Color.tsx
@@ -367,6 +367,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   presetColors,
   startOpen = false,
   argType,
+  idPrefix,
 }) => {
   const debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
@@ -377,7 +378,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   return (
     <Wrapper>
diff --git a/code/addons/docs/src/blocks/controls/Date.tsx b/code/addons/docs/src/blocks/controls/Date.tsx
index 3568cf940f5c..11ee05f5641e 100644
--- a/code/addons/docs/src/blocks/controls/Date.tsx
+++ b/code/addons/docs/src/blocks/controls/Date.tsx
@@ -66,7 +66,15 @@ const FlexSpaced = styled.fieldset({
 });
 
 export type DateProps = ControlProps<DateValue> & DateConfig;
-export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onBlur, argType }) => {
+export const DateControl: FC<DateProps> = ({
+  name,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  argType,
+  idPrefix,
+}) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
   const timeRef = useRef<HTMLInputElement>();
@@ -114,7 +122,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
     setValid(!!time);
   };
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   return (
     <FlexSpaced>
diff --git a/code/addons/docs/src/blocks/controls/Files.tsx b/code/addons/docs/src/blocks/controls/Files.tsx
index 1569790641da..515df2292024 100644
--- a/code/addons/docs/src/blocks/controls/Files.tsx
+++ b/code/addons/docs/src/blocks/controls/Files.tsx
@@ -43,6 +43,7 @@ export const FilesControl: FC<FilesControlProps> = ({
   accept = 'image/*',
   value,
   argType,
+  idPrefix,
 }) => {
   const inputElement = useRef<HTMLInputElement>(null);
   const readonly = argType?.control?.readOnly;
@@ -63,7 +64,7 @@ export const FilesControl: FC<FilesControlProps> = ({
     }
   }, [value, name]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   return (
     <>
diff --git a/code/addons/docs/src/blocks/controls/Number.tsx b/code/addons/docs/src/blocks/controls/Number.tsx
index 947a9f7afca7..157b075d1a34 100644
--- a/code/addons/docs/src/blocks/controls/Number.tsx
+++ b/code/addons/docs/src/blocks/controls/Number.tsx
@@ -35,6 +35,7 @@ export const NumberControl: FC<NumberProps> = ({
   onBlur,
   onFocus,
   argType,
+  idPrefix,
 }) => {
   const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
   const [forceVisible, setForceVisible] = useState(false);
@@ -102,7 +103,7 @@ export const NumberControl: FC<NumberProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, idPrefix)}
         onClick={onForceVisible}
         disabled={readonly}
       >
@@ -115,7 +116,7 @@ export const NumberControl: FC<NumberProps> = ({
     <Wrapper>
       <FormInput
         ref={htmlElRef}
-        id={getControlId(name)}
+        id={getControlId(name, idPrefix)}
         type="number"
         onChange={handleChange}
         size="flex"
diff --git a/code/addons/docs/src/blocks/controls/Object.tsx b/code/addons/docs/src/blocks/controls/Object.tsx
index a817cd1e368a..ba84bfcd82b9 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -172,7 +172,7 @@ const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (the
   },
 });
 
-export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType }) => {
+export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType, idPrefix }) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
@@ -217,7 +217,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
       <Button
         ariaLabel={false}
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, idPrefix)}
         onClick={onForceVisible}
       >
         Set object
@@ -228,7 +228,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, value, onChange, argType
   const rawJSONForm = (
     <RawInput
       ref={htmlElRef}
-      id={getControlId(name)}
+      id={getControlId(name, idPrefix)}
       minRows={3}
       name={name}
       key={jsonString}
diff --git a/code/addons/docs/src/blocks/controls/Range.tsx b/code/addons/docs/src/blocks/controls/Range.tsx
index 28f0149cdc21..a0faee18e80e 100644
--- a/code/addons/docs/src/blocks/controls/Range.tsx
+++ b/code/addons/docs/src/blocks/controls/Range.tsx
@@ -185,6 +185,7 @@ export const RangeControl: FC<RangeProps> = ({
   onBlur,
   onFocus,
   argType,
+  idPrefix,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange(parse(event.target.value));
@@ -194,7 +195,7 @@ export const RangeControl: FC<RangeProps> = ({
   const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
 
   const readonly = !!argType?.table?.readonly;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   return (
     <RangeWrapper readOnly={readonly}>
diff --git a/code/addons/docs/src/blocks/controls/Text.tsx b/code/addons/docs/src/blocks/controls/Text.tsx
index 93d370cc35b2..5c74c015dceb 100644
--- a/code/addons/docs/src/blocks/controls/Text.tsx
+++ b/code/addons/docs/src/blocks/controls/Text.tsx
@@ -28,6 +28,7 @@ export const TextControl: FC<TextProps> = ({
   onBlur,
   maxLength,
   argType,
+  idPrefix,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange(event.target.value);
@@ -49,7 +50,7 @@ export const TextControl: FC<TextProps> = ({
         variant="outline"
         size="medium"
         disabled={readonly}
-        id={getControlSetterButtonId(name)}
+        id={getControlSetterButtonId(name, idPrefix)}
         onClick={onForceVisible}
       >
         Set string
@@ -62,7 +63,7 @@ export const TextControl: FC<TextProps> = ({
   return (
     <Wrapper>
       <Form.Textarea
-        id={getControlId(name)}
+        id={getControlId(name, idPrefix)}
         maxLength={maxLength}
         onChange={handleChange}
         disabled={readonly}
diff --git a/code/addons/docs/src/blocks/controls/helpers.test.ts b/code/addons/docs/src/blocks/controls/helpers.test.ts
index aa560a1f3c49..8256e0a64aa4 100644
--- a/code/addons/docs/src/blocks/controls/helpers.test.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.test.ts
@@ -11,6 +11,15 @@ describe('getControlId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlId(input)).toBe(expected);
   });
+
+  it.each([
+    // caseName, input, prefix, expected
+    ['with prefix', 'some-id', 'story-1', 'control-story-1-some-id'],
+    ['with prefix and spaces', 'my prop', 'story-2', 'control-story-2-my-prop'],
+    ['with undefined prefix', 'some-id', undefined, 'control-some-id'],
+  ])('%s with prefix', (name, input, prefix, expected) => {
+    expect(getControlId(input, prefix)).toBe(expected);
+  });
 });
 
 describe('getControlSetterButtonId', () => {
@@ -22,4 +31,13 @@ describe('getControlSetterButtonId', () => {
   ])('%s', (name, input, expected) => {
     expect(getControlSetterButtonId(input)).toBe(expected);
   });
+
+  it.each([
+    // caseName, input, prefix, expected
+    ['with prefix', 'some-id', 'story-1', 'set-story-1-some-id'],
+    ['with prefix and spaces', 'my prop', 'story-2', 'set-story-2-my-prop'],
+    ['with undefined prefix', 'some-id', undefined, 'set-some-id'],
+  ])('%s with prefix', (name, input, prefix, expected) => {
+    expect(getControlSetterButtonId(input, prefix)).toBe(expected);
+  });
 });
diff --git a/code/addons/docs/src/blocks/controls/helpers.ts b/code/addons/docs/src/blocks/controls/helpers.ts
index 9153d81fb526..a7d60273c9af 100644
--- a/code/addons/docs/src/blocks/controls/helpers.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.ts
@@ -1,27 +1,37 @@
 /**
  * Adds `control` prefix to make ID attribute more specific. Removes spaces because spaces are not
- * allowed in ID attributes
+ * allowed in ID attributes. Optionally accepts a prefix to ensure uniqueness when multiple
+ * Controls blocks are rendered on the same page.
  *
  * @example
  *
  * ```ts
  * getControlId('my prop name') -> 'control-my-prop-name'
+ * getControlId('my prop name', 'story-1') -> 'control-story-1-my-prop-name'
  * ```
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlId = (value: string) => `control-${value.replace(/\s+/g, '-')}`;
+export const getControlId = (value: string, idPrefix?: string) => {
+  const sanitizedValue = value.replace(/\s+/g, '-');
+  return idPrefix ? `control-${idPrefix}-${sanitizedValue}` : `control-${sanitizedValue}`;
+};
 
 /**
  * Adds `set` prefix to make ID attribute more specific. Removes spaces because spaces are not
- * allowed in ID attributes
+ * allowed in ID attributes. Optionally accepts a prefix to ensure uniqueness when multiple
+ * Controls blocks are rendered on the same page.
  *
  * @example
  *
  * ```ts
  * getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
+ * getControlSetterButtonId('my prop name', 'story-1') -> 'set-story-1-my-prop-name'
  * ```
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlSetterButtonId = (value: string) => `set-${value.replace(/\s+/g, '-')}`;
+export const getControlSetterButtonId = (value: string, idPrefix?: string) => {
+  const sanitizedValue = value.replace(/\s+/g, '-');
+  return idPrefix ? `set-${idPrefix}-${sanitizedValue}` : `set-${sanitizedValue}`;
+};
diff --git a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
index 4e7e5861b30c..2bb4eb7f9769 100644
--- a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
@@ -61,6 +61,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   onChange,
   isInline,
   argType,
+  idPrefix,
 }) => {
   if (!options) {
     logger.warn(`Checkbox with no options: ${name}`);
@@ -88,7 +89,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
     setSelected(selectedKeys(value || [], options));
   }, [value]);
 
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   return (
     <Wrapper $isInline={isInline}>
diff --git a/code/addons/docs/src/blocks/controls/options/Radio.tsx b/code/addons/docs/src/blocks/controls/options/Radio.tsx
index b3d29b4027c1..c869ccdb0b7e 100644
--- a/code/addons/docs/src/blocks/controls/options/Radio.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Radio.tsx
@@ -61,13 +61,14 @@ export const RadioControl: FC<RadioProps> = ({
   onChange,
   isInline,
   argType,
+  idPrefix,
 }) => {
   if (!options) {
     logger.warn(`Radio with no options: ${name}`);
     return <>-</>;
   }
   const selection = selectedKey(value, options);
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   const readonly = !!argType?.table?.readonly;
 
diff --git a/code/addons/docs/src/blocks/controls/options/Select.tsx b/code/addons/docs/src/blocks/controls/options/Select.tsx
index 334c12e6cf4c..4a74aab77620 100644
--- a/code/addons/docs/src/blocks/controls/options/Select.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Select.tsx
@@ -104,12 +104,12 @@ type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
 
 const NO_SELECTION = 'Choose option...';
 
-const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
+const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType, idPrefix }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(options[e.currentTarget.value]);
   };
   const selection = selectedKey(value, options) || NO_SELECTION;
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   const readonly = !!argType?.table?.readonly;
 
@@ -133,7 +133,7 @@ const SingleSelect: FC<SelectProps> = ({ name, value, options, onChange, argType
   );
 };
 
-const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType }) => {
+const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType, idPrefix }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selection = Array.from(e.currentTarget.options)
       .filter((option) => option.selected)
@@ -141,7 +141,7 @@ const MultiSelect: FC<SelectProps> = ({ name, value, options, onChange, argType
     onChange(selectedValues(selection, options));
   };
   const selection = selectedKeys(value, options);
-  const controlId = getControlId(name);
+  const controlId = getControlId(name, idPrefix);
 
   const readonly = !!argType?.table?.readonly;
 
diff --git a/code/addons/docs/src/blocks/controls/types.ts b/code/addons/docs/src/blocks/controls/types.ts
index c080d54bccc4..d16d16523b66 100644
--- a/code/addons/docs/src/blocks/controls/types.ts
+++ b/code/addons/docs/src/blocks/controls/types.ts
@@ -8,6 +8,11 @@ export interface ControlProps<T> {
   onChange: (value?: T) => T | void;
   onFocus?: (evt: any) => void;
   onBlur?: (evt: any) => void;
+  /**
+   * Optional prefix to ensure unique IDs when multiple Controls blocks
+   * are rendered on the same page. Typically the story ID.
+   */
+  idPrefix?: string;
 }
 
 export type BooleanValue = boolean;