# Inline edit

> Text that becomes a field on click; Enter saves with validation, Escape cancels.

Component · Pro · https://lodeui.com/components/inline-edit

## 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

```bash
npx shadcn@latest add @lode/inline-edit
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| Enter / Space | 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.

## Related

- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.