Patterns

Inline Editing

Edit content in-place without navigating away. Click to edit, blur to save.

Single field

Render a read-only value. On click, swap to an input. On blur or Enter, persist and revert to display.

Name:Acme Corp

For longer content, expand a textarea on click. Auto-resize to fit. Save on Ctrl+Enter or blur.

Click here to edit this description. The textarea will appear in-place with the same padding and font size.

Update local state immediately, then sync to the server. Roll back on failure. Show a subtle spinner during the request.

Status:Active

Validate on blur. Show inline error messages. Prevent save until the value is valid.

Enter a valid email address