Micro-interactions

Inline Edit

Text that becomes its own input with nothing moving — one padded box, two contents, sized in CSS.

Cook BookMorph Continuity transition Spatial consistency

Controls

commitOn

stiffness460

damping32

underline

padX8 px

padY5 px

radius6 px

selectOnEdit

allowEmpty

showPencil

multiline

accentColor

#a855f7

Install

bun add motion clsx tailwind-merge

Then copy 2 files into your project:

components/registry/inline-edit/inline-edit.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
commitOn	"blur" \| "explicit"	"blur"	Blur commits when focus leaves. Explicit grows a confirm and a cancel outside the box and treats losing focus as a cancel. Both are defensible, which is why it is a prop rather than a decision.
stiffness	number	460	Spring tension on the border, wash and ring arriving. This is the only thing that animates — everything else is already exactly where it will be.
damping	number	32	Spring friction on the same. Low overshoots the colour, which on a border reads as a flash rather than as bounce.
underline	"dotted" \| "solid" \| "none"	"dotted"	How the display state says it is editable. A text decoration rather than a border, because a border would have to be reserved in the editing state too — and none is the honest option for a row that already announces itself some other way.
padX	number	8	Horizontal padding. Shared by both states by construction: it lives on the shell, which never unmounts, so the two contents cannot disagree about it.
padY	number	5	Vertical padding. The one that shifts every row below it when an inline editor gets this wrong.
radius	number	6	Corner radius of the shell.
selectOnEdit	boolean	true	Select the whole value on entering edit, so typing replaces it. Off puts the caret where the click landed, which is the right behaviour for a long value being amended rather than renamed.
allowEmpty	boolean	false	Accept an empty commit. Off puts the previous value back, on the grounds that a blank field is a mis-click far more often than an intention.
showPencil	boolean	true	Pencil on hover and keyboard focus. Absolutely positioned outside the shell — anything rendered inside it changes the width of the box the component exists to hold still.
multiline	boolean	false	A textarea that grows by line instead of a single-line field. The growth is the same CSS trick either way: an invisible copy of the draft sized in the same grid cell, so nothing is measured in JavaScript.
accentColor	string (hex)	"#a855f7"	The border, wash and ring of the editing state, and the underline of the display state. Expected as a 6-digit hex: the transparent variants are built by suffix so the fade runs on one interpolation rather than between two colours.

What It Demonstrates

Morph: One shape smoothly turns into another shape, e.g. Dynamic Island.
Continuity transition: A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
Spatial consistency: Animating so an element keeps its identity and position across states, so users never lose track of where things went.

Related Components

Appears In

