## Sortable List (S—104)

Drag rows by their handle to reorder; neighbours slide out of the way and keyboard users can lift and move rows.

- URL: https://sundaeui.dev/components/sortable-list
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/sortable-list.json`
- Tags: reorder, dnd, list, sortable, priority, drag-and-drop

Grab the handle and the row lifts with a soft shadow while the others glide to open a gap. Drop and it settles into place.
From the keyboard, Space lifts a row, arrows move it, Space drops and Escape cancels. Each move is announced.

### Usage

```tsx
import { SortableList } from '@/components/sundae/sortable-list'

<SortableList />
```

### Props

- `items` (`{ id: string; label: string; meta?: string }[]`, required): Rows.
- `onReorder` (`(ids: string[]) => void`): Called after a drop.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Priorities, playlists, navigation menus, form builders.

### When not to use

- Long lists across scroll containers: use a full DnD library.

### Accessibility

- Handles are buttons with instructions in aria-describedby.
- Lift, move and drop are announced through a live region; Escape restores the original position.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Space: Lift / drop
- ↑ / ↓: Move lifted row
- Esc: Cancel