## Inline Edit (S—084)

Text that turns into an input on click; Enter saves with a brief tick, Escape restores the old value.

- URL: https://sundaeui.dev/components/inline-edit
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/inline-edit.json`
- Tags: title, click-to-edit, rename, input, inline, edit

Hovering shows a pencil and a faint well so it reads as editable. Clicking swaps in an input at the same size, selected, so typing replaces it.
Enter or blur saves and flashes a tick; Escape cancels. Empty values are refused with a small shake.

### Usage

```tsx
import { InlineEdit } from '@/components/sundae/inline-edit'

<InlineEdit />
```

### Props

- `value / defaultValue` (`string`): Text.
- `onSave` (`(v: string) => void`): Called with the new value.
- `label` (`string`, default `'Name'`): Accessible name of the field.
- `size` (`'md' | 'lg'`, default `'lg'`): Type size.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Renaming files, projects, boards, playlist titles.

### When not to use

- Fields that need validation messages or several inputs: use a form.

### Accessibility

- At rest it is a button named "Edit Name: …"; editing moves focus to a labelled input.
- Save and cancel return focus to the button and are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Enter: Save
- Esc: Cancel