Interactions · Editing
Inline Edit
Also called: Inline editing, Edit in place, Click to edit, Editable cell
Click and edit right where the content is shown, with no page change or dialog. Press Enter or click outside to save.
In detail
Inline editing is common in table cells, document titles, tag names, and profile fields. Normally it shows as plain text. On hover, a light background or a small pencil icon hints that it's editable. Clicking turns it into an input in place. Pressing Enter or moving focus away saves, and pressing Esc cancels.
Compared with editing in a dialog, inline editing is good for changing one or two simple fields. It's fast and doesn't break the user's context. If you need to change many fields, or fields depend on each other, use a dialog, a drawer, or a separate edit page.
Details to spell out: when it saves (Enter, blur, or a save button), what it looks like while saving and when saving fails, how to show invalid input, and whether only one cell can be edited at a time.
Developer infoTerm ID, DOM cues, match priority
- Term ID
interaction-inline-edit- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026