[Listbox & Combobox] Add id prop

[kosciolek]

Listbox and Combobox do not accept an id prop. They manage their id internally.

We're building a component library on top of HeadlessUI, and we'd like the id to be customizable for two reasons:

• We'd like to use a custom label, instead of the one provided by HeadlessUI. I think it's a common use case, as HeadlessUI is supposed to be built upon, and most frameworks have their own labels, like MUI's FormControl or ChakraUI's FormControl.
• Consistency - id is customizable in all other components we provide.

It's possible to apply your own id to the Listbox or the Combobox with some "hacks", such as a custom <button/> / <input/> that blocks the id that's forced into it with React.children.map, but I assume it's not a supported behavior.

If this gets accepted, I'll make all the necessary PRs myself. I can implement it for other components, if you require it for consistency.

[RobinMalfait]

Hey, thank you for your question! 🙏

As of version 1.7.5 (released in December 2022) you can passthrough your own id if you want. If you don't provide one then an internal version will be used. However the Listbox and Combobox components themselves don't render anything, they are a wrapper component that provide some context.

In this case, you want to put the custom id to the Listbox.Options or Combobox.Options. Here is an example CodeSandbox link with this behaviour: https://codesandbox.io/p/sandbox/bitter-smoke-ycdq3j?file=%2Fsrc%2FApp.jsx%3A19%2C34

You also mention that you do want to provide a custom label. The good part is that Headless UI is headless and it doesn't come with any styles. This also means that you can use <Listbox.Label as={MyStyledLabel} /> and then you don't have to worry about passing in your own IDs everywhere. Here is another CodeSandbox example with this approach: https://codesandbox.io/p/sandbox/stupefied-moon-5nyowx?file=%2Fsrc%2FApp.jsx%3A8%2C47

Does this answer your question?

[kosciolek]

Thanks a ton.