Inline Edit

FreeNew

Text that turns into a field in place with confirm and cancel buttons, validation, an async save and focus returned to the text afterwards.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value

label

placeholder

showActions

saveOnBlur

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/inline-edit

It builds on the button, input components, which the CLI installs for you.

Usage

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

<InlineEdit
  label="Project name"
  value={name}
  validate={(v) => (v.length < 3 ? "Use at least 3 characters" : null)}
  onSave={async (next) => setName(await rename(next))}
/>

Props

Prop	Type	Default	Description
`value`	`string`	`-`	The saved value.
`onSave`	`(next: string) => void \| Promise<void>`	`-`	Called with the trimmed value when valid and changed. A rejection shows its message.
`label`	`string`	`-`	Names the field for screen readers.
`validate`	`(next: string) => string \| null`	`-`	Return a message to block saving.
`placeholder`	`string`	`"Add a value"`	Shown when the value is empty.
`showActions`	`boolean`	`true`	Show Save and Cancel buttons.
`saveOnBlur`	`boolean`	`true`	Save when focus leaves the field; otherwise cancel.

Accessibility

Role: textbox.

The read view is a button whose name is the label, the value and the word Edit.
Errors are shown in a role=alert message linked with aria-describedby and aria-invalid.
Focus returns to the read view after saving or cancelling.

Keyboard

Enter, Space or F2 on the text starts editing.
Enter saves.
Escape cancels.
Tab to the Save and Cancel buttons.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac/inline-edit

It builds on the button, input components, which the CLI installs for you.

Usage

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

<InlineEdit
  label="Project name"
  value={name}
  validate={(v) => (v.length < 3 ? "Use at least 3 characters" : null)}
  onSave={async (next) => setName(await rename(next))}
/>

Props

Prop	Type	Default	Description
`value`	`string`	`-`	The saved value.
`onSave`	`(next: string) => void \| Promise<void>`	`-`	Called with the trimmed value when valid and changed. A rejection shows its message.
`label`	`string`	`-`	Names the field for screen readers.
`validate`	`(next: string) => string \| null`	`-`	Return a message to block saving.
`placeholder`	`string`	`"Add a value"`	Shown when the value is empty.
`showActions`	`boolean`	`true`	Show Save and Cancel buttons.
`saveOnBlur`	`boolean`	`true`	Save when focus leaves the field; otherwise cancel.

Accessibility

Role: textbox.

The read view is a button whose name is the label, the value and the word Edit.
Errors are shown in a role=alert message linked with aria-describedby and aria-invalid.
Focus returns to the read view after saving or cancelling.

Keyboard

Enter, Space or F2 on the text starts editing.
Enter saves.
Escape cancels.
Tab to the Save and Cancel buttons.