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"
}

Full Agent entry JSON

{
  "id": "inline-edit",
  "type": "interaction",
  "name": {
    "zh": "行内编辑",
    "en": "Inline Edit"
  },
  "aliases": [
    "就地编辑",
    "edit-in-place"
  ],
  "granularity": "component",
  "intents": [
    "edit-in-place",
    "configure"
  ],
  "tags": [
    "editing",
    "save",
    "cancel",
    "text",
    "non-modal"
  ],
  "definition": "Replace content in its reading position with an editing control, then return to the reading state when editing is complete.",
  "boundary": "Inline edit is not synonymous with autosave. Save timing, cancellation, and error handling must be specified separately.",
  "signature": [
    "Reading and editing share the same context",
    "Explicit save and cancel actions",
    "Input survives a failure"
  ],
  "when": [
    "Short fields are edited frequently",
    "Nearby content provides useful context"
  ],
  "when_not": [
    "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.",
  "comparison": {
    "focus": "Changing content in place",
    "mechanism": "Switching between reading and editing",
    "cost": "Managing unsaved values, validation, and focus"
  },
  "sources": [
    {
      "id": "atlassian-inline",
      "title": "Atlassian Design · Inline edit",
      "url": "https://atlassian.design/components/inline-edit",
      "claim": "The component switches between reading and editing states on the same page.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://atlassian.design/components/inline-edit",
        "status": "available",
        "checkedAt": "2026-09-15T16:50:40.136Z",
        "jobId": "spn2-d931b84ec728ee359a86e37a9b3be6dec300eae6",
        "url": "https://web.archive.org/web/20260915165217/https://atlassian.design/components/inline-edit",
        "timestamp": "20260915165217"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "composes_with",
      "condition": "Editing a short field in the current detail view",
      "reason": "Preserves the selected item context.",
      "basis": "editorial"
    },
    {
      "target": "recognition",
      "kind": "composes_with",
      "condition": "Making the edit action discoverable",
      "reason": "Provide an explicit editing affordance.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Escape or Cancel is used",
      "instruction": "Restore the original value and return focus to the edit control.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Saving fails",
      "instruction": "Keep the draft and explain how to recover.",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "requirements": [
    {
      "fact": "short_field",
      "value": true,
      "reason": "This specimen covers short fields; long forms need a separate evaluation of the editing flow."
    }
  ],
  "behavior": {
    "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"
  },
  "demo": "inline-edit",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
  "searchTerms": [
    "编辑",
    "保存",
    "取消",
    "文本",
    "非模态"
  ]
}