Field Reorder Drag
A row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import {
useId,
useState,
type KeyboardEvent as ReactKeyboardEvent,
type PointerEvent as ReactPointerEvent,
} from "react";
import { Reorder, useDragControls, useReducedMotion } from "motion/react";
About this pattern
Reordering is the interaction people are most likely to get stuck in, so the row being moved has to look picked up and the gap has to open before the drop, not after it. The lift is shadow and surface only — never scale, because the row is mostly text and text that grows under a finger reads as a bug rather than as depth — and the rows on either side spring apart and close once, without shuffling to a stop. The keyboard gets the identical motion rather than a lesser version of it: the handle is a real button that grabs on space, moves on the arrow keys, drops on escape, and every move is spoken through a live region so the reorder is not a silent one.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Form
A row raised on a shadow while its neighbours slide to fill the space.
Related patterns
- Range Double HandleTwo handles bound a range and the fill between them tracks both, one-to-one under the pointer and settling on a spring from the keyboard.
- Slider Drag ValueThe handle stays under the finger while held, with a value bubble that rises on grab.
- Toggle Group SelectOne highlight slides between grouped buttons and resizes to each label.