---
title: Dropzone
description: A drop zone is an area into which one or multiple objects can be dragged and dropped.
thumbnail:
  image: /previews/components/core/drop-zone.jpeg
  video: /previews/components/core/drop-zone.mp4
links:
  - label: Aria docs
    href: https://react-spectrum.adobe.com/react-aria/DropZone.html
  - label: Aria API Reference
    href: https://react-spectrum.adobe.com/react-aria/DropZone.html#props
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/drag-and-drop/drop-zone.mdx?plain=1
---

<ComponentPreview
  name="core/drop-zone-default"
  preview={`<DropZone><UploadIcon /></DropZone>`}
/>

## Installation

<Tabs items={["CLI", "Manual"]}>
  <Tab value="CLI">
  
  ```package-install
npx dotui-cli@latest add drop-zone
```

  </Tab>
  <Tab value="manual">
  
    <Steps>
      <Step>Install the following dependencies:</Step>

    ```package-install
    react-aria-components
    ```

      <Step>Copy and paste the following code into your project.</Step>
      <ComponentSource name="core/drop-zone" />
      <Step>Update the import paths to match your project setup.</Step>
    </Steps>

  </Tab>
</Tabs>

## 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.

<ComponentPreview
  name="core/drop-zone-label"
  preview={`<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.

<ComponentPreview
  name="core/drop-zone-disabled"
  preview={`<DropZone isDisabled>
    <UploadIcon />
    <Text slot="label">Drag and drop files here</Text>
  </DropZone>`}
/>

## Examples

### File trigger

<ComponentPreview
  name="core/drop-zone-file-trigger"
  preview={`<DropZone>
    <UploadIcon />
    <Text slot="label">Drag and drop files here</Text>
    <FileTrigger>
      <Button>Select files</Button>
    </FileTrigger>
  </DropZone>`}
/>

## API Reference

| Prop               | Type                                                                                                  | Default | Description                                                                                                                 |
| ------------------ | ----------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
| `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.                 |

| Event           | Type                            | Description                                                               |
| --------------- | ------------------------------- | ------------------------------------------------------------------------- |
| `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 attribute         | Description                                                      |
| ---------------------- | ---------------------------------------------------------------- |
| `[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

| Key     | Description                  |
| ------- | ---------------------------- |
| `Tab`   | Moves focus to the dropzone. |
| `Enter` | Activates the dropzone.      |
