inline editable field

Inline Editable Field

Inline Editable Field

Click-to-edit text that toggles between view and input modes.

Preview

Features

  • Inline edit state.
  • Save on blur/Enter.
  • Escape to cancel changes.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/inline-editable-field.json

Registry JSON: /registry/inline-editable-field.json

Usage

import { InlineEditableField } from '@/components/ui/inline-editable-field'
<InlineEditableField value={value} onChange={setValue} />