Custom id as a prop for Switch

[michael]

Currently for <Switch> components (React) an id is auto-generated.

https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/switch/switch.tsx#L114

Would it be possible to optionally allow an id to be passed? This way I could link the Switch with labels in a form.

<label htmlFor="my_toggle">
  Enable 2FA
</label>
<Switch id="my_toggle" ...>...</Switch>

Could work on a fix in a PR unless there are objections. Let me know!

[PhilippSchoenauer]

We have the same problem. We can*t wrap the the switch with a group, since the label is provided by another component.

[francoismassart]

Hello,
I am facing a similar issue.

In order to enhancement accessibility I'd like to provide an attribute aria-controls on a "close" <button> of a <Dialog>.

But I cannot do it because:

• I cannot provide a value for the idattribute of my <Dialog>
• I cannot retrieve the generated id attribute value generated by headlessui

Any solution ?

Thank you

[lounjukk]

Same issue here with <Combobox>. To overcome this issue we pass a ref to <HeadlessCombobox.Input> with useRef to fetch the auto-generated id prop, but this means we always need an extra render cycle to actually be able to use the id elsewhere (in our case accessible labels and error messages in a reusable wrapper component).

An optional id prop would be a much appreciated feature for all UI components.