Dropzone component
Figma Component
Dropzone component provides either a file drag & drop zone or a native File selection dialog.
Drag & drop or select file to upload
Only supports PDF files • Max size: 20MB
Properties
| Name | Description | Default |
|---|---|---|
| description | Dropzone explanatory description | - |
| disabled | Dropzone disabled state | - |
| dropTitle | Dropzone content when a file is moved over the drop zone | - |
| dropzoneConfig | Additional dropzone configuration options from react-dropzone Excludes onDrop, disabled, and multiple as these are separate props | - |
| error | Error text displayed as an overlay | - |
| multiple | Allow drag 'n' drop (or selection from the file dialog) of multiple files Defaults to true | - |
| onDrop required | File drop callback that returns an array of the traget File objects | - |
| title | Dropzone title | - |
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
Disabled State
Drag & drop or select file to upload
Only supports PDF files • Max size: 20MB
Single File
Drag & drop or select file to upload
Only supports PDF files • Max size: 20MB
Drop Zone Overlay
Try dragging a file over this area to show overlay.