Skip to content
Pinky UI

forms

Editable Property Rail

A compact property list turns one row at a time into an attached editor while the object context stays stable.

  • forms
  • properties
  • inline-edit
  • settings
  • rail
Related pattern

Multi-property contextual editing; Inline Edit Field remains the single-field canonical.

Live preview

StatusReview
OwnerFlora

Quick usage

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

<EditablePropertyRail items={properties} onItemsChange={setProperties} />

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
itemsPropertyRailItem[]—Stable labelled properties with optional select choices.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Each property has a named edit action; Save, Cancel and Escape are explicit editing paths.
  • Only one property editor opens at a time and row labels remain attached to their values.

Performance

  • One editor mounts at a time; rows do not need a global event listener or overlay.

Reduced motion

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

When to use

  • Object settings, inspector rails and compact profile metadata

When not to use

  • Long forms or table cells with cross-row dependencies

Skill

Purpose

Use Editable Property Rail for compact object metadata where one property at a time should become an attached editor.

Interaction

Keep the property rows stable. Edit changes one row into an input or select with Save and Cancel; Enter saves and Escape restores the row. Other properties remain visible for context.

Usage

tsx
<EditablePropertyRail items={properties} onItemsChange={setProperties} />

Accessibility

Give every row a named Edit action and keep the property label attached to its editor. Only one editor should be active, with a clear focus target and keyboard save/cancel path.

Reduced motion

Skip row interpolation while keeping the active editor, stable labels and returned focus obvious.

Open this skill on its own page