Clicking Label does not open file picker when used in a Field with an Input type="file"

[EPurwanto]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.2.1

What browser are you using?

Tested in Chrome and Firefox

Reproduction URL

https://codesandbox.io/p/devbox/headless-ui-file-label-v5rlnq

The structure is just this:

      <Field className="mb-4 flex flex-col">
        <Label>Headless UI Field and Label</Label>
        <Input type={'file'} />
      </Field>
      <div className="mb-4 flex flex-col">
        <label htmlFor={'raw-input'}>Raw HTML Label</label>
        <Input id={'raw-input'} type={'file'} />
      </div>

Describe your issue

Clicking on a Label component that is attached to an Input element of type "file" does not open the file picker. This is different to a standard HTML <label>, which will open the file picker when clicked, both with a standard <input> element and the Headless UI Input component.

[Saf3ty1nnumb3rs]

Hello @EPurwanto
Thanks for the clear reproduction - I’ve also run into this exact problem.

The core issue is that Headless UI’s <Label> component does not replicate native <label> behavior for <input type="file">. While it successfully manages focus and accessibility for ARIA widgets, it uses a synthetic .click() on the target element, which browsers block for file inputs unless the event is a trusted, native user gesture. This prevents the file picker from opening.(see MDN, Chromium source)

Additionally, the component always applies aria-labelledby, even when it’s empty. According to the ARIA in HTML spec and accessible name computation spec, this overrides the implicit htmlFor → id linkage, further breaking expected behavior.

---

Limitations:

• <Label> triggers .click() programmatically — this does not open file pickers reliably (MDN, Chromium source).
• <Input> applies aria-labelledby="" — this disables native label associations (ARIA spec, accessible name calculation).

---

Workaround (which you are already aware, sorry, not a fix 😓 ):

For file uploads, use standard HTML elements:

<label htmlFor="file-upload">Upload</label>
<input id="file-upload" type="file" />

This ensures native interaction is preserved.

---

Hope this helps others running into the same limitation or at least describes the cause.

Edit: neglected to tag OP

Update: Even with a native <input type="file">, using Headless UI’s <Label> inside a <Field> can still block the file picker. This happens because <Label> participates in internal context and calls event.preventDefault(), which suppresses the browser’s native behavior.

[RobinMalfait]

Hey!

This should be fixed by #3707, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.