build69
Sign inGet API key
build69  /  Components  /  Text Inputs  /  InlineEdit

InlineEdit

v1.0.1NewUpdated 20 Jul 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 · 11 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)
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—

Related

Platform docsAll componentsSource files