Skip to content
Pinky UI

forms

Morphing Input

A compact value control becomes a focused editor while the source surface keeps its identity.

  • forms
  • input
  • morph
  • editing
  • focus
Related pattern

A compact control-to-editor transformation; Inline Edit Field owns richer field context.

Live preview

Quick usage

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

<MorphingInput label="Add note" value={note} onValueChange={setNote} />

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
valuestring—The editable value that stays attached to the compact source surface.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Opening focuses the native input; Enter saves and Escape restores the compact control.
  • The same label and description remain associated across both states.

Performance

  • Only one input surface is mounted at a time and no document listener is required.

Reduced motion

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

When to use

  • Short notes, names and local product values where a full field would add noise

When not to use

  • Long-form editing or fields with dependent validation workflows

Skill

Purpose

Use Morphing Input when a compact value control should become a focused editor without losing the identity of the source surface.

Interaction

Render the resting value as the entry point. On activation, keep the label and surface attached while mounting the native input. Enter or Save commits the draft; Escape restores the previous value and returns focus to the compact control.

Usage

tsx
<MorphingInput label="Release note" value={note} onValueChange={setNote} />

Accessibility

Keep the same label and description associated with both states. Use a real input, Save button and Cancel button; never make the resting value the only editable path.

Reduced motion

Disable layout interpolation, but keep the compact-to-editor state change, focus transfer and Escape restoration explicit.

Open this skill on its own page