Fix SwitchField label not toggling the switch

[Meliceanu]

Fixes #42

Problem

SwitchField renders its FormLabel with htmlFor={id}, but that id is never forwarded to the SwitchInput button. As a result the label's for attribute points at a non-existent element, so clicking the label does nothing — unlike native checkboxes (and legacy DatoCMS plugins), where clicking the label toggles the control and enlarges the clickable area.

Fix

Forward id={id} to the SwitchInput. Since <button> is a labelable element, this restores the native label/control association, so clicking the label toggles the switch again. SwitchInput already spreads unknown props onto its <button>, so no other change is needed.

           <SwitchInput
             {...switchInputProps}
+            id={id}
             name={name}
             value={value}
             onChange={onChange}

Verification

With the id in place, the label's for matches the button's id, the label resolves to the button as its associated control, and a click on the label triggers onChange. Without it, the label has no associated control and the click is a no-op.

[roger-datocms]

Thanks @meliceanu, good catch! Strangely enough, in my tests, even though the ID gets forwarded properly, it still doesn't actually work. Some React magic is ignoring the forwarded click and I'm looking into it.

Before

Button has no ID. Label click does nothing.

<button name="labelClickTest" type="button" role="switch" aria-checked="false" class="_switchInput_vh6pt_1"><span class="_switchInput__inner_vh6pt_1"></span></button>

After

Button HAS ID now, but label click still does nothing :(

<button id="label-click-test" name="labelClickTest" type="button" role="switch" aria-checked="false" class="_switchInput_vh6pt_1"><span class="_switchInput__inner_vh6pt_1"></span></button>

2026-07-15.12-54-47.PM.mp4

Looking into it!

[roger-datocms]

Congratulations @Meliceanu, you win our official DatoCMS Claude Confuser of the Day Award™! 😆

Even with a <button/>, htmlFor SHOULD'VE just worked with the ID pass-through, and it was quite confusing why it didn't. Opus went down a deep rabbit hole digging up obscure browser bugs from decades ago and over-engineering a crazy hack with multiple layers of manual click handlers propagated through the entire React component tree.

Thankfully Fable stumbled upon the real cause during debugging:
https://github.com/datocms/plugins-sdk/blob/master/packages/react-ui/src/SwitchField/styles.module.css#L14

.switchField__label {
  pointer-events: none;
  ...
}

Someone had turned it off on purpose, for some reason unknown to me. 🤔

With that removed, the ID pass-through works perfectly now:

---

I can't merge to main in this repo anyway, but I've updated your PR branch with that fix so it's ready to merge. I'll flag this for the devs to review — maybe somebody knows why that pointer-events was there — and we'll bring this in as soon as we can.

Thank you again!

...And to think, at first I thought to myself, "Why even test this... it's a one-line, obviously-correct fix..." Lol.

[Meliceanu]

Clutch move by Fable!