Form Autosave Status

Form autosave status: offline, error, version conflict and a useAutosave hook. Pro · Forms and input › Whole forms and filters

A quiet line that says where a form's autosave is: unsaved, saving, saved at a time, failed, waiting for the network, or in conflict with someone else's version — with the one action each state needs. Screen readers hear only the states that need attention, not every save.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add form-autosave-status

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { FormAutosaveStatus } from 'valyro-ui-pro';

Props

Prop	Type	Default
`status` *	`'idle' \| 'dirty' \| 'saving' \| 'saved' \| 'error' \| 'offline' \| 'conflict'`		Where autosave is (from `useAutosave().state.status` or your own logic).
`savedAt`	`DateInput`		Time of the last successful save.
`pending`	`number`	`0`	Value changes not saved yet (from `useAutosave`, every keystroke counts): passed to the labels.
`error`	`ReactNode`		Why the last save failed.
`onRetry`	`() => void`		Adds "Try again" to the error.
`onSaveNow`	`() => void`		Adds "Save now" while there are unsaved edits.
`onResolve`	`(choice: 'mine' \| 'theirs') => void`		Settles a conflict: keep this version or take the server's.
`onCompare`	`() => void`		Adds "Compare" to a conflict.
`variant`	`'inline' \| 'badge'`	`'inline'`	`inline` (default): text and actions; `badge`: a compact pill, actions only on problems.
`timeZone`	`string`		IANA time zone of the save time (default: the ThemeProvider's, then the reader's).
`locale`	`string`		BCP 47 locale for the time; defaults to the ThemeProvider's.
`labels`	`Partial<FormAutosaveStatusLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Form Field — Field with validation and errors
Multi-step Form — Multi-step form: per-step validation, skipping, review before submit, drafts
Filter Builder — Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary
Filter Toolbar — Catalog filter bar: result count, dropdown filters, sorting, chips
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select

Previous: Multi-step Form · Next: Filter Builder · All Forms and input