Examples
Each example below stays fully headless: the primitive handles drag events and validation while the owner authors every visual detail. Drag files from your file manager onto a zone to try it.
Basic drop zone
A single-file drop zone that emits filesSelected and reflects drag state via data-dragging.
Basic drop zone (Plain CSS)
Drop a single file here.
Drag state: idle
Multiple and accept
Allow multiple files but only accept images and PDFs; everything else is rejected by type.
Multiple and accept (Plain CSS)
Drop images or PDFs (multiple allowed).
Drag state: idle
Max size validation
Reject files larger than 1 MB with a reason and message, while still accepting valid files.
Max size validation (Plain CSS)
Files larger than 1 MB are rejected.
Drag state: idle
Disabled drop zone
A disabled zone is fully passive: it ignores drops, emits nothing, and reflects data-disabled.
Disabled drop zone (Plain CSS)
This drop zone is disabled and ignores drops.
Drag state: idle