HeadlessUI overwrites some IDs

[ccssmnn]

When I use Headless UI Menu, I cannot set the ID of the button because Headless UI is setting its own.

e.g. id="menu button" --> id="headlessui-menu-button-1"

Is there a way I can "force" my own ID?

[addepar-ioc-jeff]

I want this too. I've got my own <label> and I want to assign an id to Listbox.Button

[adr7dev]

Yeah, it's also a problem in my case. I just can't attach any labels or other aria attributes. There is an option to solve the issue with a little hacky way by using refs, but with more complicated abstraction, it's necessary to use context, I'm afraid. However, it's like overengineering for something that could be handled straightforwardly with a possibility to set own id 🥴

[amcurative]

yeah I ended up doing this same hacky method to see if i could do it but its disgusting and we should not be forced into doing that lol, i can't even commit that code because its so yucky

[amcurative]

Yeah this is a humongous across the whole library and needs to be addressed. We should be able to provide our own ids and other props such as aria-labelledBy so we can support the use case of having external labels and associating them with these controls to maintain accessibility.

This really hinders flexibility. Even a simple case of wanting a consistent pattern for ids across my app, i dont need headless to force names my ids when I want to define my own.

I noticed it with Listbox where I cannot define my own id or pass a aria-labelledBy as my label is outside the component.

[KevinLi19]

This has been resolved in later versions. I just verified.
#2507