How to build an accessible Editable in React

The preview renders as a real <button> so it is keyboard-focusable and announces as an actionable control; while editing, Enter confirms and Escape cancels, and focus is moved into the input and its text selected so keyboard users can immediately type.

When to use a Editable

• Editing a single piece of text in place where the value is normally read-only — titles, names, labels
• Keeping the page layout stable: the preview and the edit input occupy the same spot
• Letting users opt into editing by clicking, without a separate edit mode or form

When not to use it

• A field that is always meant to be edited — use Input inside a Form instead
• Multi-line or rich text — this is a single-line input only
• Collecting several related values at once — use a Form with grouped fields

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Escape

Common mistakes

Avoid: <Editable value={email} onValueChange={save} /> as a primary form control

Prefer: <Input label="Email" value={email} onChange={...} />

Inline edit hides the affordance behind a click; required form fields should be visibly editable from the start

Example

<Editable value="Click to edit" onValueChange={() => {}} />

See the full Editable reference →