FileInput

File upload input with button mode and drag-and-drop zone support.

ExamplesCodeUsageChangelog

Button mode

The default: a styled button that opens the file picker. The button label updates to show the selected filename.

Choose a file

Tailwind v4

<FileInput v-model="file" label="Choose a file" />

With accept filter

Use accept to restrict which file types the browser offers in the picker.

Upload image

Tailwind v4

<FileInput v-model="image" accept="image/*" label="Upload image" />

Multiple files

Choose files

Tailwind v4

<FileInput v-model="files" :multiple="true" label="Choose files" />

Drag-and-drop zone

Set dragDrop to render a dashed drop zone. The border turns blue while a file is dragged over.

Drag & drop or click to browse

Tailwind v4

<FileInput v-model="file" :dragDrop="true" />

Drag-and-drop with accept

Drag & drop or click to browse

Accepted: .pdf,.doc,.docx

PDF or Word documents only

Tailwind v4

<FileInput v-model="doc" :dragDrop="true" accept=".pdf,.doc,.docx" hint="PDF or Word documents only" />

Error state

Upload report

File is required

Tailwind v4

<FileInput v-model="file" label="Upload report" :error="errors.file" />

Disabled

Upload document

Tailwind v4

<FileInput v-model="file" label="Upload document" :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	File | File[] | null	—	Selected file(s) (use with v-model)
multiple	boolean	false	Allow selecting multiple files
accept	string	—	Accepted file types (e.g. "image/*", ".pdf,.doc")
disabled	boolean	false	Disables the input
error	string	—	Error message — shows danger border + text below
hint	string	—	Hint text below the input
label	string	—	Button label (button mode only)
dragDrop	boolean	false	Show drag-and-drop zone instead of a button

Events

Event	Payload	Description
update:modelValue	File | File[] | null	Emitted when files are selected or dropped