[accordion][tabs] Consider making `value` a required prop

[mj12albert]

Currently it's possible to omit the value prop in accordion and tabs entirely, using the index (by position) implicitly as the value instead.

This causes a few issues:

• Unable to "truly" unmount a TabPanel when keepMounted={false} https://github.com/mui/base-ui/issues/1872
• Mis-timed accordion animations https://github.com/mui/base-ui/issues/1588
• Unable to SSR initially open accordion or initially active tab
• https://github.com/mui/base-ui/issues/2096

(In Radix, value is required for both accordion and tabs)

[mj12albert]

Ariakit has unmountOnHide which has the same limitation with Tabs, it only unmounts the children: https://codesandbox.io/p/sandbox/cool-nobel-9fgp9q

[ImSingee]

Support this.

Omitting the value offers minimal advantages but can result in multiple issues. On one hand, it may cause the technical problems highlighted in this issue. On the other hand, it likely increases the risk of errors during code maintenance for both users and base-ui maintainers.

[benface]

Omitting the value offers minimal advantages

Personally, I think it's really nice for DX (I hate naming things, and explicitly setting the value to an index feels silly and error-prone). But, if there's no good way around the issues it causes, I agree that it's not worth it.

[ciampo]

I also agree that it's better to require value — IMO the benefits far outweigh the slightly worse DX.

(Extra thought: Consumers of Base UI could also decide to create an abstraction and generate values internally, in case they wanted their own consumers not to specify values?)

[mj12albert]

We discussed this and decided to use useId to generate the fallback value if none is specified, this way you can still omit the value and the component will work

But to set the initially active tab or initial opened state of an accordion the value must be specified

[github-actions[bot]]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@3373