Inline Edit Swap
A value becomes a field where it sits: the surface arrives around the words and the row never changes size.
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 {
useEffect,
useId,
useRef,
useState,
type CSSProperties,
} from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";About this pattern
The failure mode of edit-in-place is the row growing when it opens, which shoves the rest of the settings list down and makes a small correction feel like a page change. So the reading state and the edit state are built from the same box, the same padding and the same type size, and the swap between them is opacity only — the field surface fades in around words that were already sitting exactly where the input will put them. The confirm controls take the same fixed slot the pencil occupied, so even the right edge holds still. The caret follows the swap in, escape cancels, enter commits, and focus lands back on the control that opened the row.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Property values open for editing without the row moving.
Related patterns
- Search Input ExpandA search icon opens into a full field while the controls beside it give up the space.
- Select Dropdown OpenThe list unfolds under the field, options a beat behind the panel, current choice already marked.
- Password Reveal ToggleDots hand over to the real characters one cell at a time as the eye takes its slash.