Skip to content
MIZU.

ReorderList

Rearrange a sequence while each item keeps its identity.

Live — this one is real

Release order

  • Verify typesCatch incompatible props
  • Run checksExercise behavior
  • Review the browserConfirm the real interaction

Drag a handle, use its arrow keys, or use the move buttons.

Usage

import { useState } from "react";
import { ReorderList } from "mizu-ui";

export function Example() {
  const [items, setItems] = useState([
    { id: "a", label: "Verify types", description: "Catch incompatible props" },
    { id: "b", label: "Run checks", description: "Exercise behavior" },
    {
      id: "c",
      label: "Review the browser",
      description: "Confirm the real interaction",
    },
  ]);
  return (
    <ReorderList label="Release order" items={items} onReorder={setItems} />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect interaction/ReorderList.tsx

Source is included in the npm package under src/interaction/ReorderList.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
itemsReorderEntry[]—Stable id, label and optional description.
onReorder(items: ReorderEntry[]) => void—Persist the new full ordering.
labelstring—Sequence name.

Accessibility

A real ordered sequence. Handles support pointer dragging and up/down keys; separate move buttons offer a touch-friendly alternative. Boundaries disable invalid moves.

Motion

Motion layout retains identity; reduced motion uses zero-duration settling.

Works alongside

ComboboxMultiSelectInlineEditRangeSelector