Dropzone
File upload area that accepts drag-and-drop or click-to-browse. Supports file type filtering, size limits, and multiple files. The drop area highlights on drag-over.
Examples
Drag & drop or click to upload
Drag and drop or click to upload
Accept specific types
Profile photo
Drag & drop or click to upload
PNG, JPG or GIF · Max 2 MB
Error state
Drag & drop or click to upload
File type not supported. Please upload a PDF.
Props
onFiles*
(files: File[]) => void
Called with the accepted File array after drop or file selection.
accept
string
Accepted MIME types or extensions, e.g. "image/*,.pdf". Passed to the hidden file input.
multiple= false
boolean
Allow selecting more than one file.
maxSize
number
Maximum file size in bytes. Files exceeding this are filtered out before onFiles is called.
maxFiles
number
Maximum number of files accepted per drop/selection.
label
string
Label rendered above the drop area.
hint
string
Overrides the auto-generated hint text.
error= false
boolean
Error border and background.
disabled= false
boolean
Disables all interaction.
children
ReactNode
Custom content inside the drop area — replaces the default icon and hint.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| onFiles* | (files: File[]) => void | — | Called with the accepted File array after drop or file selection. |
| accept | string | — | Accepted MIME types or extensions, e.g. "image/*,.pdf". Passed to the hidden file input. |
| multiple | boolean | false | Allow selecting more than one file. |
| maxSize | number | — | Maximum file size in bytes. Files exceeding this are filtered out before onFiles is called. |
| maxFiles | number | — | Maximum number of files accepted per drop/selection. |
| label | string | — | Label rendered above the drop area. |
| hint | string | — | Overrides the auto-generated hint text. |
| error | boolean | false | Error border and background. |
| disabled | boolean | false | Disables all interaction. |
| children | ReactNode | — | Custom content inside the drop area — replaces the default icon and hint. |
| className | string | — | Additional classes on the wrapper. |