Inline Edit with a Form Action

ProNew

A title that becomes an input on click or Enter, saves with a form action on Enter or blur, cancels with Escape, shows pending, and reverts with a message if the save fails. Use this when renaming should feel like editing text, not opening a form.

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.

initial

Guide and examples

When to use it

A name or title is renamed in place (document, project, list) and a dedicated form would be heavy.

Do not use it when: For many fields at once or values that need long validation, use a real form. For table cells, use the inline editable cell pattern.

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	Description
`initial`	`string`	The starting title.
`save`	`(title) => Promise<void>`	Persist the new title. A rejection reverts it and shows a message.

Accessibility

The resting state is a button named "Title. Rename"; the editing state is a labelled input. Enter saves, Escape cancels, leaving the field saves, and focus returns to the button either way.
The save is optimistic with a polite status; a failure reverts the text and shows an alert.
An empty or unchanged title is ignored instead of saving.

Testing

The pattern ships with a Testing Library test (inline-edit-title-action.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

A name or title is renamed in place (document, project, list) and a dedicated form would be heavy.

Do not use it when: For many fields at once or values that need long validation, use a real form. For table cells, use the inline editable cell pattern.

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	Description
`initial`	`string`	The starting title.
`save`	`(title) => Promise<void>`	Persist the new title. A rejection reverts it and shows a message.

Accessibility

The resting state is a button named "Title. Rename"; the editing state is a labelled input. Enter saves, Escape cancels, leaving the field saves, and focus returns to the button either way.
The save is optimistic with a polite status; a failure reverts the text and shows an alert.
An empty or unchanged title is ignored instead of saving.

Testing

The pattern ships with a Testing Library test (inline-edit-title-action.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.