shadcn.io is not affiliated with official shadcn/ui
Multi-Step Campaign Form Block for Vue
A three-step email campaign form (audience, message, schedule) with a step band, a check that covers only the current step, Back that keeps values and a final summary line.
Installation
Overview
Break a campaign into three short steps with this multi-step form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, with a Steps band across the top (Audience, Message and Schedule), one pane per step and a foot with Back at the start and the one Shine Button at the end. Audience names the campaign, picks a list and a switch that skips people who have not opened in 90 days, and shows the recipient count it works out. Message takes a subject, preview text and the body. Schedule takes a day after today and an hour, and ends in a summary line of who gets what and when, which "Schedule campaign" confirms. Next checks only the fields of its own step and names what is wrong; Back keeps every value; steps you have not reached stay off. On a phone the titles give way to "Step 2 of 3" and a thin Progress bar. It is built from Steps, Progress, Input, Native Select, Switch, Textarea, Shine Button and Guides. For campaign, order and application flows with a few steps.
FAQ
How do I change the steps?
STAGES lists each step with an id, a title, a sentence and the names of its fields, and problemOf holds the rule for each field. A new step needs an entry there, a matching StepsContent pane with its fields, and a rule per field; Next only ever runs the rules of the current step.
Why does Next check only its own step?
So a person is never told about fields they have not seen yet. A refusal names the problem under the field, says how many to fix in the foot and focuses the first. Going to the next step moves focus to its heading and says where you are, and Back never clears a value.
Can I jump ahead?
No. Only the steps up to the furthest one reached can be pressed in the band; a later step is disabled. Pressing Next is the one way forward, so a step can never be skipped without passing its check.
How does it look on a phone?
The step titles become screen-reader text and a line reads "Step 2 of 3, Message" over a thin progress bar. Each pane has a fixed minimum height, so the foot stays put as you move between steps.