Sortable
UtilityStable
Drag-and-drop sortable list built on dnd-kit. Supports vertical, horizontal, and mixed layouts with rich screen reader announcements.
Quick Import
import { Sortable } from "@cohere-ai/waypoint-ui/sortable";Live Preview
Loading Sortable...
Props
| Name | Type | Default | Description |
|---|---|---|---|
value* | T[] | - | Array of items to sort |
onValueChange | function | - | Callback with reordered array |
onMove | function | - | Called with { activeIndex, overIndex } |
orientation | 'vertical' | 'horizontal' | 'mixed' | 'vertical' | Drag direction |
getItemValue | function | - | Required when items are objects (returns UniqueIdentifier) |
flatCursor | boolean | false | Use flat cursor instead of grab cursor |
value (SortableItem)* | UniqueIdentifier | - | Item identifier |
asHandle (SortableItem) | boolean | - | Makes entire item the drag handle |
disabled (SortableItem) | boolean | - | Prevents dragging this item |
* Required prop
Examples
Sortable List with Handle
Drag-and-drop sortable list with explicit drag handles
1 import { 2 Sortable, SortableContent, SortableItem, SortableItemHandle, 3 } from '@cohere-ai/waypoint-ui/sortable'; 4 5 <Sortable value={items} onValueChange={setItems} getItemValue={(item) => item.id}> 6 <SortableContent> 7 {items.map((item) => ( 8 <SortableItem key={item.id} value={item.id}> 9 <SortableItemHandle><GripVerticalIcon /></SortableItemHandle> 10 {item.label} 11 </SortableItem> 12 ))} 13 </SortableContent> 14 </Sortable>
Additional Resources
Found an Issue?
If you've encountered a bug or have feedback about the Sortable component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.