Loading navigation…
User
API and Development
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.
| Name | Default | Description |
|---|---|---|
label | "drop target" | The label of the drop target, gets set as aria-label on the drop target. |
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. |
Use for simple drag-and-drop interactions with visual feedback for drag states.
Use for drop targets that require validation feedback and error states.
Combine drag-and-drop with click interaction for better usability.
Use for drop targets that should be temporarily unavailable.
Use for drop targets that need additional context or instructions.