/// Inputs

Editable

Click-to-edit inline text: a quiet preview that swaps to an Input or Textarea on activate, committing on Enter or blur.

import { Editable } from "@protocore/pds";

View as Markdown

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.

Multiline

Set multiline to edit in an auto-growing Textarea. Enter inserts a newline; commit with blur or ⌘/Ctrl+Enter.

Controlled

Drive it from state with value + onValueChange, and react to commits with onSubmit.

Saved as: Q3 capacity plan

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.

Usage

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

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.

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.

`Editable` props

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessible name for both the preview trigger and the edit field.
`className`	`string`	—
`defaultValue`	`string`	—	Initial value when uncontrolled.
`disabled`	`boolean`	—	Prevent entering edit mode.
`multiline`	`boolean`	—	Use a Textarea instead of an Input; Enter inserts a newline, blur commits.
`onCancel`	`(() => void)`	—	Fires when the user abandons an edit with Escape.
`onSubmit`	`((value: string) => void)`	—	Fires with the committed value when the user confirms an edit (Enter / blur).
`onValueChange`	`((value: string) => void)`	—	Fires with the next value on every commit.
`placeholder`	`string`	`Empty`	Shown (muted) in the preview when the value is empty.
`size`	`enum`	`md`	Control height for the edit field. Default `md`.
`style`	`CSSProperties`	—
`submitOnBlur`	`boolean`	`true`	Commit on blur (default `true`); set `false` to require Enter and treat blur as cancel.
`value`	`string`	—	Controlled value. Pair with `onValueChange`.