SortableList

SortableList renders a list whose items can be reordered by dragging a grip handle (powered by dnd-kit). State is controlled: pass items (each needs a stable id) and an onChange callback that receives the reordered array when a drag ends. Supply your own item UI via renderItem. Use it for ranked lists, reorderable form fields, or priority queues.

Example

import { SortableList } from '@officina/ui';
import { useState } from 'react';

function Priorities() {
  const [items, setItems] = useState([
    { id: 'a', label: 'Inbox' },
    { id: 'b', label: 'Review' },
    { id: 'c', label: 'Ship' },
  ]);
  return <SortableList items={items} onChange={setItems} renderItem={(item) => item.label} />;
}

API