TextField can't work with <Input type='file' />

[jim-king-2000]

Provide a general summary of the feature here

<TextField> does not appear to work correctly with <Input type="file" webkitdirectory />.

When a directory is selected, the native file input works correctly by itself. However, once wrapped inside <TextField>, the control still displays “No files selected”.

<TextField
  validationBehavior='native'
  variant='secondary'
  isRequired
  name='files'
  aria-label='files'
>
  <NativeLabel>Select a directory</NativeLabel>
  <Input type='file' webkitdirectory='true' />
  <FieldError />
</TextField>

This is particularly important for RSC + Server Action workflows, because this pattern provides several advantages:

• The selected files are available directly in onSubmit.
• The dialog can remain a pure RSC implementation.
• Validation errors can be displayed automatically through <FieldError>.
• The flow works naturally with uncontrolled components and Server Actions.
• The dialog remains loosely coupled and can be split into multiple components when needed.

At the moment, the Picker component does not provide these advantages.

🤔 Expected Behavior?

After selecting a directory, the input should behave like a normal native file input and display something like:

12 files selected

😯 Current Behavior

After selecting a directory, the input still shows:

No files selected

even though the files are actually available in the form submission.

💁 Possible Solution

Maybe this requires:

• proper support for <Input type="file"> inside <TextField>, or
• a dedicated <FileField> component, or
• a more generic <Field> wrapper that works with native file inputs.

🔦 Context

Steps to reproduce:

1. Start the app and open localhost:3000.
2. Click the “Select a directory” button.
3. Select a local directory.
4. Notice that the UI still shows “No files selected”.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I wouldn't expect this to work, an input type="file" isn't a textfield, it's really just a button with a label. https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file

What are you expecting to happen? Do you want to be able to edit the file path? I don't think that's allowed by the native one. You'd need to go into the picker again.

I suspect you're trying to do what's outlined here #5486 ?

[jim-king-2000]

We’re building a dataset upload dialog.

A dataset is just a directory of files. We don’t care about its internal structure or contents — we simply upload all files and feed them into the AI pipeline.

At the same time, we want to aggressively adopt modern web platform features and the latest React capabilities, including:

• native <dialog>
• <details> + <summary>
• the Popover API
• CSS Anchor Positioning
• React Server Components (RSC)
• Server Actions

Beyond the AI business logic itself, the larger goal is to explore a next-generation frontend micro-framework that is:

• Fast — powered by RSC.
• Native — built on modern browser APIs instead of heavy abstractions.
• Simple — based on uncontrolled components and Server Actions.

Specifically, we’re building a dialog library with support for:

1. Native <dialog> support.
2. React Server Components (RSC), as much as possible.
3. Uncontrolled components.
4. Server Actions for form submissions. See https://stackoverflow.com/questions/79940262/how-to-make-a-rsc-form-with-server-action/79940310#79940310.
5. Preserving form state when errors occur.
6. Resetting form state on cancel or successful submission.
7. Disabling the entire dialog while pending/busy.
8. Easy error message rendering. See https://heroui.com/docs/react/components/field-error#usage.

Then these are our pseudo code:

1. The form

  'use client'
  
  import { Fieldset, Form } from '@heroui/react'
  import { useState } from 'react'
  
  export function UploadForm({ children }) {
    const [disabled, setDisabled] = useState(false)
    const [error, setError] = useState({})
    return (
      <Form
        validationErrors={error}
        onSubmit={async (e) => {
          try {
            setDisabled(true)
            e.preventDefault()
  
            const formData = new FormData(e.currentTarget)
            const formValues = Object.fromEntries(formData)
            console.log(formValues)
  
            db.process(formValues)
  
            const dialog = e.target.closest('dialog')
            dialog?.close()
          } finally {
            setDisabled(false)
          }
        }}
      >
        <Fieldset disabled={disabled} className='h-full flex flex-col gap-0'>
          {children}
        </Fieldset>
      </Form>
    )
  }

1. The dialog

import 'server-only'

import { NativeButton } from '@components/nativeHeroui/button'
import { NativeLabel } from '@components/nativeHeroui/label'
import { NativeModal } from '@components/nativeHeroui/modal'
import { FolderArrowUpIn } from '@gravity-ui/icons'
import { FieldError, Input, TextField } from '@heroui/react'
import { UploadForm } from './uploadForm'
import { FileField } from './fileField'

export function UploadDialog() {
  return (
    <NativeModal>
      <NativeModal.Trigger>
        <NativeButton command='show-modal' commandfor='upload-dataset'>
          <FolderArrowUpIn />
          Upload dataset
        </NativeButton>
      </NativeModal.Trigger>
      <NativeModal.Dialog id='upload-dataset'>
        <NativeModal.CloseTrigger type='button' commandfor='upload-dataset' />
        <UploadForm>
          <NativeModal.Header>
            <NativeModal.Heading>Upload dataset</NativeModal.Heading>
          </NativeModal.Header>
          <NativeModal.Body className='-m-1 p-1 flex flex-col gap-2'>
            <TextField
              variant='secondary'
              isRequired
              name='title'
              aria-label='title'
            >
              <NativeLabel>Title</NativeLabel>
              <Input placeholder='Please enter the title' />
              <FieldError />
            </TextField>
            <TextField isRequired name='files'>
              <NativeLabel>Files</NativeLabel>
              <Input type='file' webkitdirectory='true' variant='secondary' />
              <FieldError />
            </TextField>
          </NativeModal.Body>
          <NativeModal.Footer>
            <NativeButton
              variant='secondary'
              type='button'
              command='close'
              commandfor='upload-dataset'
            >
              Cancel
            </NativeButton>
            <NativeButton type='submit'>Upload</NativeButton>
          </NativeModal.Footer>
        </UploadForm>
      </NativeModal.Dialog>
    </NativeModal>
  )
}

With the code above, we get several advantages:

• The selected files are available directly in onSubmit.
• The entire dialog can remain a pure RSC implementation.
• Validation errors like { files: 'The file format is incorrect.' } can be displayed automatically through <FieldError> inside <TextField>.
• The whole flow works naturally with uncontrolled components and Server Actions.
• Low coupling. The dialog can be decomposed into multiple components if needed.

The Picker component doesn’t seem to provide these advantages.

Unfortunately, <TextField> and <Input type="file"> don’t work well together. Is there any recommended workaround for this?

Or would you consider providing a dedicated <FileField> component — or at least a generic <Field> wrapper that supports <Input type="file">?