Why does the Switch.Label contain an onClick property?

[imevanc]

I noticed that the Switch.Label includes an onClick property, given that a label should be a p or a span tag, why have you added the onClick here?

It can possibly create unwanted behaviours such as this one that I can see on the tailwindui. When the user clicks the label part of the component (ie "Annual billing (Save 10%)"), the toggle button is enabled/disabled.

After a small research, I found out that behaviour is not there if the Switch.Label is encapsulated in another p or span tag, but I am not convinced that this is the best thing to do.

[imevanc]

Has anyone seen this? @adamwathan

[adamwathan]

Hey! This is how labels generally work in HTML — clicking the label activates or toggles the associated form control.

See this really minimal JSFiddle example:

https://jsfiddle.net/s8oL2f6a/

If you don't want that behavior for your switch, set the passive prop on the label:

https://headlessui.com/react/switch#using-a-custom-label

[imevanc]

Cheers for clarifying it.