From d80100e66205a42e318a36949c03649fb7ae6b61 Mon Sep 17 00:00:00 2001
From: Seydi Charyyev <seydi.charyev@gmail.com>
Date: Thu, 14 May 2026 09:09:31 +0500
Subject: [PATCH] fix: scope control ids to <Controls /> instance via
 controlsId

---
 .../src/blocks/blocks/Controls.stories.tsx    | 22 ++++++++++++++
 .../docs/src/blocks/blocks/Controls.tsx       |  8 ++++-
 .../components/ArgsTable/ArgControl.tsx       | 11 ++++++-
 .../blocks/components/ArgsTable/ArgRow.tsx    |  1 +
 .../blocks/components/ArgsTable/ArgsTable.tsx | 11 ++++++-
 .../docs/src/blocks/controls/Boolean.tsx      |  5 ++--
 .../addons/docs/src/blocks/controls/Color.tsx |  3 +-
 code/addons/docs/src/blocks/controls/Date.tsx |  3 +-
 .../addons/docs/src/blocks/controls/Files.tsx |  3 +-
 .../docs/src/blocks/controls/Number.tsx       |  5 ++--
 .../docs/src/blocks/controls/Object.tsx       | 13 ++++++--
 .../addons/docs/src/blocks/controls/Range.tsx |  3 +-
 code/addons/docs/src/blocks/controls/Text.tsx |  5 ++--
 .../docs/src/blocks/controls/helpers.test.ts  | 18 +++++++++++
 .../docs/src/blocks/controls/helpers.ts       | 30 +++++++++++++++----
 .../src/blocks/controls/options/Checkbox.tsx  |  3 +-
 .../src/blocks/controls/options/Radio.tsx     |  3 +-
 .../src/blocks/controls/options/Select.tsx    | 24 ++++++++++++---
 code/addons/docs/src/blocks/controls/types.ts |  1 +
 19 files changed, 144 insertions(+), 28 deletions(-)

diff --git a/code/addons/docs/src/blocks/blocks/Controls.stories.tsx b/code/addons/docs/src/blocks/blocks/Controls.stories.tsx
index 0a312c1e2f55..d1289aadb7f3 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.stories.tsx
+++ b/code/addons/docs/src/blocks/blocks/Controls.stories.tsx
@@ -181,3 +181,25 @@ export const MultipleControlsOnSamePage: Story = {
     await expect(uniqueIds.size).toBe(allIds.length);
   },
 };
+
+/**
+ * When multiple Controls blocks for the SAME story are on the same docs page, each control should
+ * still have a unique id (and unique name across blocks, so that radio button groups remain
+ * independent). This verifies the fix for https://github.com/storybookjs/storybook/issues/29295.
+ */
+export const MultipleControlsForSameStoryOnSamePage: Story = {
+  render: () => (
+    <>
+      <Controls of={ExampleStories.NoParameters} />
+      <Controls of={ExampleStories.NoParameters} />
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const allIds = Array.from(canvasElement.querySelectorAll('[id^="control-"]')).map(
+      (el) => el.id
+    );
+    const uniqueIds = new Set(allIds);
+    await expect(allIds.length).toBeGreaterThan(0);
+    await expect(uniqueIds.size).toBe(allIds.length);
+  },
+};
diff --git a/code/addons/docs/src/blocks/blocks/Controls.tsx b/code/addons/docs/src/blocks/blocks/Controls.tsx
index 5110ba6687c0..daef8088287e 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.tsx
+++ b/code/addons/docs/src/blocks/blocks/Controls.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/destructuring-assignment */
 import type { FC } from 'react';
-import React, { useContext } from 'react';
+import React, { useContext, useId } from 'react';
 
 import type { Parameters, Renderer, StrictArgTypes } from 'storybook/internal/csf';
 import type { ArgTypesExtractor } from 'storybook/internal/docs-tools';
