Skip to content
Pinky UI

forms

Inline Edit Field

A product field keeps its label, help text and validation attached while entering edit mode.

  • forms
  • inline-edit
  • field
  • settings
Related pattern

Canonical product field for inline editing with attached context.

Live preview

Workspace name

Click the value to edit.

Click to edit

Quick usage

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

<InlineEditField label="Workspace name" value={name} onValueChange={setName} description="Shown to collaborators." />

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 for the field-level save path.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The resting value and edit action have an explicit label; Save and Cancel are real buttons.
  • Escape cancels and validation is announced beside the field without removing the draft.

Performance

  • Only one small native input is active; no pointer-frame work is required.

Reduced motion

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

When to use

  • Settings and profile fields that benefit from local context

When not to use

  • Long multi-field forms or inline table cells with many dependencies

Skill

Purpose

A product field keeps its label, help text and validation attached while entering edit mode, so context never disappears behind a modal.

Good for

  • Settings and profile fields that benefit from local context

Avoid for

  • Long multi-field forms or inline table cells with many dependencies

Usage

tsx
<InlineEditField label="Workspace name" value={name} onValueChange={setName} description="Shown to collaborators." />

Accessibility

  • The resting value and edit action have an explicit label; Save and Cancel are real buttons.
  • Escape cancels and validation is announced beside the field without removing the draft.

Performance

  • Only one small native input is active; no pointer-frame work is required.

Related: inline-edit-morph, validation-field.

Open this skill on its own page