Drop Zone

Usage

DropZone is a target you drop files onto and a button you pick them with, and the two paths end in the same place: a list of files under the zone, each with its name, its size, and a remove button.

Both halves are React Aria's. DropZone owns the drag session — the native pointer drag and the keyboard / screen-reader drag mode it registers with React Aria's own drag manager — and FileTrigger owns the file picker. There is no drag handling in this component: no dragover listener, no dataTransfer, and no counter to work around dragleave firing on every child element.

Anatomy

DropZone is a single component with props, not a set of parts. A drop zone is one arrangement — a glyph, a line of copy, a trigger, and a list underneath — and unlike a settings row it never grows a chip or a second column.

import {DropZone} from "@blakeui/pro-react";

<DropZone
  accept={["image/png"]}
  description="PNG only."
  label="Drop an image"
  maxSize={256 * 1024}
  multiple
  onChange={(files) => console.log(files)}
/>;

The zone holds its own list. onChange reports the whole list every time it changes — a drop, a pick, or a removal — so state outside always matches what the zone is showing.

With File List

Sizes

Disabled

Accepted Types

Max Size Limit

Multiple Files

Custom Icon

Custom Triggers

CSS Classes

Base Classes

• .drop-zone — The root, and a plain <div> wrapping the drop target, the error message and the file list. display: flex in a column with a 12px gap, full width, min-width: 0. It declares the three variables the size modifier retunes — --drop-zone-pad, --drop-zone-glyph, --drop-zone-gap — so every descendant reads one variable instead of matching a modifier of its own, plus two colour variables described below. Carries data-invalid="true" while a rejection is showing.
• --drop-zone-stroke — The idle stroke, and deliberately not the bare --border a card gets away with. A card's stroke only has to hint at an edge a fill already draws; here the dashed stroke is the affordance, and --border measures 1.35:1 against the surface in light and 1.21:1 in dark — invisible at exactly the moment the component has to say "target". Mixed 30/70 toward --muted, which is restated per theme, so the step holds in both: measured 3.17:1 light and 3.99:1 dark, over the 3:1 floor for a non-text UI component either way.
• --drop-zone-invalid-fill — The error tint, --danger-soft mixed back 55% toward the surface. At full strength it washes the whole zone pink, which is a louder alarm than a one-line validation message earns — the stroke and the message already carry it.
• .drop-zone--md — The default size. 32px surface padding, a 40px glyph box, an 8px stack gap.
• .drop-zone--sm — 20px padding, a 32px glyph box, a 6px gap, and a 0.8125rem label. The file rows keep their 44px floor either way; a row with a button in it is a touch target at both sizes.

Element Classes

• .drop-zone__zone — React Aria's DropZone. It paints nothing: it carries the state attributes — data-drop-target, data-hovered, data-focused, data-focus-visible, data-disabled — and the visually hidden <button> that React Aria's keyboard drag mode focuses. position: relative, display: block.
• .drop-zone__surface — The bordered box a reader sees, and the element that animates. 1px dashed var(--drop-zone-stroke), 24px radius, var(--surface) fill, a centred column, and no elevation. The dashed stroke is the deliberate exception to the card-family bordered-flat rule — it is the convention that says "target, not card" — and the rest of the rule still holds: a stroke and a fill, never a shadow. Its own transition is background-color over 180ms, colour only.
• .drop-zone__icon — The glyph in a rounded var(--default) tile, sized from --drop-zone-glyph. Whatever icon renders is sized to 20px (16px at sm) by a .drop-zone__icon svg rule, so a swapped-in icon matches the built-in one without being told its size. The element is not rendered at all when icon is null.
• .drop-zone__label — The headline. 0.875rem / 1.25rem, font-weight: 500, color: var(--foreground). Rendered as React Aria's Text slot="label", so its text becomes part of the zone's accessible name without a second aria-label.
• .drop-zone__description — Supporting copy. 0.75rem / 1rem, color: var(--muted), text-wrap: pretty.
• .drop-zone__trigger — The built-in browse button, an ordinary secondary Button inside the FileTrigger, with 8px of top margin. A replacement supplied through trigger does not carry this class: it is yours to style, and inheriting the built-in button's margin would be a surprise.
• .drop-zone__status — A clipped role="status" region, not display: none, because the point is that it stays in the accessibility tree. It is the only place the drag state is put into words: React Aria reports isDropTarget and leaves the wording to the component.
• .drop-zone__error — The rejection message, 0.75rem in var(--danger-soft-foreground). Deliberately not the raw --danger, which is declared once and never restated for dark, so it is substituted at the document root and fails against a dark surface.
• .drop-zone__list — The file list, a real <ul> with its list styling removed and an 8px gap.
• .drop-zone__file — One file's row. 1px solid var(--border) over var(--surface), 16px radius, and a 44px minimum height — the row height this codebase settled on for the Cell family.
• .drop-zone__file-icon, .drop-zone__file-text, .drop-zone__file-name, .drop-zone__file-size — The row's parts. The name truncates with an ellipsis rather than wrapping the row to two lines; the min-width: 0 on the text column is what lets it, since a flex item otherwise refuses to shrink below its content. The size is tabular-nums, so a column of them stays aligned.
• .drop-zone__file-remove — The remove button, pushed to the end with margin-inline-start: auto rather than justify-content: space-between on the row, so it stays at the end if the row grows a third child.

Interactive States

• Drag over — .drop-zone__zone[data-drop-target] .drop-zone__surface swaps border-style to solid and the fill to var(--accent-soft). The box stops being an invitation and becomes a target.
• Focus — .drop-zone__zone[data-focus-visible] .drop-zone__surface draws outline: 2px solid var(--focus) at var(--ring-offset-width). One indicator, on the surface rather than on the visually hidden button React Aria actually focuses — that button has no box to draw around. An outline rather than a ring, so it follows the surface's border-radius.
• Error — .drop-zone[data-invalid="true"] .drop-zone__surface tints the fill to var(--drop-zone-invalid-fill), and the stroke goes to var(--danger-soft-foreground) through the animate target.
• Disabled — .drop-zone__zone[data-disabled] takes opacity: var(--disabled-opacity) and pointer-events: none, so the whole target leaves the hit path rather than only the trigger. document.elementFromPoint over a disabled zone returns the ancestor, not the surface.

Motion

Border colour and a 1.5% scale on drag-over are animated in JavaScript, by motion's m.div inside a LazyMotion with domAnimation. Border style is not animatable and stays in CSS, which is why dashed → solid is a rule and the colour is not: any border-color written in drop-zone.css is overridden the moment motion mounts.

Reduced motion drops the scale and keeps the colour change — colour is not movement, so removing it would be reduction past the point of usefulness. Because the animation is motion's rather than a CSS transition, both halves of the opt-out are read in JavaScript: useReducedMotion covers @media (prefers-reduced-motion: reduce), and a closest('[data-reduce-motion="true"]') probe covers the explicit hook, matching that selector's own reach of the element or any ancestor. A MutationObserver keeps a toolbar toggle live, and the probe runs in a layout effect so a reader whose preference is already in the served HTML never sees one un-reduced frame.

API Reference

DropZone

A single component with props. Also accepts every native <div> attribute, plus aria-label, which defaults to "File drop zone". React Aria always supplies a label on the drop target and its own fallback is the literal string "DropZone" — a component name in the accessibility tree — so this one cannot be omitted, only replaced. The zone's full accessible name is that half plus the label copy, which React Aria appends: "File drop zone Drop files here". One half says what the control is, the other what to do with it.

DropZoneError

The value handed to errorMessage when it is a function.