Edit a Record with Change Tracking

ProNew

Edit an existing record in a generated form with a live list of what changed from the saved values, a Reset that restores them, and a Save that is only available when something is different. Use this when people edit saved data and want to see what they are about to change.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

An edit form shows saved values and people should know what differs before they save.

Do not use it when: For create forms there is nothing to compare against.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`record`	`{ title, status, featured }`	The saved values.
`onSave`	`(record) => void \| Promise<void>`	Called with the cleaned values.

diffRecords(before, after) is exported.

Accessibility

The change list is a labelled region with a count heading, so a screen reader can reach it by landmark; each change reads "title: Launch plan to Launch plan v2".
Reset is disabled while nothing differs; after a save the list resets to "No changes", which confirms the save without a toast.
The form is remounted on reset or save (a new key), so the controls always show the values you are told about.

Testing

The pattern ships with a Testing Library test (auto-form-edit-record.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

An edit form shows saved values and people should know what differs before they save.

Do not use it when: For create forms there is nothing to compare against.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`record`	`{ title, status, featured }`	The saved values.
`onSave`	`(record) => void \| Promise<void>`	Called with the cleaned values.

diffRecords(before, after) is exported.

Accessibility

The change list is a labelled region with a count heading, so a screen reader can reach it by landmark; each change reads "title: Launch plan to Launch plan v2".
Reset is disabled while nothing differs; after a save the list resets to "No changes", which confirms the save without a toast.
The form is remounted on reset or save (a new key), so the controls always show the values you are told about.

Testing

The pattern ships with a Testing Library test (auto-form-edit-record.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.