DropZone

DropZone is a styled drag-and-drop target for files. It handles the drag-over, focus, and drop states, and renders whatever prompt you place inside it as the call to action.

Import

import { DropZone } from '@proyecto-viviana/solid-spectrum';

Basic

Place a prompt inside the zone and handle onDrop. The zone reflects hover and drop-target states automatically.

Drop files hereor drag items over this area

Waiting for a drop…

<DropZone
  aria-label="Upload files"
  onDrop={() => setStatus("Files dropped")}
>
  <Text styles={typeRoles.label}>Drop files here</Text>
  <Text styles={typeRoles.meta}>or drag items over this area</Text>
</DropZone>

Sizes

The size prop sets the banner scale shown while a filled zone is being replaced.

Size S
Size M
Size L

<DropZone size="S">…</DropZone>
<DropZone size="M">…</DropZone>
<DropZone size="L">…</DropZone>

Props

Prop	Type	Default	Description
`onDrop`	(e: DropEvent) => void	—	Handler called when items are dropped on the zone
`size`	'S' \| 'M' \| 'L'	`'M'`	Scale of the replace banner shown over a filled zone
`isFilled`	boolean	`false`	Whether the zone already holds content, enabling the replace banner
`replaceMessage`	string	—	Text shown on the replace banner while dragging over a filled zone
`aria-label`	string	—	Accessible name for the drop target
`children`	JSX.Element	—	The prompt content rendered inside the zone

Accessibility

The zone is focusable and exposes a button-like drop affordance to assistive tech
It needs an aria-label naming what is being uploaded
Keyboard users can trigger the drop affordance to open a file picker
Drag-over, focus-visible, and drop-target states are reflected in the render props
The styled S2 DropZone omits isDisabled; disable at the headless layer if needed