Edit a value in place, with explicit save and cancel, validation and asynchronous retry.
Project name
Select the name to edit it. Enter saves; Escape cancels.
pnpm dlx shadcn@latest add @latheui/inline-editPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Inline Edit is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| label* (required) | string | — | Visible label and accessible name for editing actions. |
| value / defaultValue | string | "" (defaultValue) | Controlled or initial committed value. Drafts stay local until a successful save. |
| onValueChange | (value: string) => void | — | Called with the trimmed value after saving succeeds. |
| onSave | (value: string) => void | Promise<void> | — | Resolve to commit. Reject with an Error to keep the draft and show its message. Omit to save locally. |
| validate | (value: string) => string | undefined | — | Return an error message to prevent saving. Empty or whitespace-only values are always rejected. |
| placeholder | string | "Add a value" | Text shown when the committed value is empty. |
| maxLength | number | — | Native input character limit. |
| disabled | boolean | false | Disable editing actions. |
| className | string | — | Style the outer wrapper; native div attributes are forwarded. |
Return a short, actionable message. Validation runs on the trimmed draft before onSave.
<InlineEdit
label="Team name"
defaultValue="Studio"
maxLength={60}
validate={(value) => value.length < 3 ? "Use at least three characters." : undefined}
onSave={saveTeamName}
/>