@@ -43,6 +43,10 @@ const ControlsImpl: FC<ControlsProps> = (props) => {
   const { of } = props;
   const context = useContext(DocsContext);
   const primaryStory = usePrimaryStory();
+  // Disambiguate multiple <Controls /> blocks rendered for the same story on a single page.
+  // React's useId produces a stable id per component instance; strip colons since they require
+  // escaping in CSS selectors.
+  const controlsId = useId().replace(/:/g, '');
 
   const story = of ? context.resolveOf(of, ['story']).story : primaryStory;
 
@@ -71,6 +75,7 @@ const ControlsImpl: FC<ControlsProps> = (props) => {
     return (
       <PureArgsTable
         storyId={story.id}
+        controlsId={controlsId}
         rows={filteredArgTypes as any}
         sort={sort}
         args={args}
@@ -104,6 +109,7 @@ const ControlsImpl: FC<ControlsProps> = (props) => {
       updateArgs={updateArgs}
       resetArgs={resetArgs}
       storyId={story.id}
+      controlsId={controlsId}
     />
   );
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index 97d3013b4bd8..700a90eeffdb 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -22,6 +22,7 @@ export interface ArgControlProps {
   updateArgs: (args: Args) => void;
   isHovered: boolean;
   storyId?: string;
+  controlsId?: string;
 }
 
 const Controls: Record<string, FC<any>> = {
@@ -44,7 +45,14 @@ const Controls: Record<string, FC<any>> = {
 
 const NoControl = () => <>-</>;
 
-export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovered, storyId }) => {
+export const ArgControl: FC<ArgControlProps> = ({
+  row,
+  arg,
+  updateArgs,
+  isHovered,
+  storyId,
+  controlsId,
+}) => {
   const { key, control } = row;
 
   const [isFocused, setFocused] = useState(false);
@@ -88,6 +96,7 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   const props = {
     name: key,
     storyId,
+    controlsId,
     argType: row,
     value: boxedValue.value,
     onChange,
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
index 83ad20c476ac..adb6f33e8453 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
@@ -22,6 +22,7 @@ interface ArgRowProps {
   expandable?: boolean;
   initialExpandedArgs?: boolean;
   storyId?: string;
+  controlsId?: 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 11e0325d6460..9dd2ce45e630 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -216,6 +216,7 @@ export interface ArgsTableOptionProps {
   isLoading?: boolean;
   sort?: SortType;
   storyId?: string;
+  controlsId?: string;
 }
 interface ArgsTableDataProps {
   rows: ArgTypes;
@@ -340,6 +341,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     sort = 'none',
     isLoading,
     storyId,
+    controlsId,
   } = props;
 
   if ('error' in props) {
@@ -393,7 +395,14 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   }
   const expandable = Object.keys(groups.sections).length > 0;
 
-  const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs, storyId };
+  const common = {
+    updateArgs,
+    compact,
+    inAddonPanel,
+    initialExpandedArgs,
+    storyId,
+    controlsId,
+  };
 
   return (
     <ResetWrapper>
diff --git a/code/addons/docs/src/blocks/controls/Boolean.tsx b/code/addons/docs/src/blocks/controls/Boolean.tsx
index ee89ab44d8cf..e302aa6f2b93 100644
--- a/code/addons/docs/src/blocks/controls/Boolean.tsx
+++ b/code/addons/docs/src/blocks/controls/Boolean.tsx
@@ -123,6 +123,7 @@ export type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
 export const BooleanControl: FC<BooleanProps> = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onBlur,
@@ -137,7 +138,7 @@ export const BooleanControl: FC<BooleanProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name, storyId)}
+        id={getControlSetterButtonId(name, storyId, controlsId)}
         onClick={onSetFalse}
         disabled={readonly}
       >
@@ -145,7 +146,7 @@ export const BooleanControl: FC<BooleanProps> = ({
       </Button>
     );
   }
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   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 b109004c2e63..f837fdfa52ed 100644
--- a/code/addons/docs/src/blocks/controls/Color.tsx
+++ b/code/addons/docs/src/blocks/controls/Color.tsx
@@ -367,6 +367,7 @@ export type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
 export const ColorControl: FC<ColorControlProps> = ({
   name,
   storyId,
+  controlsId,
   value: initialValue,
   onChange,
   onFocus,
@@ -385,7 +386,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   const Picker = ColorPicker[colorSpace];
 
   const readOnly = !!argType?.table?.readonly;
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   return (
     <Wrapper>
diff --git a/code/addons/docs/src/blocks/controls/Date.tsx b/code/addons/docs/src/blocks/controls/Date.tsx
index 55fe0063bb71..ad54e31be7cc 100644
--- a/code/addons/docs/src/blocks/controls/Date.tsx
+++ b/code/addons/docs/src/blocks/controls/Date.tsx
@@ -69,6 +69,7 @@ export type DateProps = ControlProps<DateValue> & DateConfig;
 export const DateControl: FC<DateProps> = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onFocus,
@@ -122,7 +123,7 @@ export const DateControl: FC<DateProps> = ({
     setValid(!!time);
   };
 
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   return (
     <FlexSpaced>
diff --git a/code/addons/docs/src/blocks/controls/Files.tsx b/code/addons/docs/src/blocks/controls/Files.tsx
index 85f2d839701a..e795b71e1238 100644
--- a/code/addons/docs/src/blocks/controls/Files.tsx
+++ b/code/addons/docs/src/blocks/controls/Files.tsx
@@ -41,6 +41,7 @@ export const FilesControl: FC<FilesControlProps> = ({
   onChange,
   name,
   storyId,
+  controlsId,
   accept = 'image/*',
   value,
   argType,
@@ -64,7 +65,7 @@ export const FilesControl: FC<FilesControlProps> = ({
     }
   }, [value, name]);
 
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   return (
     <>
diff --git a/code/addons/docs/src/blocks/controls/Number.tsx b/code/addons/docs/src/blocks/controls/Number.tsx
index a3f33db74de7..df5941d53c05 100644
--- a/code/addons/docs/src/blocks/controls/Number.tsx
+++ b/code/addons/docs/src/blocks/controls/Number.tsx
@@ -28,6 +28,7 @@ const FormInput = styled(Form.Input)(({ theme }) => ({
 export const NumberControl: FC<NumberProps> = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   min,
@@ -103,7 +104,7 @@ export const NumberControl: FC<NumberProps> = ({
         ariaLabel={false}
         variant="outline"
         size="medium"
-        id={getControlSetterButtonId(name, storyId)}
+        id={getControlSetterButtonId(name, storyId, controlsId)}
         onClick={onForceVisible}
         disabled={readonly}
       >
@@ -116,7 +117,7 @@ export const NumberControl: FC<NumberProps> = ({
     <Wrapper>
       <FormInput
         ref={htmlElRef}
-        id={getControlId(name, storyId)}
+        id={getControlId(name, storyId, controlsId)}
         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 a724dfb9d0a7..1c30686175d4 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -163,7 +163,14 @@ const selectValue = (event: SyntheticEvent<HTMLInputElement>) => {
 
 export type ObjectProps = ControlProps<ObjectValue> & ObjectConfig;
 
-export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange, argType }) => {
+export const ObjectControl: FC<ObjectProps> = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  onChange,
+  argType,
+}) => {
   const theme = useTheme();
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
@@ -208,7 +215,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange,
       <Button
         ariaLabel={false}
         disabled={readonly}
-        id={getControlSetterButtonId(name, storyId)}
+        id={getControlSetterButtonId(name, storyId, controlsId)}
         onClick={onForceVisible}
       >
         Set object
@@ -219,7 +226,7 @@ export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange,
   const rawJSONForm = (
     <RawInput
       ref={htmlElRef}
-      id={getControlId(name, storyId)}
+      id={getControlId(name, storyId, controlsId)}
       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 61878d0fe909..d9bb83101444 100644
--- a/code/addons/docs/src/blocks/controls/Range.tsx
+++ b/code/addons/docs/src/blocks/controls/Range.tsx
@@ -178,6 +178,7 @@ function getNumberOfDecimalPlaces(number: number) {
 export const RangeControl: FC<RangeProps> = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   min = 0,
@@ -195,7 +196,7 @@ export const RangeControl: FC<RangeProps> = ({
   const numberOFDecimalsPlaces = useMemo(() => getNumberOfDecimalPlaces(step), [step]);
 
   const readonly = !!argType?.table?.readonly;
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   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 4723e9e5de68..642b35c9b353 100644
--- a/code/addons/docs/src/blocks/controls/Text.tsx
+++ b/code/addons/docs/src/blocks/controls/Text.tsx
@@ -23,6 +23,7 @@ const MaxLength = styled.div<{ isMaxed: boolean }>(({ isMaxed }) => ({
 export const TextControl: FC<TextProps> = ({
   name,
   storyId,
+  controlsId,
   value,
   onChange,
   onFocus,
@@ -50,7 +51,7 @@ export const TextControl: FC<TextProps> = ({
         variant="outline"
         size="medium"
         disabled={readonly}
-        id={getControlSetterButtonId(name, storyId)}
+        id={getControlSetterButtonId(name, storyId, controlsId)}
         onClick={onForceVisible}
       >
         Set string
@@ -63,7 +64,7 @@ export const TextControl: FC<TextProps> = ({
   return (
     <Wrapper>
       <Form.Textarea
-        id={getControlId(name, storyId)}
+        id={getControlId(name, storyId, controlsId)}
         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 b5661e024238..7963639b9858 100644
--- a/code/addons/docs/src/blocks/controls/helpers.test.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.test.ts
@@ -15,6 +15,14 @@ describe('getControlId', () => {
   it('includes storyId when provided', () => {
     expect(getControlId('some-id', 'story--name')).toBe('control-story--name-some-id');
   });
+
+  it('includes controlsId when provided', () => {
+    expect(getControlId('some-id', undefined, 'r1')).toBe('control-r1-some-id');
+  });
+
+  it('includes both controlsId and storyId when provided', () => {
+    expect(getControlId('some-id', 'story--name', 'r1')).toBe('control-r1-story--name-some-id');
+  });
 });
 
 describe('getControlSetterButtonId', () => {
@@ -30,4 +38,14 @@ describe('getControlSetterButtonId', () => {
   it('includes storyId when provided', () => {
     expect(getControlSetterButtonId('some-id', 'story--name')).toBe('set-story--name-some-id');
   });
+
+  it('includes controlsId when provided', () => {
+    expect(getControlSetterButtonId('some-id', undefined, 'r1')).toBe('set-r1-some-id');
+  });
+
+  it('includes both controlsId and storyId when provided', () => {
+    expect(getControlSetterButtonId('some-id', 'story--name', 'r1')).toBe(
+      'set-r1-story--name-some-id'
+    );
+  });
 });
diff --git a/code/addons/docs/src/blocks/controls/helpers.ts b/code/addons/docs/src/blocks/controls/helpers.ts
index b9895c7eb293..0371921bedd7 100644
--- a/code/addons/docs/src/blocks/controls/helpers.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.ts
@@ -1,6 +1,7 @@
 /**
  * Adds `control` prefix to make ID attribute more specific. Removes spaces because spaces are not
- * allowed in ID attributes
+ * allowed in ID attributes. The optional `controlsId` disambiguates multiple `<Controls>` blocks
+ * rendered for the same story on a single page.
  *
  * @example
  *
@@ -10,14 +11,23 @@
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlId = (value: string, storyId?: string) => {
+export const getControlId = (value: string, storyId?: string, controlsId?: string) => {
   const base = value.replace(/\s+/g, '-');
-  return storyId ? `control-${storyId}-${base}` : `control-${base}`;
+  const parts = ['control'];
+  if (controlsId) {
+    parts.push(controlsId);
+  }
+  if (storyId) {
+    parts.push(storyId);
+  }
+  parts.push(base);
+  return parts.join('-');
 };
 
 /**
  * Adds `set` prefix to make ID attribute more specific. Removes spaces because spaces are not
- * allowed in ID attributes
+ * allowed in ID attributes. The optional `controlsId` disambiguates multiple `<Controls>` blocks
+ * rendered for the same story on a single page.
  *
  * @example
  *
@@ -27,7 +37,15 @@ export const getControlId = (value: string, storyId?: string) => {
  *
  * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
  */
-export const getControlSetterButtonId = (value: string, storyId?: string) => {
+export const getControlSetterButtonId = (value: string, storyId?: string, controlsId?: string) => {
   const base = value.replace(/\s+/g, '-');
-  return storyId ? `set-${storyId}-${base}` : `set-${base}`;
+  const parts = ['set'];
+  if (controlsId) {
+    parts.push(controlsId);
+  }
+  if (storyId) {
+    parts.push(storyId);
+  }
+  parts.push(base);
+  return parts.join('-');
 };
diff --git a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
index f1d891a2252b..775ea915be1c 100644
--- a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
@@ -57,6 +57,7 @@ type CheckboxProps = ControlProps<OptionsMultiSelection> & CheckboxConfig;
 export const CheckboxControl: FC<CheckboxProps> = ({
   name,
   storyId,
+  controlsId,
   options,
   value,
   onChange,
@@ -89,7 +90,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
     setSelected(selectedKeys(value || [], options));
   }, [value]);
 
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   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 c161119747f0..838b9f19a9a0 100644
--- a/code/addons/docs/src/blocks/controls/options/Radio.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Radio.tsx
@@ -57,6 +57,7 @@ type RadioProps = ControlProps<OptionsSingleSelection> & RadioConfig;
 export const RadioControl: FC<RadioProps> = ({
   name,
   storyId,
+  controlsId,
   options,
   value,
   onChange,
@@ -68,7 +69,7 @@ export const RadioControl: FC<RadioProps> = ({
     return <>-</>;
   }
   const selection = selectedKey(value, options);
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   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 232c0ca12842..9d24d4b348e4 100644
--- a/code/addons/docs/src/blocks/controls/options/Select.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Select.tsx
@@ -104,12 +104,20 @@ type SelectProps = ControlProps<OptionsSelection> & SelectConfig;
 
 const NO_SELECTION = 'Choose option...';
 
-const SingleSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange, argType }) => {
+const SingleSelect: FC<SelectProps> = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  options,
+  onChange,
+  argType,
+}) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(options[e.currentTarget.value]);
   };
   const selection = selectedKey(value, options) || NO_SELECTION;
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   const readonly = !!argType?.table?.readonly;
 
@@ -133,7 +141,15 @@ const SingleSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange
   );
 };
 
-const MultiSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange, argType }) => {
+const MultiSelect: FC<SelectProps> = ({
+  name,
+  storyId,
+  controlsId,
+  value,
+  options,
+  onChange,
+  argType,
+}) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selection = Array.from(e.currentTarget.options)
       .filter((option) => option.selected)
@@ -141,7 +157,7 @@ const MultiSelect: FC<SelectProps> = ({ name, storyId, value, options, onChange,
     onChange(selectedValues(selection, options));
   };
   const selection = selectedKeys(value, options);
-  const controlId = getControlId(name, storyId);
+  const controlId = getControlId(name, storyId, controlsId);
 
   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 ff909b4bdc8e..7bb69b8e9e1a 100644
--- a/code/addons/docs/src/blocks/controls/types.ts
+++ b/code/addons/docs/src/blocks/controls/types.ts
@@ -3,6 +3,7 @@ import type { ArgType } from '../components/ArgsTable/types';
 export interface ControlProps<T> {
   name: string;
   storyId?: string;
+  controlsId?: string;
   value?: T;
   defaultValue?: T;
   argType?: ArgType;