Pattern Status
|
Status |
Needs review |
|---|---|
|
Owner |
Product Design Team |
|
Last Updated |
27.11.2025 |
Overview
Drag-and-Drop allows users to click, drag, and reposition elements within an interface, supporting intuitive workflows such as sorting, grouping, or moving items across zones.
This pattern describes the ideal Drag-and-Drop experience based on best practices for interaction design and accessibility. In production, we use the DnDKit framework to enable these behaviors, and we are aware that some ideal interactions are limited by the library. We will continue refining this guidance as we collect real product examples.
When to use
- Categorizing content: Grouping or organizing items into categories.
- Reordering items: Changing the sequence in lists.
- Bulk selection: Dragging multiple items together to another location.
When not to use
- Small screens: On mobile or compact screens, drag-and-drop can be challenging to use accurately.
- Simple selections: Consider using Buttons, Dropdown Buttons or Split Buttons whenever possible.
- Precision placement: When items need to be dropped in an exact spot, the Drag-and-Drop can lack precision.
- Dropping into actions: Don’t drop elements into action components like Buttons.
Drop the elements into blocks.
Do not drop the element into a isolated element neither actions.
Elements
The Drag-and-Drop pattern consists of mandatory and optional elements depending on the use case.
|
Element |
Description |
|
|---|---|---|
|
Icon Button Ghost |
Always visible within the slot container. Serves as the trigger for dragging. |
|
|
Container |
Default: Slot content itself, without extra elements. |
|
|
|
Dragging: Highlights content being dragged. |
|
|
|
Drop Area: Target container where elements can be dropped. For forms, use the Dropzone component. |
|
|
Drop Indicator |
Shows the placement of the dragged item. Use (1) Vertical for horizontal layouts, and (2) Horizontal for vertical layouts. |
|
|
Bulk Drag Button |
Displays when multiple items are being dragged at once. |
|
Behavior
Reordering items
Selecting and holding an item to move or rearrange it within a list.
- Icon Button Ghost: Initiates the drag action.
- Container: Highlights the slot content for placement.
- Drop Indicator: Shows the target location.
Dropping items
Moving items from one location to another. If placement is invalid, the system returns the item to its original position.
- Bulk Drag / Single Item: Displays the number of items being dragged for bulk actions, or shows the single item being moved. Provides visual feedback during the drag-and-drop action.
- Drop Area: Receives the dragged items and provides visual feedback.
Interactions
Feedback
|
Variant |
Description |
|
|---|---|---|
|
Dialog |
Confirms critical actions, preventing mistakes. |
|
|
Alert |
Provides feedback and an option to undo, reinforcing user control. |
|
States
Keyboard interactions
Enabling keyboard drag-and-drop is essential for accessibility. It improves the user experience and ensures that everyone can interact with the pattern successfully.
Dropping items
This action cannot be performed by default using the keyboard. To enable it, an Icon Button must be included, allowing users to choose the desired drop zone through an overflow panel.
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button |
|
Space or Enter |
Opens the Overflow Menu if its droppable. |
|
Up or Down arrows |
Moves between the Overflow Menu List Items to select where the element will be grouped or placed. |
|
Space or Enter |
Selects the List Item and triggers the action. |
|
Escape |
Closes the Overflow Menu. |
Reordering items
When the draggable element is focused, press Enter to activate drag mode, use ↓/↑ to sort, and press Enter to finish or Esc to cancel.
|
Key |
Interactions |
|---|---|
|
Tab |
Sets focus on the Button |
|
Space or Enter |
Set focus to the whole sortable element. |
|
Up or Down arrows |
Moves between the list element in order to sort it. |
|
Space or Enter |
Confirm the new element place. |
|
Escape |
Cancel the sortable action. |
Best Practices
- Preserve visual consistency and clearly show all states with images.
- Use drag-and-drop when it improves efficiency over simpler selection mechanisms.
- Avoid overloading small screens with drag-and-drop interactions.
- Bulk dragging should provide clear visual feedback.
- Ensure feedback is always given after drops (via Alert or Dialogue).
Accessibility Considerations
- Enable keyboard interaction for drag-and-drop.
- Provide clear visual indicators for drag, drop, and sorting states.
- Use aria attributes for interactive elements to communicate their state.
- Avoid relying solely on mouse or hover-based interactions.