Sortable List
ProA reorderable list where items can be dragged to new positions or reordered via keyboard. Each item displays a drag handle, content, and optional actions. Announces position changes to screen readers via a live region. Essential for priority lists, kanban columns, and custom sort interfaces.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Sortable list with drag handles and smooth reorder animations. | Use for priority lists, playlist ordering, or any user-defined sequence. |
| With Handles |
Usage Guidelines
Provide a visible drag handle — do not make the entire row the drag target.
Rely on drag-and-drop as the only reordering method — keyboard support is required.
Announce reorder results to screen readers: "Item moved to position 3 of 5".
Allow reordering of items that have a fixed, system-defined order.
Support keyboard reordering as the primary accessible interaction.
Use sortable lists for fewer than 3 items — manual move-up/move-down buttons are simpler.
Code
Design Tokens
Accessibility
- Each item uses aria-grabbed to indicate grab state: "false" at rest, "true" when grabbed.
- Use aria-dropeffect="move" on potential drop targets during a drag operation.
- A live region (aria-live="assertive") announces position changes: "Task moved to position 2 of 5".
- Drag handles must be a <button> with aria-label="Reorder" and aria-roledescription="drag handle".
- Keyboard reordering must be fully functional without any pointer input.