Installation
Usage
"use client"
import { SortableList } from "@/components/sortable-list"
export function Priorities() {
return (
<SortableList
label="Sprint priorities"
numbered
items={[
{ id: "auth", label: "Passkey sign-in" },
{ id: "billing", label: "Annual billing" },
{ id: "search", label: "Faster search" },
]}
onReorder={(items) => console.log(items.map((item) => item.id))}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; description?: ReactNode }[] | — | The starting order. Change the list's key to reset it. |
| onReorder | (items) => void | — | Called with the new order after a drop. |
| label | string | — | Accessible name for the list. |
| numbered | boolean | false | Show each item's position. |
| renderItem | (item, index) => ReactNode | — | Custom row content; the handle is added for you. |
| handle | boolean | true | Drag by the handle, or false to drag the whole row (the handle stays for keyboard users). |
| --sortable-accent | CSS variable | --ring | Border of the item being moved. |
Accessibility
- Keyboard: focus a handle, Space or Enter to pick up, ↑/↓ (Home/End) to move, Space or Enter to drop, Escape to put it back.
- Pick-ups, moves and drops are announced in a live region, e.g. "Annual billing, position 3 of 5".
- Handles are labelled "Reorder <item>" and described with the instructions.
- Rows move instantly under prefers-reduced-motion.
- Keyboard moves are instant; dragging lifts and leans only without prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.