Inline Edit

Basic usage

value is controlled by your data; onSave receives the new one. The component owns nothing but a draft and a boolean, and while it is not editing it re-syncs the draft from value on every change — so a realtime update from another user lands immediately, but never overwrites a half-typed edit.

The default strings are Vietnamese

InlineEdit is one of the small composites that takes plain string props instead of a labels object, so there is no partial override to lean on — an English UI passes both. placeholder defaults to "Nhấn để nhập…" and ariaLabel to "Sửa tại chỗ". The second is the dangerous one: it is invisible, so the page can look entirely English while every field announces itself in Vietnamese to a screen reader. There is no fallback chain and no way to reach it later — set it at the call site, per field.

Return a promise from onSave

onSave is typed (value: string) => void | Promise<void> and the component awaits it. While the promise is pending the input is disabled at 60% opacity and edit mode is held open; only when it resolves does the field drop back to text.

This is the whole reason the promise branch exists. Leave edit mode before the write lands and the read-only state renders the value it was given a moment ago — the user watches their new text flash back to the old one and then flip forward again when the state update arrives. Returning the promise makes that impossible: the swap happens after your value has already changed.

When the save fails

A rejected promise leaves the component in edit mode with the draft untouched. That is the deliberate choice recorded in the source: the user does not lose what they typed because the network did. What the component will not do is tell them — pass onError and raise a toast, otherwise the only trace is a console.error nobody reads and a field that quietly refuses to close.

One detail worth knowing: on failure the input is not re-focused, because editing never flipped and the focus effect is keyed to it. If the failed save came from a blur, the caret is now somewhere else and the still-open field is easy to miss — another reason the error path needs a visible signal of its own. In the demo below the first save always fails; the second succeeds.

Multiline

multiline swaps the <input> for a three-row <textarea> and, more importantly, changes what Enter means. In a single-line field Enter saves; in a multiline one Enter breaks the line and Cmd/Ctrl+Enter saves. Escape cancels in both. The read-only state changes too — from block truncate to whitespace-pre-wrap, so the line breaks the user typed are still there when the field closes.

How the edit is committed

saveOnBlur defaults to true: clicking away saves, the way Linear behaves. Turning it off gives you a form-like explicit commit — but then Enter and Escape are the only ways out, and a user who clicks elsewhere leaves the field open behind them. Pair it with showActions, which adds a ✓ / ✕ pair of ghost icon-sm buttons.

Those two buttons fire on onMouseDown with preventDefault(), not on onClick. It looks like a mistake and is not: mousedown lands before the input blurs, so with saveOnBlur on, a click on ✕ would otherwise have been overtaken by the blur-save it was trying to prevent.

Whichever route it takes, the commit is filtered first. The draft is trimmed, and if it equals the trimmed value the component cancels instead of saving — so tabbing through a table of inline fields does not fire a write per field.

Empty means cancel

required defaults to true, and it is not validation — there is no error message, no red border, nothing to dismiss. An empty draft is simply read as “never mind”: onSave is not called and the old value returns. For a task title or a customer name that is exactly right; an empty row in a list is worse than an unchanged one.

Set required={false} where clearing the field is a real edit — a nickname, an optional note. Then onSave('') fires and the read-only state falls back to the placeholder in text-muted-foreground.

Keyboard

Both Enter and Escape call preventDefault(), so an inline edit inside a <form> will not submit it on Enter. Escape resets the draft back to value before leaving edit mode, so nothing can be committed on the way out.

What preventDefault() does not do is keep Escape to itself. It is not stopPropagation(), and the dismissable layers — Dialog, Sheet, Popover, DropdownMenu — listen for Escape on the document in the capture phase, so they see the key before the input's handler ever runs. An inline edit inside a dialog therefore cancels the edit and closes the dialog on a single press. If the field needs the first Escape for itself, take it on the layer: hold your own “is editing” flag and call event.preventDefault() inside <DialogContent onEscapeKeyDown={…}>.

Styling the two states

There are two class props and the split matters. className is applied to both the read-only button and the input — that is where typography belongs, so the text does not jump a size at the moment of the swap. displayClassName is appended after it on the read-only state only, for anything that should not follow the text into the input.

The read-only state is a full-width <button> with a negative -mx-1 and matching padding, so its hover:bg-muted hit area reads as a slightly wider band while the text itself stays optically aligned with everything above and below it. Note that there is no rest-prop spread: InlineEditProps is a closed interface, so id, name, data-* and native handlers do not pass through.

Where it earns its keep

A table of editable cells is the case this component was built for. Every cell reads as text, hover shows the affordance, and only the cell being edited is an input — so the row still scans as data. Give each field its own ariaLabel naming the record, or a screen-reader user hears six buttons all called the same thing. Optional columns get required={false}.

Props

Accessibility

• The read-only state is a real <button type="button">, not a div with a click handler — it is in the tab order, responds to Enter and Space, and the explicit type stops it submitting a surrounding form.
• ariaLabel is the accessible name of both states, so the name does not change under the user as the element swaps. It defaults to the Vietnamese "Sửa tại chỗ"; in an English UI that is a bug waiting in the invisible layer. Name the field, not the action alone — "Edit task title".
• Entering edit mode focuses the input and places the caret at the end of the text (setSelectionRange(length, length)) rather than selecting all of it. Appending is the common intent, and a select-all means one stray keystroke wipes the value.
• The ✓ / ✕ buttons are icon-only, with their names in an sr-only span and the icons aria-hidden. Those two strings are hard-coded Vietnamese (“Lưu” / “Hủy”) with no prop to reach them — if your app must announce them in English, keep showActions off and rely on the keyboard, which needs no label.
• Nothing about the state change is announced. There is no live region here: a save that succeeds is silent, and a save that fails is silent too. Pair onError with the package toast, which does announce, and consider a success toast for edits with real consequences.
• Focus comes from the shared ring — focus:ring-2 focus:ring-ring/50 plus focus:border-primary-ink on the input, and the button's own focus-visible outline on the closed state. The border uses the -ink role because it sits on the page background and owes the 3:1 non-text threshold, which the decorative border tier does not meet.
• Hover is the only affordance in the resting state (hover:bg-muted), and hover does not exist on touch or for keyboard users. Where discoverability matters, put a visible label or a pencil icon beside the field rather than relying on people finding the click target.
• disabled gates the read-only button only. A field that becomes disabled while someone is mid-edit stays editable until they commit or cancel — if that matters, unmount the component instead.