1. Components
  2. Drag and drop
  3. Dropzone

Dropzone

A drop zone is an area into which one or multiple objects can be dragged and dropped.

Aria docsAria API ReferenceReport an issueEdit this page
<DropZone><UploadIcon /></DropZone>

Installation

npx dotui-cli@latest add drop-zone

Options

Label

A visual label can be provided for the DropZone using the <Text slot="label"> component, or a hidden label using aria-label prop.

Drag and drop files here
<DropZone aria-label="drag and drop files here">
  <UploadIcon />
</DropZone>
<DropZone>
  <UploadIcon />
  <DropZoneLabel>Drag and drop files here</DropZoneLabel>
</DropZone>

Disabled

Use the isDisabled prop to disable the drop zone.

Drag and drop files here
<DropZone isDisabled>
  <UploadIcon />
  <Text slot="label">Drag and drop files here</Text>
</DropZone>

Examples

File trigger

Drag and drop files here
<DropZone>
  <UploadIcon />
  <Text slot="label">Drag and drop files here</Text>
  <FileTrigger>
    <Button>Select files</Button>
  </FileTrigger>
</DropZone>

API Reference

PropTypeDefaultDescription
getDropOperation
(types: DragTypes, allowedOperations: DropOperation[]) => DropOperation
-
A function returning the drop operation to be performed when items matching the given types are dropped on the drop target.
isDisabled
boolean
-
Whether the drop target is disabled. If true, the drop target will not accept any drops.
children
ReactNode | (values: DropZoneRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode
-
The children of the component. A function may be provided to alter the children based on component state.
className
string
-
The CSS className for the element.
style
CSSProperties | (values: DropZoneRenderProps & {defaultStyle: CSSProperties}) => CSSProperties
-
The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onDropEnter
(e: DropEnterEvent) => void
Handler that is called when a valid drag enters the drop target.
onDropMove
(e: DropMoveEvent) => void
Handler that is called when a valid drag is moved within the drop target.
onDropExit
(e: DropExitEvent) => void
Handler that is called when a valid drag exits the drop target.
onDrop
(e: DropEvent) => void
Handler that is called when a valid drag is dropped on the drop target.
onHoverStart
(e: HoverEvent) => void
Handler that is called when a hover interaction starts.
onHoverEnd
(e: HoverEvent) => void
Handler that is called when a hover interaction ends.
onHoverChange
(isHovering: boolean) => void
Handler that is called when the hover state changes.
Data attributeDescription
[data-hovered]
Whether the dropzone is currently hovered with a mouse.
[data-focused]
Whether the dropzone is focused, either via a mouse or keyboard.
[data-focus-visible]
Whether the dropzone is keyboard focused.
[data-drop-target]
Whether the dropzone is the drop target.
[data-disabled]
Whether the dropzone is disabled.

Accessibilty

Keyboard interactions

KeyDescription
Tab
Moves focus to the dropzone.
Enter
Activates the dropzone.

Last updated on 10/11/2024

Color PickerAlert