Skip to content

Inline edit

Patterns

Let people change a value where they read it, with a clear edit mode and a clear save state.

How it works

  1. Show the value with an Edit control, or make the cell editable on Enter or F2.
  2. In edit mode, show the control with Save and Cancel; Escape cancels and Enter saves single-line values.
  3. Show the save state (Saving…, Saved, Couldn’t save with Retry) next to the edited thing.
  4. On failure, keep the edited value and explain what went wrong.

See it built: object full-screen page.

Elements

Table · DataGrid · TextField · Select · SaveState · Toast · Button

Usability

Do
  • Return focus to the value, or its Edit control, after saving or cancelling.
Don’t
  • Don’t save on blur without telling the person.
  • Don’t edit several records at once from one inline control.

Accessibility

  • Edit controls name the field they edit ("Edit due date").
  • Save state changes are announced politely.
  • Edit mode never traps focus; Tab leaves the control.

Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.

All patterns