shadcn.io is not affiliated with official shadcn/ui
Project Brief Wizard Contact Block for React
A design-studio brief in three steps, with Back and Next, a review of what was typed, and a confirmation that repeats the brief.
Installation
Overview
A project brief wizard for React with Base UI, for Plainframe Studio. Three steps sit in a Frame: You (name, email, company), Project (a kind of project, a timing and a short brief) and Review, which lists what was entered. Back and Next are the studio's own buttons. A step opens only once the ones before it have been accepted, and choosing an answer never moves you on. Next checks the step you are on, shows each problem under its field and moves focus to the first one, then to the next step's heading. On the last step the same button sends the brief, and if something earlier is missing it jumps back to that step. The confirmation repeats the name, the company, the kind, the timing, the email and the brief, in the same frame. The page's rails and top rule come from Guides, and the frame's corners carry their own plus marks. It's built from Steps, Select, Textarea, Field, Input, Frame, Frame Panel, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For studios, agencies and any page where a short form is easier as a few steps.
FAQ
Where does the brief go?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the name, email, company, kind of project, timing and brief. Show the confirmation when the request succeeds, and an error line when it doesn't.
Can someone skip ahead?
No. The step triggers past the first unanswered step are disabled. Back returns to a step that has already been opened, and it does nothing on the first step. Choosing a kind or a timing does not advance. Next is the only way forward, and it checks that step first. The Steps parts themselves are the same control on every base.
Back is a button with onClick and disabled on the first step.
What does the review step show?
A list of the name, email, company, kind of project, timing and brief. An empty value reads "Not entered yet", which only happens if someone reaches Review another way. The final send checks every field again and, if one fails, opens the step that owns it.
How are the project selects labelled?
Kind of project and Timing each have a label, and focus can land on the missing one.
The trigger takes the id, and the label points to it with htmlFor.
Why doesn't the frame jump between steps?
An invisible copy of all three panels sits in the same grid cell and sets the height to the tallest one. The copy is inert and hidden from assistive technology, and its ids are prefixed so they are not the ones focus looks up. Switching steps changes the visible panel only.
Are the email address and phone number real?
No. hello@plainframe.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0191 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file. The phone number keeps its order in a right-to-left layout.
Related
- Pro
Patient Intake Steps Contact
Visits and servicesA four-step new-patient intake on a card in card: who you are, history, consent signed on a pad or typed, and a review where each answer has an Edit button.
- Pro
Enrolment Steps Contact
ApplicationsAn enrolment request for a day school in four steps: the student, the programme, the parent and a review where every answer has an Edit button.
- Pro
Order Lookup Contact
Support and feedbackAn order desk that looks the order up first: a number and email, a read-only timeline with dates counted from today, then a help form that wakes once an order is found.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Wizard FAQ
Steps and plansA FAQ that shows one question at a time for an analytics tool: a numbered step list, the active question and answer, and Previous and Next buttons in a card in card.
- Pro
Centered Multi Step Form Hero
Signup and waitlistA centered signup hero whose form is a three-step wizard in a card in card, account, plan and payment, that checks each step's fields before the next and ends on a confirmation.