"use client"; import { useEffect, useRef, useState } from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export type InlineEditCommitOn = "blur" | "explicit"; export type InlineEditUnderline = "dotted" | "solid" | "none"; export interface InlineEditProps { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; label?: string; placeholder?: string; commitOn?: InlineEditCommitOn; stiffness?: number; damping?: number; underline?: InlineEditUnderline; padX?: number; padY?: number; radius?: number; selectOnEdit?: boolean; allowEmpty?: boolean; showPencil?: boolean; multiline?: boolean; accentColor?: string; reducedMotion?: boolean; className?: string; } export default function InlineEdit({ value, defaultValue = "", onValueChange, label = "Value", placeholder = "Empty", commitOn = "blur", stiffness = 460, damping = 32, underline = "dotted", padX = 8, padY = 5, radius = 6, selectOnEdit = true, allowEmpty = false, showPencil = true, multiline = false, accentColor = "#a855f7", reducedMotion = false, className, }: InlineEditProps) { const controlled = value !== undefined; const [self, setSelf] = useState(defaultValue); const committed = controlled ? value : self; const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(committed); const rootRef = useRef<HTMLSpanElement>(null); const buttonRef = useRef<HTMLButtonElement>(null); const fieldRef = useRef<HTMLInputElement & HTMLTextAreaElement>(null); const handBack = useRef(false); useEffect(() => { if (!editing) return; const field = fieldRef.current; if (!field) return; field.focus({ preventScroll: true }); if (selectOnEdit) field.select(); }, [editing, selectOnEdit]); useEffect(() => { if (editing || !handBack.current) return; handBack.current = false; buttonRef.current?.focus({ preventScroll: true }); }, [editing]); const begin = () => { setDraft(committed); setEditing(true); }; const finish = (next: string) => { if (!controlled) setSelf(next); onValueChange?.(next); setEditing(false); }; const commit = (refocus = false) => { handBack.current = refocus; const next = draft.trim(); finish(!next && !allowEmpty ? committed : draft); }; const cancel = (refocus = false) => { handBack.current = refocus; setDraft(committed); setEditing(false); }; const box = { paddingLeft: padX, paddingRight: padX, paddingTop: padY, paddingBottom: padY, borderRadius: radius, }; const type = cn( "font-sans text-[15px] leading-normal", multiline ? "whitespace-pre-wrap" : "whitespace-pre", ); const spring = reducedMotion ? { duration: 0 } : { type: "spring" as const, stiffness, damping }; return ( <span ref={rootRef} className={cn("group/edit relative inline-block", className)} > <motion.span className="block border border-solid" style={box} initial={false} animate={{ backgroundColor: editing ? `${accentColor}14` : `${accentColor}00`, borderColor: editing ? accentColor : `${accentColor}00`, boxShadow: editing ? `0 0 0 3px ${accentColor}26` : `0 0 0 0px ${accentColor}00`, }} transition={spring} > {editing ? ( <span className="grid *:col-1 *:row-1"> <span aria-hidden className={cn(type, "invisible wrap-break-word")}> {draft.endsWith("\n") ? `${draft} ` : draft || ""} </span> {multiline ? ( <textarea ref={fieldRef} rows={1} cols={1} value={draft} placeholder={placeholder} aria-label={label} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape") { event.stopPropagation(); cancel(true); } if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) commit(true); }} onBlur={(event) => { if (rootRef.current?.contains(event.relatedTarget)) return; if (commitOn === "blur") commit(); else cancel(); }} className={cn( type, "h-0 min-h-full w-0 min-w-full resize-none overflow-hidden bg-transparent text-ink outline-none placeholder:text-ink-mute/70", )} /> ) : ( <input ref={fieldRef} type="text" size={1} value={draft} placeholder={placeholder} aria-label={label} onChange={(event) => setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Escape") { event.stopPropagation(); cancel(true); } if (event.key === "Enter") { event.preventDefault(); commit(true); } }} onBlur={(event) => { if (rootRef.current?.contains(event.relatedTarget)) return; if (commitOn === "blur") commit(); else cancel(); }} className={cn( type, "w-0 min-w-full bg-transparent text-ink outline-none placeholder:text-ink-mute/70", )} /> )} </span> ) : ( <button ref={buttonRef} type="button" onClick={begin} aria-label={`${label}: ${committed || placeholder}`} className={cn( type, "block w-full cursor-text text-left text-ink outline-none", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent", !multiline && "overflow-hidden text-ellipsis", !committed && "text-ink-mute", )} style={{ textDecorationLine: underline === "none" ? "none" : "underline", textDecorationStyle: underline === "dotted" ? "dotted" : ("solid" as const), textDecorationColor: `${accentColor}66`, textUnderlineOffset: 4, }} > {committed || placeholder} </button> )} </motion.span> {showPencil && !editing ? ( <span aria-hidden className="pointer-events-none absolute top-1/2 -right-6 -translate-y-1/2 text-ink-mute opacity-0 transition-opacity duration-150 group-focus-within/edit:opacity-100 group-hover/edit:opacity-100" > <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" > <path d="M12 20h9" /> <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" /> </svg> </span> ) : null} {editing && commitOn === "explicit" ? ( <span className="absolute top-1/2 -right-13 flex -translate-y-1/2 gap-1"> <button type="button" onMouseDown={(event) => event.preventDefault()} onClick={() => commit(true)} aria-label="Save" className="rounded-sm border border-hairline p-1 text-ink-dim transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent" > <svg viewBox="0 0 24 24" className="size-3" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" > <path d="M4 12.5 9.5 18 20 6.5" /> </svg> </button> <button type="button" onMouseDown={(event) => event.preventDefault()} onClick={() => cancel(true)} aria-label="Cancel" className="rounded-sm border border-hairline p-1 text-ink-dim transition-colors hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent" > <svg viewBox="0 0 24 24" className="size-3" fill="none" stroke="currentColor" strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" > <path d="M5 5 19 19M19 5 5 19" /> </svg> </button> </span> ) : null} </span> ); }

Inline Edit

Controls

Install

Props

What It Demonstrates

Related Components

Morph Dialog

Animated Hamburger

Hover List

Rift

Approach

Crossing

Appears In

Controls