Sortable
Drag-to-reorder list with keyboard support and animation. Persistable via two-way bound Items.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Sortable />
Tested
Tier 4 · E2E + a11y
all components → Render Behavior A11y Keyboard Scale E2E
27 tests across 6 files (no render-contract smoke — covered by its own tests). Auto-generated from the test suite.
When to Use
- Reorderable lists where users need to prioritize or rank items.
- Playlist or queue management with drag-and-drop ordering.
- Form field ordering in builder or configuration interfaces.
- Any list where the sequence matters and users should control the order.
Design mockups
Write tests
Review PR
Deploy to staging
Update docs
Item Alpha
Item Beta
Item Gamma
Item Delta
Fix login bug
Alice
High
Build dashboard
Bob
Medium
Write API docs
Carol
Low
Performance audit
Dave
High
Cannot drag this
Or this one
Locked order
API Reference
SortableList<TItem>
| Prop | Type | Default | Description |
|---|---|---|---|
| Items | List<TItem> | [] | The items rendered as reorderable rows. Two-way bindable via ItemsChanged, which also fires after a drag/touch/keyboard reorder. |
| ItemTemplate | RenderFragment<TItem>? | — | Render fragment for each item's content, receiving the item. |
| Handle | bool | true | Restricts dragging to a dedicated grip handle on each row instead of the whole row. Default true. |
| Disabled | bool | false | Disables drag, touch, and keyboard reordering, rendering the list as static. |
| Group | string? | — | Optional shared-group name. When set, it is emitted on the container as a data-sortable-group attribute so groups are observable in the DOM. NOTE: cross-list transfer between lists that share a group is NOT yet implemented — the attribute is reserved for that future capability and current behaviour is intra-list reordering only. |
| Key | Func<TItem, object>? | — | Optional selector that returns a stable, unique key for each item. Providing this ensures Blazor's diffing engine tracks items by identity rather than index — critical for drag-reorder to map DOM state correctly. If omitted, the item reference itself is used as the key. |
| Class | string? | — | Additional CSS classes merged onto the list container. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the list container. |
Events
| ItemsChanged | EventCallback<List<TItem>> | Raised with the freshly-reordered list whenever an item is moved, via drag, touch, or keyboard. |
| OnReorder | EventCallback<SortableMoved> | Raised in addition to ItemsChanged whenever an item is reordered (via drag, touch, or keyboard), carrying the moved item along with its old and new indices. Does not change the ItemsChanged contract. |