Editing a resource
Change an existing resource one section at a time, in place, with live validation and a recoverable save.
Editing happens in place, one section at a time on the resource's detail page. Each section card carries its own Edit button; opening one turns just that card into a form with its own Save and Cancel. There is no global edit mode — editing one section never blocks editing another.
Basics
When to use this pattern
How to use the pattern
Edit a section in place
Opening a section turns just that card into a form; the rest of the page stays readable, and other sections remain independently editable. It narrates "Unsaved changes" as you type and saves only that section's fields.† Keep actions near what they affect † Think in states
Basics
Validate as you go
Validation in a section edit is live and local. As you edit, fields validate inline — a red ring and a message on the field itself; there's no page-level summary because you're already looking at the one open card. A failed save lands as an alert inside the card, which stays open so you can correct and retry; success confirms with a toast.† Make errors recoverable † Think in states
A cleared required field surfaces its error inline as the user edits, and Save stays available so they can correct and retry rather than being blocked.† Validate at the right moment
Basics
Guard unsaved edits
When a section holds unsaved edits, intercept Cancel or navigation with a confirm rather than discarding silently. Confirming reverts to the last saved values; keeping editing preserves them. The guard only appears when there's something to lose.† Guard unsaved work † Every piece of UI has a lifecycle
Cancelling a card with unsaved edits, or navigating away, prompts before discarding — a clean card closes silently.† Guard unsaved work
Basics
Edit a list of nested items
Optional Applies when a section holds a list of sub-resources, each its own small form.
Some sections hold a list of items, each item its own small form. The section lists the items; Add or Edit opens a drawer that is a complete form in miniature — its own fields, validation, and Save. Closing the drawer with unsaved edits prompts before discarding, just like a section. Remove is an inline action on the row.† Reveal complexity progressively † Guard unsaved work
Tricks
Behavior
This pattern delivers one goal: change an existing resource one section at a time, in place — with every edit validated as you go and recoverable if a save fails. The checks below are how you verify an implementation delivers it.
- Read —
Each section shows values as plain text with an always-visible Edit (pencil) button.
- Editing —
The card hides its own pencil, gains a ring, and shows an inline Save / Cancel footer. Other sections stay editable.
- Saving —
Duplicate saves are disabled; progress shows in the footer.
- Saved —
The card returns to read with the new values and a success toast.
- Save failed —
An alert appears inside the card, its border turns red, and it stays open to correct and retry — no toast, no page banner.
- Cancel —
With unsaved edits, Cancel prompts a discard dialog; discarding reverts to last-saved values and closes. A clean card closes with no prompt.
- Preselected value —
A single-select enters edit with its current value already selected — never blank — even when that value isn't in the catalog list.
- Cancel after a failed save —
Cancelling a card that holds a server error reverts the values and clears the in-card alert together.
- Nested itemsOptional —
A list section adds/edits items through a drawer (its own form + validation) and removes them inline. The list updates when the drawer commits.
- Drawer unsaved guardOptional —
Closing the item drawer with unsaved edits — via Cancel, Esc, or clicking outside — prompts before discarding the in-progress item.
- Accessibility —
Entering edit moves focus into the section; saving or cancelling returns focus to that section's Edit button. Save and cancel are keyboard-operable and never silently disabled, and field errors plus the in-card save error are associated with their fields and announced.
Content & copy
Per-section save/cancel name their outcome; errors stay in context. (See the UX text style guide.)
- Specific verbs: "Save", "Cancel"; status reads "Saving…", "Unsaved changes".
- Inline field errors on the field; a server error as an in-card alert.
- Confirm a successful save with a plain toast: "Section saved".
- A page-level Save for the whole resource.
- A toast for a failed save — it belongs in the card, where the work is.
- Vague labels ("OK", "Done") or "saved successfully".
Accessibility
- Entering edit moves focus into the section; saving or cancelling returns focus to that section's Edit button.
- Save and cancel are keyboard-operable; the save action is never silently disabled.
- Field errors are associated with their fields and announced as the user edits.
- The in-card save error is announced and the card stays open for correction.
Related patterns
- Resource detail — the read-first page editing happens on.
- Creating a resource — provisioning, which validates differently (a submit-time summary).