build69
build69  /  Components  /  Text Inputs  /  InlineEdit

InlineEdit

v1.0.3NewUpdated 28 Sept 2026

Click-to-edit field: renders a committed value as text with a pencil affordance on hover/focus, and swaps to an input, textarea, or native select on activation. Enter or the check button confirms (Ctrl/Cmd+Enter in texta

View source← Back to catalog

Preview

Live · 12 stories
DefaultOpen ↗
▸Why this is recommendedinlineedit-in-placeclick-to-editasync+3

The default, out-of-the-box InlineEdit.

Recommended for+14
  • ✓Detail-panel fields (invoice, customer, deal records)
  • ✓Table-cell style quick edits without a modal
  • ✓Settings values edited one at a time
  • ✓Renaming things in place (documents, projects, line items)
Tags+6
inlineedit-in-placeclick-to-editasyncoptimisticfielddefault
Features+4
  • Read view is a real button with visible focus ring and hover/focus pencil affordance
  • Three edit controls: input / textarea / select (with options array)
  • Confirm on Enter or check button; cancel on Escape or X button
  • Confirm-on-blur by default (or cancel-on-blur via confirmOnBlur={false})
  • Async onConfirm with pending spinner and inline error (role="alert")
  • Optimistic mode: commit + close immediately, revert on rejection
  • Controlled (value/onValueChange) and uncontrolled (defaultValue) modes
  • Three sizes (sm / default / lg)
  • Key hints exposed via aria-describedby; saving announced via polite live region
  • prefers-reduced-motion respected (motion-safe transitions and spinner)
  • Labelled by FormField: id and aria-* move off the wrapper onto the read-view button (named "<value>, edit <field label>") and, while editing, onto the edit control; clicking the label starts editing
Not recommended for−2
  • ✕Multi-field forms (use Form + Input)
  • ✕Rich text editing (use a rich-text editor)
  • ✕Values needing complex pickers (use DatePicker / Combobox)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "InlineEdit" })

Usage

import { InlineEdit } from '@/components/inputs/inline-edit';

<InlineEdit
  label="Customer name"
  defaultValue="Mali Hotel Co., Ltd."
  onConfirm={async (next) => api.updateCustomerName(next)}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Controlled committed value

string—
defaultValue

Uncontrolled initial value

string—
onValueChange

Fires when the committed value changes

(value: string) => void—
onConfirm

Async confirm; rejection shows inline error (and reverts when optimistic)

(value: string) => void | Promise<void>—
control

Which edit control to render

'input' | 'textarea' | 'select'—
options

Options for control='select'

InlineEditOption[]—
label

Accessible name for the field and its edit controls

string—
optimistic

Commit + close immediately, revert on rejection

boolean—
confirmOnBlur

Confirm (default) or cancel when focus leaves the editor

boolean—
size

Size scale

'sm' | 'default' | 'lg'—
placeholder

Muted empty-value text and edit-control placeholder

string—
id

DOM id set on the wrapper standalone; inside a FormField, the read-view button / edit control; FormField clones its field id in, and its label then names the control

string—
aria-labelledby

Id(s) of the element(s) that label the controls inside a FormField; wins over a FormField label

string—
aria-describedby

Id(s) of hint or error text describing the focusable element inside a FormField (FormField clones this in)

string—
aria-invalid

Mark the focusable element inside a FormField invalid; FormField clones this in from its error prop

boolean—
aria-required

Mark the edit control inside a FormField required; FormField clones this in from its required prop

boolean—

Related

Platform docsAll componentsSource files