Inputs — Upload zone with a native file field

A dashed upload zone places a file glyph, a short heading and a native file chooser above format guidance. Use for one accessible document attachment.

ReactHTML

1440 × 480

Open in new tab

Component.tsx8 lines

export default function InputsFileDropzone() {
  return (
    <div className="w-72 rounded-lg border border-dashed border-neutral-300 bg-neutral-50 p-5 text-center text-neutral-900 sm:w-96"><div className="mx-auto flex size-10 items-center justify-center rounded-md bg-neutral-100 text-neutral-900"><svg className="size-5 shrink-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 16V3m-4 4 4-4 4 4M5 14v7h14v-7" /></svg></div>
    <label className="mt-3 block text-sm font-semibold" htmlFor="inputs-file-dropzone-file">Attach a file</label>
    <input className="mt-3 block w-full min-w-0 rounded-md border border-neutral-300 bg-white p-2 text-xs text-neutral-600 file:mr-2 file:rounded-md file:border-0 file:bg-neutral-900 file:px-3 file:py-2 file:text-xs file:font-medium file:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" id="inputs-file-dropzone-file" name="attachment" type="file" accept=".pdf,.txt" aria-describedby="inputs-file-dropzone-hint" />
    <p className="mt-3 text-xs text-neutral-500" id="inputs-file-dropzone-hint">PDF or TXT, up to 10 MB.</p></div>
  )
}

Pattern notes

When to use: Use for one document attachment with simple format guidance. Choose a file list when several uploads need progress or removal controls. Variations: change the accepted formats, allow multiple files, or reduce the size limit in the note.
Hierarchy: Read the upload icon, Attach a file, the chooser and format note. The visible label names the native input; aria-describedby connects the format and size guidance. Keep the attachment label under 4 words and guidance under 10 words.
Responsive: The zone is 288px below 640px and 384px from 640px. Its file field stays full width and permits the browser to truncate long filenames within the available space.
Layout: A 288px dashed-border zone grows to 384px at sm with 20px padding and centered content. A 40px icon tile precedes the 14px label by 12px. The full-width native file field has 8px padding and a compact dark chooser button. The hint follows by 12px.
States: The native file input opens the system chooser and displays the selected filename. Keyboard focus draws a 2px offset outline around the field. The accept attribute suggests PDF and TXT; the host validates file type and size after selection.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│                    Upload icon                       │
│                   Attach a file                      │
│ [Choose file]  No file chosen                        │
│               PDF or TXT, up to 10 MB.               │
└──────────────────────────────────────────────────────┘

View all

Inputs — Date range with a shared note
Layout tags: split,form,compact
Inputs — Dimensions with proportions and units
Layout tags: split,form,numbers,compact
Inputs — Field grid with mixed widths
Layout tags: grid,form,compact

Inputs — Upload zone with a native file field

Pattern notes

More in Inputs

Inputs — Date range with a shared note

Inputs — Dimensions with proportions and units

Inputs — Field grid with mixed widths