# Editable
- **Category:** Inputs (`inputs`)
- **Slug:** `inputs/editable`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Editable } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/inputs/editable
> Click-to-edit inline text: a quiet preview that swaps to an Input or Textarea on activate, committing on Enter or blur.
## When to use it
Use **Editable** for in-place edits of a single short value that mostly reads as text — a document title, a display name, a table cell. When the field is always in edit mode, or sits in a form with a submit button, use a plain **Input**/**Textarea** in a **Field** instead.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `aria-label` | `string` | no | — | Accessible name for both the preview trigger and the edit field. |
| `className` | `string` | no | — | — |
| `defaultValue` | `string` | no | — | Initial value when uncontrolled. |
| `disabled` | `boolean` | no | — | Prevent entering edit mode. |
| `multiline` | `boolean` | no | — | Use a Textarea instead of an Input; Enter inserts a newline, blur commits. |
| `onCancel` | `(() => void)` | no | — | Fires when the user abandons an edit with Escape. |
| `onSubmit` | `((value: string) => void)` | no | — | Fires with the committed value when the user confirms an edit (Enter / blur). |
| `onValueChange` | `((value: string) => void)` | no | — | Fires with the next value on every commit. |
| `placeholder` | `string` | no | `Empty` | Shown (muted) in the preview when the value is empty. |
| `size` | `enum` | no | `md` | Control height for the edit field. Default `md`. |
| `style` | `CSSProperties` | no | — | — |
| `submitOnBlur` | `boolean` | no | `true` | Commit on blur (default `true`); set `false` to require Enter and treat blur as cancel. |
| `value` | `string` | no | — | Controlled value. Pair with `onValueChange`. |
## Examples
### Basics
Render `Editable` with a `value`; clicking (or pressing Enter/Space on the preview) enters edit mode. Enter commits, Escape reverts, and blur commits by default.
```tsx
import { Editable } from "@protocore/pds";
export default function Demo() {
return (
);
}
```
### Multiline
Set `multiline` to edit in an auto-growing Textarea. Enter inserts a newline; commit with blur or ⌘/Ctrl+Enter.
```tsx
import { Editable } from "@protocore/pds";
export default function Demo() {
return (
);
}
```
## Do & don't
**Do**
- Give it an `aria-label` so both the preview and the field are named.
- Provide a `placeholder` so an empty value still offers a target to click.
- Use `onSubmit` to persist, not `onValueChange`, so you only save on commit.
**Don't**
- Don't hide the only copy of critical data behind a click — show it, then let it edit.
- Don't use it for long-form content that needs a full editor.
- Don't set `submitOnBlur={false}` without making the commit affordance obvious.
## Accessibility
**Keyboard**
| Keys | Action |
| --- | --- |
| `Enter / Space` | From the preview, enter edit mode. |
| `Enter` | Commit the edit (single-line). |
| `⌘/Ctrl + Enter` | Commit the edit (multiline). |
| `Escape` | Cancel and restore the previous value. |
**Notes**
- The preview is a real button, so it is focusable and keyboard-activatable.
- Entering edit mode moves focus into the field and selects its contents.
## Related
`input`, `textarea`, `field`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/