InlineEdit

Rename in place: resting text turns into a field without moving, then saves, validates, and rolls back on failure.

When to use

• Renaming things where they are shown: document titles, project names, short summaries.
• Saving one value at a time, optimistically, with a promise that can fail and roll back.
• Not for forms with several fields or a submit step; use Input inside a form instead.
• Not for long rich content; use RichTextEditor.

Usage

import { InlineEdit } from "@/components/iris/inline-edit/inline-edit";

h(InlineEdit, {
  as: "h1",
  label: "Document title",
  value: doc.title, // "Changelog launch"
  validate: (next) => (next.trim() ? null : "Title can’t be empty"),
  onSave: (next) => renameDocument(doc.id, next), // return a promise to show saving; reject to roll back
});

Props

Prop	Type	Default	Description
value	string	required	The saved value. Outside changes replace the text while it is not being edited.
onSave	(next: string) => void | Promise<unknown>	required	Persists the value. A returned promise shows the saving state; a rejection rolls back and offers retry.
label	string	required	Accessible name, such as "Document title".
validate	(next: string) => string | null | undefined	–	Returns a message to block saving.
placeholder	string	""	Shown when the value is empty.
multiline	boolean	false	Wraps and grows; Enter saves, Shift+Enter adds a line break.
variant	"title" | "body"	"title"	Type style: titles for names and headings, body for descriptions.
as	"span" | "p" | "h1" | "h2" | "h3"	"span"	Element that holds the text, so a heading stays a heading.
className	string	–	Added to the root.

Notes

• Keyboard: Enter or Space on the text starts editing; Enter saves; Escape cancels and restores; Tab saves on the way out.
• The resting text is a native button labelled with the label and current value. Errors live in a polite live region linked with aria-describedby; save progress is announced through an <output> status region.
• Reduced motion swaps the morph and drawn check for crossfades and a static spinner mark.
• Reads --ink, --ink-2, --ink-3, --hover, --surface, --red, --green and the motion duration/ease tokens.