Inline Edit

Click-to-edit text field with save on Enter and cancel on Escape. The value is displayed as static text until the user activates editing; unsaved changes are discarded on Escape.

Untitled project

Saved value: Untitled project

import { InlineEdit } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add inline-edit

Import

import.tsx

import { InlineEdit } from "@aetherstack/patterns"

Usage

inline-edit.tsx

import * as React from "react"
import { InlineEdit } from "@aetherstack/patterns"

export function PageTitle() {
  const [title, setTitle] = React.useState("Untitled project")
  return (
    <InlineEdit
      value={title}
      onValueChange={setTitle}
      placeholder="Enter a title…"
    />
  )
}

Props

Prop	Type	Default	Description
value*	string	—	Controlled current value.
onValueChange*	(value: string) => void	—	Called with the new value when the user saves (Enter or blur).
placeholder	string	—	Shown in the input when value is empty.
disabled	boolean	false	Prevents entering edit mode.
className	string	—	Additional classes on the root element.

* Required

Accessibility

→The static display element has role="button" and tabIndex={0} so keyboard users can activate it.
→When editing, the underlying <input> receives focus immediately.
→Enter confirms; Escape restores the previous value and exits edit mode.
→A visually-hidden hint ("Press Enter to save, Escape to cancel") is announced on focus.