shadcn.io is not affiliated with official shadcn/ui
Inline Form Stepper Block for Vue
A landscaping quote request where five numbered sections appear one by one, finished ones fold to a line with Change, and a ghost line names the section that comes next.
Installation
Overview
Show one part of a long form at a time without hiding the rest, with this inline form stepper for Vue with Ark UI. A plus-marked panel holds a numbered list of five sections: Contact, Garden, Services, Notes and Review. Only the section you are on and a one-line summary of each section before it are on the page. The next section does not exist yet, and a ghost line under the list names it ("Next: Services"). Fields come from Input, Select, Textarea and a set of tick rows, and the block's one Shine Button is Done in the open section (Request quote at the end). Change reopens a finished section in place. Review ends in a Data List with an estimate worked out from the garden size and the services picked.
FAQ
How is this different from the accordion version?
Upcoming sections are absent, not locked rows. They appear only when Done is pressed, so the page grows from one section to five. The accordion version shows every row from the start and keeps one open at a time.
Does Enter move on?
Yes. Each section is a form, so Enter in a one-line field is the same as Done. In the notes text area Enter adds a new line, as it should, and Done moves on. A section with a missing field says what is missing under it and moves focus there.
How is the estimate worked out?
Each service has a base price for a courtyard, in SERVICES, and each garden size has a multiplier in tenths, in PLOTS. The estimate adds the services after applying the multiplier and rounds each to whole dollars. It is a guide, and the block says so beside the button.
What stays local, and how do I make it real?
Everything. The answers live in component state, and Request quote ends on a line that says "Requested in this demo: nothing was sent". To make it real, send answers from the finish handler of the last section to your API.