shadcn.io is not affiliated with official shadcn/ui
Multi Step Form Reviews Block for Vue
A four-step review wizard for a bike helmet: Rate, Write, Details and Confirm in one framed form, each step checked before Next, a confirm step that repeats the review as an article, and an honest thanks.
Installation
Overview
A review wizard for Vue with Ark UI, for the Thwaitemill Crest, a fictional bike helmet. A centred header sits over one framed form with a + mark on each corner. The top band is the step list: Rate, Write, Details and Confirm, each a numbered step that opens only once you have reached it; on a phone the list folds to "Step 2 of 4: Write" with a progress bar. Step by step: a star rating you can set with the arrow keys, each star named (Poor to Excellent); a title and a text of at least 20 characters; a name to show and a Select for how long you have worn it. Next checks only its own step, writes each problem under its field and moves focus to the first one. Confirm repeats the review as an article, and Post review ends in a thanks that says nothing was sent. It's built from Steps, Rating, Field, Input, Textarea, Select, Progress, Frame, Guides, Button and Shine Button, with your theme's tokens for every colour.
FAQ
How does each step check its fields?
Next calls check(step), which runs problems(draft) and keeps only that step's fields (STEP_OF says which step each belongs to). A problem shows in a slot under its field ("Choose a rating to continue."), the field is marked invalid, and focus moves to the first one in ORDER. Editing a field clears its message. Post review checks everything once more and jumps back to the step that has a problem.
Can I jump between steps?
Back is always free. The step list only opens steps you have already reached, so you can go back to Rate from Confirm and forward again, but not skip ahead past an unanswered step. Each move puts focus on the new step's heading and says "Step 2 of 4: Write" in a polite line that only screen readers hear.
Is the review sent anywhere?
No. Post review shows a thanks that says "Nothing was sent in this demo" and repeats the review; "Write another review" starts again at step one. To keep reviews, post draft where submit says so and show the thanks when your endpoint answers.
Why doesn't the frame change size between steps?
An unseen copy of all four panels shares the live panel's grid cell, so the frame is as tall as the tallest one and Next never moves the buttons. The copy is inert and hidden from assistive technology.