shadcn.io is not affiliated with official shadcn/ui
Draft Saved Stepper Block for Vue
A five-step residency application whose vertical rail shows each step as Not started, Saving, Draft or Saved while you type, with Clear draft and a Send step.
Installation
Overview
Show that nothing typed is lost, with this save-as-you-type stepper for Vue with Ark UI. A hairline frame with plus marks holds a Steps rail at the start with five numbered circles (Project, Statement, Studio, Materials and Review) whose descriptions are the save states: Not started, Saving, Draft or Saved. The open step's field sits at the end: an Input for the working title, a Textarea with a character count, a Select for the studio length and an Input for materials. Typing saves after 600 ms of quiet, the step's line moves from Saving to Saved and a polite line says "Draft saved in this demo" once. "Clear draft" empties every step. Back is free, the last step reads the draft back in a Data List, and the block's one Shine Button continues and finally sends. On a phone the rail becomes a row of numbers and the step's own state sits beside its heading. For applications, long forms and any flow people return to.
FAQ
What do the four states mean?
Not started is an empty step, Saving is text that has not been kept yet, Draft is kept text that is still short of what the step needs, and Saved is kept text that is complete. The statement needs 40 characters, the others need any text. They are worked out from two copies of the answers, the live one and the kept one, so nothing is stored twice.
What stays local, and how do I keep a draft for real?
The draft lives in this page's memory only, so it is gone when the page is closed, and nothing is sent to a server. To keep it, call your save endpoint (or write to local storage) in the debounced callback inside the write function, and load the saved answers into the initial state; the states, the status line and Clear draft already work from the two copies.
How is the 600 ms wait made?
Each keystroke clears a single timer held in a ref and starts a new one, so only the last pause saves. The timer is cleared when the block unmounts or the draft is cleared, which keeps a late save from landing on an empty form.
Why can I not send until everything is complete?
The last Shine Button is marked disabled for assistive technology rather than switched off, so it stays focusable: pressing it early says which step to finish, in the polite line. Moving between steps never needs a complete step.
How does the keyboard work?
The rail is one tab stop on the current step. Up and Down arrows move between the steps you can reach, Home and End jump to the ends, and Enter or Space opens one. Tab then continues into the field and the foot. After a Back or Continue, focus moves to the new step's heading.