Inline editPro
Text that becomes a field on click; Enter saves with validation, Escape cancels.
Owner
Click a value to edit · Enter saves · Esc cancels
When to use
- Renaming things in place: projects, files, titles, settings values.
When not to use
- Long text or several fields at once: use a form.
Installation
Usage
Import it from @/components/ui/inline-edit after installing.
example.tsx
import { InlineEdit } from "@/components/ui/inline-edit";
<InlineEdit label="Project name" value={project.name} onSave={(name) => rename(project.id, name)} className="text-xl font-semibold" />API reference
InlineEdit
Shows text as a button; clicking turns it into a field with save and cancel.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | – | Current text. |
| onSave | (value) => void | Promise<void> | – | Throw with a message to show an error and keep editing. |
| label | string | – | Accessible name, e.g. "Project name". |
| validate | (value) => string | null | – | Return a message to block saving. |
| placeholder | string | "Untitled" | Shown when empty. |
Keyboard interactions
| Keys | Action |
|---|---|
| EnterorSpace | Start editing (on the text) |
| Enter | Save |
| Esc | Cancel |
Accessibility
- The text is a button named "<label>: <value>. Edit".
- Errors use role="alert"; success is announced; focus returns to the text after saving or cancelling.
Motion
- The text and field cross-fade; a check pops after saving; the pencil fades in on hover.
Responsive behavior
- The field grows with the text.
Performance
- Only one field exists at a time.
Notes for AI
- Make onSave throw on server errors so the field stays open.
This page as Markdown, for assistants and coding agents:
/components/inline-edit/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt