ReorderableList

A vertical list people reorder by dragging a handle or with the arrow keys, with rows that lift, glide and renumber as they move.

When to use

• Ordering a short list where order is the point: milestones, priorities, pipeline stages.
• When each row has a title and an optional one-line detail.
• Use CardStack for one-at-a-time triage, and SortableDataTable when order should come from a column rather than from hand placement.

Usage

import { ReorderableList } from "@/components/iris/reorderable-list/reorderable-list";

const [items, setItems] = useState([
  { id: "legal", title: "Legal pages", detail: "Reached" },
  { id: "pricing", title: "Pricing page", detail: "In progress, due 4 Nov 2026" },
  { id: "notes", title: "Launch notes" },
]);
h(ReorderableList, { items, onReorder: setItems, label: "Public launch milestones" });

Props

Prop	Type	Default	Description
items	{ id: string; title: string; detail?: string }[]	— (required)	Rows in their current order. Always controlled.
onReorder	(items) => void	— (required)	Receives the full reordered array, during drag and after each keyboard move.
label	string	"Reorder items"	Accessible name of the list.

Notes

• Only the grip handle starts a drag, so text in the row stays selectable. The handle is a button labelled "Reorder {title}. Position n of N. Use arrow keys."; Up/Down move the row one place and focus stays on the moved handle.
• Each row shows its position number, which rolls in the direction it travelled.
• Under reduced motion the row still follows the pointer but drops into place without gliding.