File Input

Forms

A clickable drag-and-drop area for selecting a file.

File inputs turn the plain file picker into a friendly drop zone. Click anywhere inside to browse, and the selected file name is shown back to the user.

npx shadcn@latest add file-input

Basic usage

Click the dashed area to pick a file; the name appears once selected.

Preview

Live

Drop files here or click to browse

tsx

1<FileInput className="w-full max-w-sm" />

Controlled

onChange receives the native change event for uploads.

Preview

Live

Drop files here or click to browse

tsx

1<FileInput
2  onChange={(event) => {
3    const file = event.target.files?.[0]
4    console.log(file?.name)
5  }}
6/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
onChange	ChangeEventHandler<HTMLInputElement>	Called when a file is selected.
accept	string	Restricts the selectable file types.
multiple	boolean= false	Allows selecting multiple files.
disabled	boolean= false	Disables the drop zone.
className	string	Additional classes merged into the drop zone.