Sortable
A reorderable list: drag an item to a new position, or reorder from the keyboard (Space to grab, Arrow to move, Space to drop). A completed move is one undo step, however many arrow presses built it.
- Axe
- Focus
- Undo
- Drag
- Cancel
- Reorder
Preview
Installation
npx shadcn@latest add https://ui.publictheta.com/r/sortable.jsonConformance
Verified against the @publictheta/ui-spec sortable specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.
- Axe — No WCAG 2 A/AA axe-core violations
- Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
- Undo — What it destroys or moves comes back: Cmd/Ctrl+Z takes the last change back and announces it, Cmd/Ctrl+Shift+Z does it again, and a run of like changes is one step
- Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
- Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing
- Reorder — An item can be moved somewhere else by pointer and by keyboard — Space/Enter grabs, the arrows move, Space/Enter drops, Escape puts it back — with an indicator showing where it would land and every step announced
See the full conformance matrix across all components.