Sticky Save Bar Dirty

ProNew

A form whose bottom bar appears only when something has changed, offering Discard and Save with a count of changed fields, saving state and an error that keeps the edits. Use this when a long phone settings or edit form should only ask to save when there is something to save.

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

Use it when a long phone settings or edit form should only ask to save when there is something to save.

Do not use it for forms that save as you type or have a single field.

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	Default	Description
`initial`	`{ name: string; email: string; phone: string }`	`required`	Saved values.
`onSave`	`(values) => Promise<void>`	`required`	Save. A rejection shows an error and keeps the form dirty.

Accessibility

The bar is a named region that appears when the form changes; "2 unsaved changes" is a polite status.
Discard restores the saved values and returns focus to the first changed field; Save disables while saving and a failure uses role="alert".
The bar does not cover the last field because the form has bottom padding while it is shown.

Testing

The pattern ships with a Testing Library test (sticky-save-bar-dirty.test.tsx) that drives it through roles and the keyboard.