shadcn.io is not affiliated with official shadcn/ui
Autosave Form Block for Ark UI
Story settings that save themselves a second after you stop typing, with a state chip (Unsaved, Saving, Saved with a version), a first save that fails and retries, a field that blocks saving until it is fixed, and Save now.
Installation
Overview
Save as people type, and tell them honestly what happened, with this autosave form for React with Ark UI. A compact header with a state chip at its end sits over a hairline frame with a plus mark on each corner. The frame holds four label-and-control rows: a title, a contact email, who can read it and a summary. Saving starts a second after typing stops, restarting on every key, and the chip walks through Unsaved changes, Saving and "All changes saved, version 4". The first save of a visit fails on purpose: the chip says "Could not save. Retrying" and the second try succeeds, so you see what a failure looks like. A field that breaks a rule does not save: with a bad email the chip and the foot say "Fix the email to save" and the field names the rule under it. The foot holds the Shine Button Save now, the only colored control, which saves at once and waits while a save is running, and a polite status line that speaks every state. The chip repeats it for the eye. It's built from Field, Input, Textarea, Native Select, Badge, Shine Button and Guides, with a CSS entrance only. For settings pages, editors, drafts and any form where a save button alone feels slow.
FAQ
How do I change the delay and the failure?
Edit PAUSE (how long typing must stop, in milliseconds), SAVE (how long a save takes) and RETRY (the wait before the second try). The scripted failure is the failed ref in begin: remove that branch and every save succeeds.
Why does a bad email stop the save?
A save that stores something the server will reject only moves the error later. The email rule runs before a save starts, and when it fails the form keeps its unsaved state and says why in the chip, the foot and under the field. Nothing is lost: the other fields save together with the next good state.
How is it announced?
The foot has the block's one polite status region, and it reads each state: "Unsaved changes. Saving when you pause.", "Saving…", "Could not save. Retrying…", "Fix the email to save…" and "All changes saved, version 4." The chip in the header is hidden from assistive tech so nothing is read twice. Save now stays focusable but inert while a save is running.
How does it look on a phone, and right to left?
The chip drops under the sentence and the rows stack, label above control. In a right-to-left page the layout mirrors, the email stays left to right, and the version number is isolated so it reads in order.
What stays local, and how do I connect it for real?
Everything: the saved versions are only a counter in this tab and nothing is sent. To make it real, call your endpoint in place of the timers in begin, send the version you last saw, and turn a conflict or a network error into the Retrying and Blocked states the chip already has. Cancel an in-flight request when the next change arrives.
How do I connect it to react-hook-form or TanStack Form?
Autosave is a subscription to the form's values plus a debounce. With react-hook-form, watch the values in an effect, debounce them and call your save, using formState.isDirty for the chip; run the email rule through the resolver so a bad value never reaches the save.