---
name: DropZone
package: '@wordpress/components'
category: Forms
status: stable
canonical: 'https://system.automattic.design/components/dropzone/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-dropzone--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/drop-zone'
figma: 'https://www.figma.com/design/jMgzw8IhsMC4gpMbMko4lv/WPDS--Gutenberg-22.3-?node-id=16530-40169'
---

# DropZone

`DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.

```tsx
import { DropZone } from '@wordpress/components';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | — | A CSS `class` to give to the wrapper element. |
| `icon` | `Element` | `upload` | An icon to be shown within the drop zone area. |
| `label` | `string` | `\`__( 'Drop files to upload' )\`` | A string to be shown within the drop zone area. |
| `onDrop` | `(event: DragEvent) => void` | — | The function is generic drop handler called if the `onFilesDrop` or `onHTMLDrop` are not called. It receives the drop `event` object as an argument. |
| `onFilesDrop` | `(files: File[]) => void` | — | The function is called when dropping a file into the `DropZone`. It receives an array of dropped files as an argument. |
| `onHTMLDrop` | `(html: string) => void` | — | The function is called when dropping HTML into the `DropZone`. It receives the HTML being dropped as an argument. |
| `isEligible` | `(dataTransfer: DataTransfer) => boolean` | `() => true` | A function to determine if the drop zone is eligible to handle the drop data transfer items. |


## Examples

### Default

```tsx
const Default = ( props ) => {
	return (
		<div
			style={ {
				background: 'lightgray',
				padding: 32,
				position: 'relative',
			} }
		>
			Drop something here
			<DropZone { ...props } />
		</div>
	);
};
```