Studio
2

Reorder List

Separate handles and content

Drag the handle or focus it and press Space to pick up a row. Content remains selectable and may contain links or controls. The default data form uses Item, Handle, and Content. Supply row to rearrange those same parts; every row needs an Item with its stable id and accessible label.

import * as ReorderList from '@mielui/svelte/components/reorder-list';

<ReorderList.Root bind:items getId={(item) => item.id} getLabel={(item) => item.name} label="Priority">
  {#snippet row(item)}
    <ReorderList.Item id={item.id} label={item.name}>
      <ReorderList.Content>{item.name}</ReorderList.Content>
      <ReorderList.Handle />
    </ReorderList.Item>
  {/snippet}
</ReorderList.Root>

Installation

pnpm dlx @mielui/svelte add reorder-list

Usage

Bind the controlled array for live movement. Use onCommit for persistence so a drag writes once rather than on every crossing. Drag the handle with a mouse, pen, or touch. Row content remains interactive; a grabbed row keeps its raised surface and primary border until dropped.

External changes to list membership or order cancel the active gesture. Cancel restores the original order of items that still exist. It preserves updated item data and keeps items added during the gesture.

<ReorderList bind:items getId={(item) => item.id} getLabel={(item) => item.name} label="Pipeline steps">
  {#snippet children(item)}
    <span>{item.name}</span>
  {/snippet}
</ReorderList>

Handle after content

Persist the committed order

Use stable IDs for records and save the final array from onCommit. Keyboard users can lift an item, move it, and cancel without saving a partial order. Keep unrelated links and buttons outside the drag handle, as shown in the custom composition.

API reference

ReorderList.Content

ReorderList.Handle

ReorderList.Item

Prop Type Default
id Required string —
label Required string —

ReorderList

Reorders controlled items with pointer or keyboard input.

Prop Type Default
items Required Bindable unknown[] —
getId Required (item: unknown) => string —
getLabel Required (item: unknown) => string —
children Snippet<[unknown]> | undefined —
row Snippet<[unknown]> | undefined —
label Required string —
disabled boolean | undefined false
onReorder ((items: unknown[]) => void) | undefined —
onCommit ((items: unknown[]) => void) | undefined —
class (string & (ClassValue | null)) | undefined —