Skip to content
Pinky UI

forms

Inline Edit Morph

A motion-focused inline editing preset where the resting value becomes a focused validated field.

  • forms
  • inline-edit
  • settings
  • validation
  • morph
Variation of

Use Inline Edit Field for the complete product field; this route keeps the focused morph composition. Open Inline Edit Field

Live preview

Quick usage

usage
import { InlineEditMorph } from "@pinky-ui/systems";

<InlineEditMorph label="Display name" value={name} onValueChange={setName} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
validate(value: string) => string | null—Synchronous validation that keeps invalid drafts editable.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Enter saves, Escape cancels and opening selects the input.
  • Validation errors use invalid state and an alert description.

Performance

  • Only the active editor mounts; layout interpolation is disabled for reduced motion.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Small profile values where the morphing surface is the intended cue

When not to use

  • Long-form or dependent form workflows

Skill

Purpose

InlineEditMorph is the motion-focused preset of the canonical InlineEditField: it changes a small read-only value into an editing control without a disruptive layout jump. Use it for profile names, labels, titles and compact settings where that morph is the intended cue.

Avoid long-form content, complex validation workflows or fields that should already be visibly editable. The resting button must clearly announce what it edits.

Opening focuses and selects the input; Enter saves and Escape cancels. Validation errors are announced and invalid values stay in edit mode. Reduced motion removes layout interpolation while preserving focus. Pair with an explicit full form for dependent fields.

Open this skill on its own page