VOCABULARY / ENTRY

Inline Edit

inline-edit

Interaction patternsScope: Componentinline-edit · v0.1.0

Replace content in its reading position with an editing control, then return to the reading state when editing is complete.

Interactive specimen · Fictional product FIELDNOTES

Note name

Weekend walk

Recognizing it

Reading and editing share the same context
Explicit save and cancel actions
Input survives a failure

Concept boundary

Inline edit is not synonymous with autosave. Save timing, cancellation, and error handling must be specified separately.

When to consider it

Short fields are edited frequently
Nearby content provides useful context

When to be cautious

Changes require lengthy explanations or validation across several fields
Clicking outside silently discards input

Tradeoff

Context stays continuous, but the editing affordance, focus restoration, and save state need careful handling.

Conditional rules · Editorial advice

When Escape or Cancel is usedMustRestore the original value and return focus to the edit control.

When Saving failsMustKeep the draft and explain how to recover.

Query requirement:short_field = true
This specimen covers short fields; long forms need a separate evaluation of the editing flow.

Related entries

Master–Detail ↗Works with · Editing a short field in the current detail view

Preserves the selected item context.

Recognition Rather Than Recall ↗Works with · Making the edit action discoverable

Provide an explicit editing affordance.

Sources and what they support

Atlassian Design · Inline edit ↗

The component switches between reading and editing states on the same page.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "read",
    "edit",
    "error",
    "saved",
    "cancelled"
  ],
  "a11y": [
    "The edit control has an accessible name",
    "Entering edit mode focuses the input; leaving restores focus"
  ],
  "motion": "None"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.