Dropzone
ProA file upload area that supports both click-to-browse and drag-and-drop interactions. Displays an upload icon, instructional text, and accepted file type hints. Visually responds to drag-over events and provides progress feedback during upload.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard dropzone with dashed border, upload icon, and instructional text. | Use for general file upload fields in forms and settings. |
| Compact | Single-line dropzone with inline text for space-constrained contexts. | Use within table cells, inline forms, or areas where vertical space is limited. |
| With Preview | Dropzone that displays thumbnails or file names of uploaded files. | Use for image uploads, document attachments, or any upload that benefits from visual confirmation. |
Usage Guidelines
Do
Display accepted file types and size limits clearly within the dropzone.
Don't
Accept all file types without validation — always restrict to expected formats.
Do
Provide both drag-and-drop and click-to-browse as upload methods.
Don't
Hide the click-to-browse fallback — drag-and-drop is not universally available.
Do
Show upload progress with a progress bar and allow cancellation for large files.
Don't
Remove uploaded files without confirmation.
Do
Validate files immediately and surface errors inline.
Don't
Code
Design Tokens
Accessibility
- Use role="button" on the dropzone with tabindex="0" so it is keyboard-activatable.
- The hidden file input is triggered programmatically on click or Enter/Space.
- Announce upload progress, success, and errors via an aria-live="polite" region.
- Drag-and-drop is not accessible to keyboard or screen reader users — the click-to-browse fallback is essential.
- Error messages for rejected files must be associated with the dropzone using aria-describedby.