# Sortable List

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

# Sortable List

A drag-and-drop sortable list — reorder items by dragging. Works with any item type via a generic template.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<SortableList />

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

Preview Code

No Handle (drag entire card)

Item Alpha

Item Beta

Item Gamma

Item Delta

Preview Code

Rich Item Template

Fix login bug

Alice

High

Build dashboard

Bob

Medium

Write API docs

Carol

Low

Performance audit

Dave

High

Preview Code

Disabled

Cannot drag this

Or this one

Locked order

**Mobile (rc.49).** The drag handle is now a 44×44 px touch target so users can grab and reorder items with a finger without needing to pinch or tap precisely.

## 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 two-way binding.

ItemTemplate

RenderFragment<TItem>?

—

Template for rendering each list item.

Handle

bool

true

Show a drag handle icon on the left. When false, the entire card is draggable.

Disabled

bool

false

Disable drag-and-drop.

Group

string?

—

Group name for cross-list dragging between multiple SortableList instances.

Key

Func<TItem, object>?

—

Optional key selector for stable identity tracking across list reorders. Defaults to object identity.

## Related Components

-   [Kanban](/components/kanban) — Multi-column drag-and-drop board for workflow visualization
-   [Table](/components/table) — Tabular display when ordering is not needed
-   [Card](/components/card) — Card container for rich sortable list items