Design Inline Editing
Forms & Inputs · forms, tables, undo
Updated 2026-07-28
- Use inline editing for small corrections in context, and a full form for anything with several related fields or real consequences.
- Make editable values look editable before they are clicked. A field that only reveals itself on hover is invisible on touch and undiscoverable for everyone else.
- Never let the layout jump on entry. Reserve the input's size in the read state so switching modes does not reflow the row and move the next target.
- Define how an edit ends, and be consistent everywhere:
- Enter commits.
- Escape cancels and restores the previous value.
- Clicking away commits for low-risk fields and prompts for risky ones.
- Tab commits and moves to the next field.
- Show the result immediately and confirm it quietly. An optimistic update with a small saved indicator is enough, and a modal confirmation is far too much.
- Roll back visibly on failure. Put the value back, explain why, and keep what the user typed so they do not have to retype it.
- Validate in place. Sending the user to another screen to fix a two-character mistake defeats the point of editing in place.
- Support keyboard navigation across cells in a table. Inline editing that only works with a mouse turns bulk correction into a slow chore.
Inline editing succeeds when it removes a round trip, and fails when it hides the fact that something changed.
Related guides
UX Handbook