ReorderableList

Drag or keyboard

New12
Contacted8
Proposal sent5
Negotiation3

import { useState } from 'react';
import { Badge } from '@rookcom/monarch-react';
import { ReorderableList } from '@rookcom/monarch-react/data';

interface Stage {
  id: string;
  name: string;
  count: number;
  locked?: boolean;
}

const STAGES: Stage[] = [
  { id: 'new', name: 'New', count: 12 },
  { id: 'contacted', name: 'Contacted', count: 8 },
  { id: 'proposal', name: 'Proposal sent', count: 5 },
  { id: 'negotiation', name: 'Negotiation', count: 3 },
];

function StagesDemo() {
  const [stages, setStages] = useState(STAGES);
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <ReorderableList
        aria-label="Pipeline stages"
        items={stages}
        onReorder={setStages}
        getKey={(s) => s.id}
        getLabel={(s) => s.name}
        renderItem={(s) => (
          <span style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
            <span>{s.name}</span>
            <Badge>{s.count}</Badge>
          </span>
        )}
      />
    </div>
  );
}

<StagesDemo />

Usage examples

Move buttons and a locked item

import { useState } from 'react';
import { ReorderableList } from '@rookcom/monarch-react/data';

function ButtonsDemo() {
  const [fields, setFields] = useState([
    { id: 'name', name: 'Full name', locked: true },
    { id: 'email', name: 'Email address' },
    { id: 'phone', name: 'Phone number' },
    { id: 'notes', name: 'Anything else?' },
  ]);
  return (
    <div style={{ width: '100%', maxWidth: 420 }}>
      <ReorderableList
        aria-label="Form fields"
        items={fields}
        onReorder={setFields}
        moveButtons
        isItemDisabled={(f) => f.locked === true}
        getKey={(f) => f.id}
        getLabel={(f) => f.name}
        renderItem={(f, { disabled }) => (
          <span>
            {f.name}
            {disabled ? ' (locked)' : null}
          </span>
        )}
      />
    </div>
  );
}

<ButtonsDemo />

Purpose

Lets people put a short list in their own order, such as pipeline stages, form fields, banners or approval steps, by drag or keyboard, with the same result. Import from @rookcom/monarch-react/data.

Use when

The order of a list is user data the app saves: stages, sections, fields, priorities.
A settings list where “Move up / Move down” buttons are the accessible fallback today.

Avoid when

Moving cards between columns (a board): this is a single vertical list.
Sorting by a value: offer a sort control instead of manual order.
Very long or virtualised lists: auto-scrolling while dragging is not provided.

Design principles

Drag only from the grip handle, so text in the row stays selectable and buttons in it stay clickable.
Keyboard is first-class, not a fallback: the same move happens with Space, arrows and Space, and Escape always undoes it.
Say what happened: “Picked up”, “moved to position 3 of 5”, “dropped”, “cancelled” go to a live region.
Nothing is saved until the drop: onReorder fires once per finished move with the new order, ready for one API call.
Rows glide to their new place (a FLIP transition) unless the user prefers reduced motion.
No drag-and-drop library: pointer events with capture cover mouse, pen and touch in a few hundred lines.

API reference

import { ReorderableList, moveItem } from '@rookcom/monarch-react/data';

Export	Kind	Rendering	Root class
`ReorderableList`	component	client	`.mn-reorderable-`
`moveItem`	utility	client	–

Generic over the item type: ReorderableList<T> with getKey, getLabel and renderItem(item, { index, active, disabled }).

Renders <div class="mn-reorderable-list"> with a <ul> (the ref and the rest of the props go to the list) and two visually hidden helpers: the instructions and the live region.

onReorder(items, { item, from, to }) gets a new array; moveItem(list, from, to) is exported for apps that move items elsewhere (for example after an undo).

Generated from the TypeScript declarations of packages/react/src/components/interaction/reorderable-list.

Properties