Skip to main content

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.

Example

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 info
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