Dropzone
A controlled drag-and-drop upload zone with empty/processing visual states, validation, and disabled mode.
Dropzone
Interactive — drag, drop, replace
The component is fully controlled — the parent owns the file + processing state. onFile fires after type / size validation passes; onError reports rejections (wrong type or too large). The drop highlight uses a counter internally so the visual stays stable as the cursor moves across child elements during a drag.
Drag & drop a CSV of listings
or
Visual states — empty · processing
Two of the three layouts side-by-side (the third — selected — appears in the Interactive card above after a file is dropped). Drives the spinner from your upload mutation by toggling processing.
Empty state
or
Processing…
Validation & disabled
Pass accept (enforced on drop and picker) and maxSize (in bytes) to gate uploads. Rejections fire onError({ reason, file, message }) — wire it to a toast. disabled locks the zone entirely.
CSV or TSV, max 200 KB
or
disabled
Drop area is locked
or