Unsaved Changes Form
A settings form in its dirty state with per field edited markers, revert actions, saved values, and a footer counting unsaved changes beside save.
A settings form in its dirty state with per field edited markers, revert actions, saved values, and a footer counting unsaved changes beside save.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Unsaved Changes Form is a settings form captured in its dirty state. Two fields carry an Edited marker with a per field revert action and the saved value shown underneath: Workspace name reads Acme Analytics EU over a saved Acme Analytics, and Weekly digest is switched on over a saved Off. Untouched fields, Support email and Timezone, stay plain. The footer counts two unsaved changes and pairs Discard all with Save changes.
The dirty state lives entirely in the markup: an Edited pill, a revert icon, and a Saved value helper line make it plain what changed and what each field would revert to. Edits are kept locally until you save, and the footer says so outright, so a row never has to guess whether its work is committed. It shows honest dirty state handling instead of a silent form.
Reach for this block on any settings page where a change should be reviewable before it commits, wired so the Edited markers and the footer count follow your dirty field set. Surfacing exactly what changed, and what each field would revert to, lets someone save with confidence or back out cleanly.
A natural flow around it on an Application Pro page:
Before
After
One strong use is a workspace profile with pending edits. Other dirty state surfaces:
Tip: pairing each Edited marker with its saved value is what lets someone revert one field without discarding the rest.