InlineEdit

Display-to-input rename primitive. Click the value (or focus + Enter), type, then Enter to commit or Escape to cancel.

api-gateway

Empty state#

Shows the placeholder until a value is committed.

Add a description

Use as="h1" | "h2" | "h3" to keep heading semantics. The element advertises itself as editable via aria-roledescription="editable".

validate runs on commit. Return an error message to reject and keep the editor open; return null to accept.

payments-svc

locked-name

Props for InlineEdit
Prop	Type	Default	Description
value *	`string`	`—`	Current label value.
onValueChange *	`(next: string) => void`	`—`	Fired with the committed value.
as	`enum`	`span`	Display element. Default 'span'. Use 'h1'-'h3' for headings.
activate	`enum`	`dblclick`	Activation gesture besides the always-on Enter-on-focus. Default 'dblclick'.
commitOnBlur	`boolean \| undefined`	`true`	Commit (vs cancel) on blur. Default `true`.
validate	`((next: string) => string \| null) \| undefined`	`—`	Returns an error message on rejection, or `null` on success.
placeholder	`string \| undefined`	`Empty`	Shown when `value` is empty in display mode.
disabled	`boolean \| undefined`	`false`	Disables activation and applies a muted style.
editing	`boolean \| undefined`	`—`	Controlled editing flag.
onEditingChange	`((next: boolean) => void) \| undefined`	`—`	Fired when the editing flag changes (uncontrolled mode or external open).
inputClassName	`string \| undefined`	`—`	Extra className on the `<input>` in edit mode.
aria-label	`string \| undefined`	`—`	Accessible label for the display element. Default `Edit {value}`.
size	`"sm" \| "md" \| "lg" \| null \| undefined`	`—`

The display element is keyboard-focusable. Press Enter (or Space) to enter edit mode, regardless of the activate setting.
For non-heading elements (span, div) role="button" is applied so screen readers announce the rename affordance. For headings the implicit heading role wins and aria-roledescription="editable" describes the affordance.
Escape cancels and restores the original value. Blur commits by default — pass commitOnBlur={false} to revert instead.
The accessible label defaults to Edit {value}. Override with aria-label for custom phrasing.