Inline edit pattern

Edit a single value in place — a click-to-edit field that swaps its read view for an input, commits on Enter/blur, and reverts on Esc — without navigating to a separate form. The general pattern that the data-table cell-edit (data-table.kmd R8) specializes. Modeled after Atlassian InlineEdit. Used for page titles, card fields, settings rows, and any single editable value.

Status: v0.1.0 — Draft. Promoted from the Atlassian Design parity scan (metadocsstack #088). Source: https://atlassian.design/components/inline-edit/

R1 — When to use

Use inline edit for one value the user changes occasionally in context (a title, a status, a single field). Do NOT use it for:

  • multi-field input → a form / specs/patterns/one-thing-per-page.kmd;
  • long rich text → a dedicated editor;
  • frequently-changing controls that should always be inputs (a search box).

R2 — Read view + affordance

  • The value renders as text with an edit affordance revealed on hover

    and on keyboard focus (a pencil icon / underline) — never an invisible hit target.

  • The read view is a single keyboard-focusable control; activating it

    (click / Enter / Space) enters edit mode.

R3 — Edit mode

  • An input replaces (or overlays at the same position to avoid layout

    jump) the read view, pre-filled with the current value and selected for easy replace.

  • The input type matches the value (text, number, select, date); for a

    constrained set use a select, not free text.

R4 — Commit & cancel

  • Enter or blur/click-away commits; Esc cancels and reverts to

    the prior value; Tab commits and moves focus on (in a grid context, to the next editable cell — the specs/components/data-table.kmd R8 specialization).

  • An explicit confirm/cancel control pair MAY be shown for

    touch/ambiguous cases; the keyboard rules above still hold.

R5 — Validation & async save

  • Validate on commit; an invalid value keeps edit mode open with an inline

    error (specs/errors/user-facing-messages.kmd), never silently dropping input.

  • While saving, show a pending state (specs/interaction/states.kmd);

    on failure, revert OR re-open with the error — the user's typed value is never lost without a path to recover it.

R6 — Accessibility

  • The read view announces that it is editable ("Edit {label}"); entering

    edit mode moves focus into the input with its label associated.

  • Commit/cancel outcomes and validation errors are announced to assistive

    tech.

  • The whole cycle is operable by keyboard alone (no hover-only path).

Não-escopo

  • Multi-field forms and wizards.
  • Rich-text / WYSIWYG editing.
  • The data-table grid mechanics (cell navigation) — specialized in

    specs/components/data-table.kmd.

  • Real-time collaborative editing / presence.