Sortable
Sortable Primitive
Headless drag-and-drop sortable primitive with pointer, touch, and keyboard support.
Vertical List — Drag Handle
Each item exposes a separate grip handle. Drag is constrained to the handle only.
Task: Design wireframes
1
Task: Write unit tests
2
Task: Implement API
3
Task: Code review
4
Task: Deploy to staging
5
Vertical List — Full-Item Drag
The entire item surface is the drag handle via AsHandle.
Alpha
drag me
Beta
drag me
Gamma
drag me
Delta
drag me
Horizontal List
Set Orientation='Horizontal' for row-based reordering.
One
Two
Three
Four
Five
Custom Overlay Content
Provide a render fragment to SortableOverlayPrimitive for a fully custom drag ghost.
Backlog
In Progress
Review
Done
Keyboard Navigation
Focus a handle, then press Space/Enter to grab, Arrow keys to move, Space/Enter to drop, Escape to cancel.
Space / Enter
grab / drop
↑ ↓
move
Esc
cancel
First item
Second item
Third item
SortablePrimitive<TItem> API Reference
Parameters for the SortablePrimitive component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Items | IList<TItem> | — | The list of items to sort. Required. |
| GetItemId | Func<TItem, string> | — | Extracts a unique string ID from each item. Required. |
| Orientation | SortableOrientation | Vertical | Drag axis: Vertical, Horizontal, Grid, or Mixed. |
| OnItemsReordered | EventCallback<IList<TItem>> | — | Fired after a successful drop that changed the item order. Receives the new ordered list. |
| OnDragStart | EventCallback<string> | — | Fired when a drag begins. Receives the active item ID. |
| OnDragEnd | EventCallback<SortableDragEndArgs> | — | Fired when a drag ends. Carries ActiveId, OverId, FromIndex, ToIndex, and Moved. |
| OnDragCancel | EventCallback | — | Fired when a drag is cancelled via Escape or pointer cancel. |
| ChildContent | RenderFragment? | — | Child content: SortableContentPrimitive, SortableOverlayPrimitive, etc. |
SortableContentPrimitive API Reference
Parameters for the SortableContentPrimitive component.
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string? | — | HTML class attribute — apply flex layout, gap, and direction here. |
| ChildContent | RenderFragment? | — | SortableItemPrimitive children to sort. |
SortableItemPrimitive API Reference
Parameters for the SortableItemPrimitive component.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | string | — | Unique identifier for this item. Must match GetItemId output. Required. |
| AsHandle | bool | false | When true the entire item surface acts as the drag handle. |
| class | string? | — | HTML class attribute — apply background, border, padding, and layout here. |
| ChildContent | RenderFragment? | — | Content rendered inside the item wrapper. |
SortableItemHandlePrimitive API Reference
Parameters for the SortableItemHandlePrimitive component.
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string? | — | HTML class attribute — apply cursor, color, and focus styles here. |
| ChildContent | RenderFragment? | — | Custom handle content. Renders a six-dot grip icon by default. |
SortableOverlayPrimitive API Reference
Parameters for the SortableOverlayPrimitive component.
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string? | — | HTML class attribute — apply shadow, opacity, and transition here. |
| ChildContent | RenderFragment<string>? | — | Custom ghost content. Context is the active item ID. When null the sensor auto-clones the dragged element. |