InlineEdit

forms

Click-to-edit inline text field with view/edit modes, Enter to confirm, Escape to cancel, blur to save, and disabled state. Token-driven border, colors, and edit icon.

Import

typescript
import { InlineEdit } from "packages/ui/src";

Props

InlineEditProps

PropTypeRequired
valuestringYes
onSave(value) => void, onCancel?: () => void, placeholder?: string, disabled?: booleanNo

Examples

InlineEdit

Click-to-edit inline text field. Enter saves, Escape cancels.

Live Edit

TitleProject Alpha
DescriptionAdd description...

Disabled

Cannot edit this

Custom Placeholder

Click here to type...

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionClick-to-edit inline text field with view/edit modes, Enter to confirm, Escape to cancel, blur to save, and disabled state. Token-driven border, colors, and edit icon.
PropsInlineEditProps (value: string, onSave?: (value) => void, onCancel?: () => void, placeholder?: string, disabled?: boolean)
Statesview-mode, edit-mode, empty/placeholder, disabled, hover
A11y
  • View mode has role=button with aria-label
  • Edit mode input has aria-label
  • Keyboard: Enter activates edit, Enter saves, Escape cancels
  • Edit icon is aria-hidden
Responsive
  • Inline-flex by default
  • Input min-width 120px
Motion
  • Background transition on hover (0.15s)
  • Focus ring on input
Token Dependencies
  • components.inlineEdit.bg
  • components.inlineEdit.bgEditing
  • components.inlineEdit.color
  • components.inlineEdit.colorPlaceholder
  • components.inlineEdit.borderColor
  • components.inlineEdit.borderColorFocus
  • components.inlineEdit.borderRadius
  • components.inlineEdit.padding
  • components.inlineEdit.fontSize
  • components.inlineEdit.iconSize
  • components.inlineEdit.iconColor
  • components.inlineEdit.hoverBg
Content Slotsvalue (string), placeholder (string)
CMS Bindings
  • Value from CMS field
  • Placeholder from CMS config
Test Cases
  • Renders value text
  • Has role=button in view mode
  • Shows edit icon
  • Shows placeholder when empty
  • Disabled has disabled class
  • Edit icon is aria-hidden
  • Has aria-label in view mode
  • Passes className through