Autosaving Form That Waits for Valid Values

ProNew

A settings form that autosaves only while its fields are valid: an invalid value shows its error and pauses saving with a visible note, then saving resumes when it is fixed. Use this when partial invalid data must never reach the server.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

delay800

Guide and examples

When to use it

A settings or profile form has no Save button, and bad values must be held back instead of saved.

Do not use it when: If a half-finished form is acceptable, save drafts without validation.

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`	`{ displayName, website }`	sample	Starting values, counted as saved.
`save`	`(settings) => Promise<void>`	-	Called only with valid values.
`delay`	`number`	`800`	Milliseconds of quiet before saving.

validateSettings(settings) is exported; run it on the server too.

Accessibility

When a value is invalid the autosave indicator is replaced by a plain statement ("Not saved: fix the highlighted fields."), so nobody believes an invalid value was saved. The field shows its own alert and aria-invalid.
Saving resumes by itself when the values become valid; there is no hidden queue of invalid values.
Labels are visible and linked; the heading names the group.

Testing

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

Guide and examples

When to use it

A settings or profile form has no Save button, and bad values must be held back instead of saved.

Do not use it when: If a half-finished form is acceptable, save drafts without validation.

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`	`{ displayName, website }`	sample	Starting values, counted as saved.
`save`	`(settings) => Promise<void>`	-	Called only with valid values.
`delay`	`number`	`800`	Milliseconds of quiet before saving.

validateSettings(settings) is exported; run it on the server too.

Accessibility

When a value is invalid the autosave indicator is replaced by a plain statement ("Not saved: fix the highlighted fields."), so nobody believes an invalid value was saved. The field shows its own alert and aria-invalid.
Saving resumes by itself when the values become valid; there is no hidden queue of invalid values.
Labels are visible and linked; the heading names the group.

Testing

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