# Sortable

Source: https://lumeo.nativ.sh/components/sortable

# Sortable

Drag-to-reorder list with keyboard support and animation. Persistable via two-way bound Items.

## 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.

Preview Code

Basic Sortable List

Design mockups

Write tests

Review PR

Deploy to staging

Update docs

Copy Code

Preview Code

No Handle (drag entire card)

Item Alpha

Item Beta

Item Gamma

Item Delta

Copy Code

Preview Code

Rich Item Template

Fix login bug

Alice

High

Build dashboard

Bob

Medium

Write API docs

Carol

Low

Performance audit

Dave

High

Copy Code

Preview Code

Disabled

Cannot drag this

Or this one

Locked order

Copy Code

## API Reference

### SortableList<TItem>

Property

Type

Default

Description

Items

List<TItem>

\[\]

The list of items to display and reorder.

ItemsChanged

EventCallback<List<TItem>>

—

Fired with the new order after a drop. Use with `@bind-Items` for two-way binding.

ItemTemplate

RenderFragment<TItem>?

—

Template for rendering each list item. Receives the item via the `Context` attribute.

Handle

bool

true

Show a grip-vertical handle icon. When false, the whole card is the drag target.

Disabled

bool

false

Disables all drag interactions and hides the handle icon.

Group

string?

—

Group name — items can be dragged between multiple `SortableList` instances that share the same group.

Class

string?

—

Additional CSS classes merged onto the root container.

## Related Components

-   [Kanban](/components/kanban) — Multi-column drag-and-drop board for workflow visualization.
-   [List](/components/list) — Static ordered or unordered list display.
-   [TreeView](/components/tree-view) — Hierarchical node tree with expand/collapse.