Dropzone
A file upload area that supports drag and drop, click to browse, file previews, and removal. Built with compound components for maximum composability.
Import
Usage
Click to upload or drag and dropUpload up to 5 files. Max 10 MB each.
Custom Heading
Drag your files here
Custom Description
Click to upload or drag and dropUpload up to 5 screenshots that might be relevant. Max file size: 10 MB each.
Custom Icon
Image upload
Upload images
Document upload
Upload documents
Accept File Types
Upload a profile photoPNG, JPG or GIF. Max 5 MB.
Max Files
Click to upload or drag and dropUpload up to 2 files. The drop area hides when the limit is reached.
Error State
Click to upload or drag and drop
Please upload at least one file.
Disabled
Click to upload or drag and drop
Component Placement
Previews above area
Click to upload or drag and drop
Area only
Click to upload or drag and dropUpload up to 5 files. Max 10 MB each.
Error between area and previews
Click to upload or drag and drop
At least one file is required.
Custom Implementation
Upload up to 5 screenshots that might be relevant.
Max file size: 10 MB each.
Full Composition
Upload imagesPNG, JPG or GIF. Max 5 MB each. Up to 3 files.
Data Attributes
- -
data-slot="dropzone"Root dropzone element identifier - -
data-slot="dropzone-area"Interactive drop/click area identifier - -
data-slot="dropzone-icon"Icon wrapper element identifier - -
data-slot="dropzone-heading"Heading text element identifier - -
data-slot="dropzone-description"Description text element identifier - -
data-slot="dropzone-previews"File preview list container identifier - -
data-slot="dropzone-file"Individual file preview item identifier - -
data-slot="dropzone-error"Error message element identifier
Accessibility
Keyboard Support
- -
Enter / SpaceOpens the file picker dialog when the drop area is focused - -
TabMoves focus to the drop area or the next focusable element
ARIA Attributes
- -
roleThe drop area uses role='presentation' with an internal input for screen reader access - -
aria-label="Remove {filename}"Each file preview remove button has a descriptive label for assistive technology - -
role="alert"Error messages use role='alert' with aria-live='polite' for screen reader announcements
Dropzone Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| files | File[] | - | Controlled file list. |
| onFilesChange | (files: File[]) => void | - | Callback when the file list changes. |
| onReject | (rejections: FileRejection[]) => void | - | Callback fired with file rejections (e.g. exceeding maxSize or invalid type). |
| accept | Record<string, string[]> | - | Accepted file types using MIME type keys and extension arrays. E.g. { "image/*": [".png", ".jpg"] }. |
| maxFiles | number | 5 | Maximum number of files that can be uploaded. The drop area hides when the limit is reached. |
| maxSize | number | 10485760 | Maximum file size in bytes (default 10 MB). Files exceeding this are rejected. |
| minSize | number | - | Minimum file size in bytes. |
| disabled | boolean | false | Whether the dropzone is disabled. |
| isInvalid | boolean | false | Whether the dropzone is in an error state. |
| errorMessage | string | - | Error message displayed by DropzoneError when isInvalid is true. |
| children | React.ReactNode | <DropzoneArea /> + <DropzonePreviews /> + <DropzoneError /> | Compound children. Defaults to DropzoneArea, DropzonePreviews, and DropzoneError when omitted. |
| className | string | - | Additional CSS classes for the root container. |
DropzoneArea Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | <DropzoneIcon /> + <DropzoneHeading /> + <DropzoneDescription /> | Compound children. Defaults to DropzoneIcon, DropzoneHeading, and DropzoneDescription when omitted. |
| className | string | - | Additional CSS classes for the drop area. |
DropzoneIcon Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | <Upload /> | Custom icon content. Defaults to an Upload icon. |
| className | string | - | Additional CSS classes for the icon wrapper. |
DropzoneHeading Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | "Click to upload or drag and drop" | Heading text. Defaults to context-aware text that changes during drag events. |
| className | string | - | Additional CSS classes for the heading. |
DropzoneDescription Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | "Upload up to {maxFiles} files. Max {maxSize} each." | Description text. Defaults to auto-generated text from context. |
| className | string | - | Additional CSS classes for the description. |
DropzonePreviews Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes for the previews container. |
DropzoneError Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| message | string | - | Override the error message from context. Falls back to errorMessage from the root Dropzone. |
| className | string | - | Additional CSS classes for the error message. |
