Inline Edit With Revert

ProNew

An inline edit that, after saving, shows a short Revert link that restores the previous value without reopening the editor.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

label

revertMs1

Guide and examples

When to use it

Use this when edits save immediately, mistakes are common and the previous value is worth one click (names, labels, tags, short notes).

Do not use it when you need full version history (show a history list), or the edit triggers notifications that revert cannot recall.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`label`	`string`	required	-
`onSave`	`(next: string) => void \| Promise<void>`	required	-
`revertMs`	`number`	optional	How long the Revert link stays, in ms. Default 8000.

Accessibility

The Revert line is inside a polite status region, so it is announced.
Revert is a real button and names the value it restores.
It expires on its own, so the page does not accumulate stale actions.

Testing

The pattern ships with a Testing Library test (inline-edit-with-revert.test.tsx) that covers reverting through onSave, expiry and no line for an unchanged value.

Guide and examples

When to use it

Use this when edits save immediately, mistakes are common and the previous value is worth one click (names, labels, tags, short notes).

Do not use it when you need full version history (show a history list), or the edit triggers notifications that revert cannot recall.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`value`	`string`	required	-
`label`	`string`	required	-
`onSave`	`(next: string) => void \| Promise<void>`	required	-
`revertMs`	`number`	optional	How long the Revert link stays, in ms. Default 8000.

Accessibility

The Revert line is inside a polite status region, so it is announced.
Revert is a real button and names the value it restores.
It expires on its own, so the page does not accumulate stale actions.

Testing

The pattern ships with a Testing Library test (inline-edit-with-revert.test.tsx) that covers reverting through onSave, expiry and no line for an unchanged value.