<Label> + <Checkbox> inside <Field> triggers Chrome "label's for attribute doesn't match any element id" warning

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.9

What browser are you using?

Chrome (DevTools Issues panel)

Reproduction URL

https://github.com/brianhdev/headless-checkbox-bug

Describe your issue

When using <Field> + <Label> + <Checkbox> together in a <form>, Chrome's DevTools reports the following Issue for every rendered checkbox:

Things I've verified:

Adding name to <Checkbox> causes Headless UI to render an additional hidden <input type="checkbox"> via FormFields, but that input has no id, so the <Label>'s for still references the visible <button> — the warning persists.

The IdProvider from <Field> wires the same id into both <Checkbox> (as id) and <Label> (as htmlFor), and there doesn't appear to be a public API to either: (a) emit an id on the hidden form input from name, or (b) have <Label> use aria-labelledby only (no htmlFor) when wrapping a non-native control.

Workarounds I'm aware of (with tradeoffs):

• <Label as="span"> — silences the warning but loses native click-to-toggle on the label text.
• <Label passive> — same trade-off.
• Replacing <Checkbox> with a native <input type="checkbox"> — fixes the root cause but means not using Headless UI's checkbox.

Expected behavior:

An officially supported way to use <Field> + <Label> + <Checkbox> without Chrome reporting the autofill/a11y warning — for example, an opt-in to make <Label> associate via aria-labelledby only when paired with a non-native control, or an id-bearing hidden <input> that <Label>'s htmlFor could target.