Drop Target

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

DropTarget is used to create interactive areas that can receive dragged content, providing visual feedback during drag operations and handling drop events with proper accessibility support. It provides a flexible drag-and-drop interface built on the Interactable component, supporting visual feedback states, validation, and comprehensive accessibility features. It handles drag events, manages visual states, and integrates seamlessly with form validation systems.

Props

Name	Default	Description
`label`	`"drop target"`	The label of the drop target, gets set as aria-label on the drop target. `LocalizedMessage` from `formatMessage`.
`describedBy`		The ids of the elements that are described by the drop target, gets set as aria-describedby on the drop target.
`disabled`	`false`	Whether the drop target is disabled and cannot receive drops.
`invalid`	`false`	Whether the drop target is in an invalid state for validation feedback.
`errorMessageId`		The id of the element that is the error message for the drop target.
`onDrop`	`required`	The callback that is called when the drop target receives a drop event.
`onClick`		The callback that is called when the drop target is clicked.
`children`	`required`	The content to display inside the drop target area.

Basic Drop Target

Use for simple drag-and-drop interactions with visual feedback for drag states.

With Validation

Use for drop targets that require validation feedback and error states.

Click to Upload

Combine drag-and-drop with click interaction for better usability.

Disabled State

Use for drop targets that should be temporarily unavailable.

With Descriptions

Use for drop targets that need additional context or instructions.

Drop Target / Usage

Drop Target / Accessibility

On this page

Drop Target

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Props

Name	Default	Description
`label`	`"drop target"`	The label of the drop target, gets set as aria-label on the drop target. `LocalizedMessage` from `formatMessage`.
`describedBy`		The ids of the elements that are described by the drop target, gets set as aria-describedby on the drop target.
`disabled`	`false`	Whether the drop target is disabled and cannot receive drops.
`invalid`	`false`	Whether the drop target is in an invalid state for validation feedback.
`errorMessageId`		The id of the element that is the error message for the drop target.
`onDrop`	`required`	The callback that is called when the drop target receives a drop event.
`onClick`		The callback that is called when the drop target is clicked.
`children`	`required`	The content to display inside the drop target area.