Multi-step Form Block React component
A complete create-a-workspace wizard: a step rail with checks, a name field that writes the web address with a live availability check, plan cards with a monthly or annual switch, email invites, a review page with Edit links and a success screen. Each step validates before moving on and slides in from the direction you are going.
About the Multi-step Form Block component
Multi-step Form Block walks someone through creating a workspace in four short steps: name and web address, plan, team and review. A rail on the left shows where they are and what is done, and each step slides in from the direction they are going.
The details are handled: the web address fills itself from the name and says straight away whether it is available, plan cards update their prices for annual billing, invites can be pasted as a list, and the review page has Edit links that jump back to any step. Nothing moves forward until the current step is valid.
When to use it
Use it for workspace or project creation, account setup after sign-up, checkout-style flows or any form too long for one screen.
Keep each step to one decision and put optional questions last or behind '(optional)'.
Installation
Add the Multi-step Form Block component to your project with the shadcn CLI. It lands in components/multi-step-form.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/multi-step-formOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<MultiStepForm /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Create a workspace" |
| domain Base URL shown before the slug. | string | "nexora.app/" |
| taken Slugs that are already taken (demo availability check). | string[] | ["acme", "studio", "demo", "nexora"] |
| onSubmit | (draft: WorkspaceDraft) => Promise<void> | void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Create a workspace"
- domain
Base URL shown before the slug.
stringDefault: "nexora.app/" - taken
Slugs that are already taken (demo availability check).
string[]Default: ["acme", "studio", "demo", "nexora"] - onSubmit(draft: WorkspaceDraft) => Promise<void> | void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Multi-step Form Block FAQ
- How does the availability check work?
- The demo compares the slug with the taken list. Swap that for a debounced API call and set the same three states: free, taken or too short.
- Can people go back and forth?
- Yes. Back keeps everything they typed, visited steps in the rail are clickable, and Edit links on the review page jump to the right step. Future steps unlock as they are reached.
- What does onSubmit receive?
- The whole draft: name, slug, industry, size, plan, billing and the invite list. Return a promise; the button shows Creating… until it resolves, then the success screen appears.
- Does it work on phones?
- Under about 720px the rail turns into a step counter with a progress bar, plan cards stack and the buttons stay at the bottom of the form.
- Is it accessible?
- Fields have labels, errors use aria-invalid, aria-describedby and role alert, the rail is a nav with aria-current='step', plan cards and team size are real radio inputs, and focus moves to each step's first field as you move through.
