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.
What package within Headless UI are you using?
@headlessui/reactWhat 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
nameto<Checkbox>causes Headless UI to render an additional hidden<input type="checkbox">via FormFields, but thatinputhas no id, so the<Label>'sforstill 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.<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.