ReorderList
List whose rows can be reordered by pointer drag or entirely by keyboard
Category: inputs · WCAG 2.2-AA · inputs, reorder, sortable, drag, list, mobile, keyboard
States
- idle
- grabbed
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | ReorderItem[] | — | The ordered items; the component is controlled |
onValueChange | (value: ReorderItem[]) => void | — | Called with the new order whenever a row moves |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
labels | { handle?: string; grabbed?: string; moved?: string; dropped?: string; cancelled?: string } | — | Overrides for the component’s user-visible strings (i18n). |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-surface-2--cascivo-color-foreground--cascivo-color-text-muted--cascivo-color-accent--cascivo-border-subtle--cascivo-radius-sm--cascivo-ring-width--cascivo-ring-color--cascivo-disabled-opacity--cascivo-target-min-coarse
When to use
- A short, user-owned ordering such as playlist tracks, form fields, or dashboard cards
- Any list whose order is meaningful data the user is expected to change
- Touch surfaces where dragging a handle is the natural gesture
When not to use
- Long or virtualized lists, where dragging to a far position is impractical — offer a "move to position" control
- Ordering that is derived rather than authored (sort by name, date, rank) — use a sortable DataTable
- Read-only lists — use List or StructuredList
How to build an accessible ReorderList in React →
Examples
Basic
Controlled — the caller owns the order.
<ReorderList
value={items}
onValueChange={setItems}
/>Locked
Handles are disabled and drop out of the tab order.
<ReorderList value={items} onValueChange={setItems} disabled />