Dropzone

A file-upload area that accepts files two ways: through the native file input (click or keyboard) and by drag-and-drop. Dragging files over the zone highlights it; dropping them — or choosing them through the input — lists the file names and announces how many were selected in a live region.

Axe
Focus

Preview

Drag files here, or click to choose

No files selected

Installation

npx shadcn@latest add https://ui.publictheta.com/r/dropzone.json

Conformance

Verified against the @publictheta/ui-spec dropzone specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

Axe — No WCAG 2 A/AA axe-core violations
Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)

See the full conformance matrix across all components.