Addon Docs: Ensure unique control IDs with multiple Controls blocks

[kaigritun]

What this does

When multiple <Controls> blocks are rendered on the same MDX page, they previously generated duplicate ID attributes (e.g., control-propName) because getControlId only used the arg name. This caused accessibility issues where clicking a label would focus the wrong control.

Before: Clicking a label in the second Controls block would change the first control.
After: Each Controls block has unique IDs prefixed with the story ID.

Changes

• Updates getControlId and getControlSetterButtonId helpers to accept an optional idPrefix parameter
• Adds idPrefix prop to ControlProps interface and all control components
• Passes idPrefix through the component chain: Controls → ArgsTable → ArgRow → ArgControl → individual controls
• Uses story.id as the idPrefix in the Controls block

Generated IDs

Before: control-disabled, control-size
After: control-component--story-a-disabled, control-component--story-b-disabled

Testing

• Added unit tests for the new idPrefix parameter in helpers.test.ts
• Tested manually with multiple Controls blocks on the same MDX page

Fixes #26144

Checklist

• Code changes are tested (unit tests added for helpers)
• Documentation is updated (JSDoc comments on new props)
• Breaking changes documented (N/A - backwards compatible, idPrefix is optional)

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • Fixed potential ID conflicts when rendering multiple Controls blocks on the same page by adding proper DOM ID scoping. All control types now support unique ID generation with optional prefixes.

• Tests

  • Expanded test coverage for ID generation helpers to verify prefix support.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR adds an optional idPrefix prop throughout the controls system in the docs addon to enable unique DOM IDs when multiple Controls blocks render on the same page. The idPrefix (typically a story ID) is threaded from the top-level Controls block through ArgsTable components down to individual control components, where it's used in ID generation.

Changes

Cohort / File(s)	Summary
Top-level Controls Block code/addons/docs/src/blocks/blocks/Controls.tsx	Passes idPrefix={story.id} to PureArgsTable and TabbedArgsTable components.
ArgsTable Components code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx, code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx, code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx	Added optional idPrefix prop to interfaces and component signatures, threaded through to control components for ID scoping.
Individual Control Components code/addons/docs/src/blocks/controls/Boolean.tsx, code/addons/docs/src/blocks/controls/Color.tsx, code/addons/docs/src/blocks/controls/Date.tsx, code/addons/docs/src/blocks/controls/Files.tsx, code/addons/docs/src/blocks/controls/Number.tsx, code/addons/docs/src/blocks/controls/Object.tsx, code/addons/docs/src/blocks/controls/Range.tsx, code/addons/docs/src/blocks/controls/Text.tsx, code/addons/docs/src/blocks/controls/options/Checkbox.tsx, code/addons/docs/src/blocks/controls/options/Radio.tsx, code/addons/docs/src/blocks/controls/options/Select.tsx	Added idPrefix prop to all control component signatures and updated ID generation calls to pass idPrefix to helper functions.
Helper Functions & Types code/addons/docs/src/blocks/controls/helpers.ts, code/addons/docs/src/blocks/controls/helpers.test.ts, code/addons/docs/src/blocks/controls/types.ts	Extended getControlId and getControlSetterButtonId to accept optional idPrefix parameter; updated ControlProps interface with optional idPrefix property; added test cases for prefix variations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• #32539: Modifies NumberControl with changes to ID generation and button handling, overlapping implementation details with this PR.
• #32458: Modifies the same suite of docs controls components (Boolean, Number, Object, Text, Date, Files, Color) with similar control props and ID handling updates.

✨ Finishing touches

• 📝 Generate docstrings

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[storybook-app-bot]

Package Benchmarks

^{Commit: fef6e70, ran on 9 February 2026 at 12:32:30 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	779 KB	776 KB	🎉 -3 KB 🎉
Dependency size	67.61 MB	67.57 MB	🎉 -47 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	50	50	0
Self size	1.04 MB	1000 KB	🎉 -44 KB 🎉
Dependency size	36.93 MB	36.93 MB	🎉 -3 KB 🎉
Bundle Size Analyzer	node	node

[Sidnioulz]

Thanks for the PR @kaigritun!

Overall the idea behind your change seems good to me, and the code looks good, but I cannot find a way to manually test your change on your branch.

Could you please

• Add a story that specifically tests for this (if you could find a way to add a TabbedArgsTable story with editable controls, this would directly match the use case reported in the bug)
• rewrite your PR description to match our PR template, with "Manual testing instructions"? it might sound trivial but when the team QAs dozens of PRs, it really helps us to have everything laid out in the same way, and to know which story to navigate to to verify your bug fix

Thanks 🙏 I look forward to approving and merging your PR once I'm able to test it manually

[valentinpalkovic]

Closing due to inactivity. Please feel free to re-open a new PR and address the above comment. Thank you so much for your contributions so far!