File Input
A file picker with drag-and-drop, type detection, image previews, and size/count validation. Two variants — default (compact button) and dropzone (full drop target) — plus pre-configured ImageInput and DocumentInput.
Dropzone Variant
Drop files or click to upload
Specialized Variants
ImageInput accepts JPEG / PNG / GIF / WebP. DocumentInput accepts PDF, Office formats, and plain text.
Installation
Props
Also exports formatFileSize(bytes) and getFileType(file) helpers.
| Prop | Type | Default | Description |
|---|---|---|---|
value | File[] | — | Controlled list of files. |
onChange | (files: File[]) => void | — | Called when the user adds or removes files. |
variant | "default" | "dropzone" | "default" | Visual style. The dropzone is a large drag-and-drop target. |
maxFiles | number | — | Reject extra files once this count is reached. |
maxSize | number | — | Reject files larger than this many bytes. |
showPreview | boolean | true | Render thumbnails for image files. |
accept | string | — | Standard accept attribute (e.g. "image/*"). |