shadcn.io is not affiliated with official shadcn/ui
Trip Planner Itinerary Contact Block for React
A trip request in three steps with an itinerary beside it that fills in as you answer, with a place, a departure day, travellers, a style and an example price.
Installation
Overview
A trip request for Wayhollow Journeys, a fictional tour operator, built for React with Base UI. Three Steps (Where and when, Who and style, You) sit in cells that each show a one-line summary of the answers. Step one has a searchable Combobox of twelve places, a Date Picker for the departure day that greys out days that have passed, a Number Input for the nights, and a Switch for flexibility of three days. Step two has Number Inputs for adults and children and a Radio Group of four trip styles. An itinerary sits first on a wide screen, behind a split divider, and last on a phone: a route line and a list of stops that turn solid as they are answered, with the dates counted from the departure, the travellers and an example price worked out from the place, the nights, the party and the style. Next checks only its own step and moves focus to the first problem; the last step checks everything. The status line says what was noted and that nothing is sent in this demo. It's built from Steps, Combobox, Date Picker, Number Input, Switch, Radio Group, Textarea, Field, Guides, Shine Button and Button, with your theme's tokens for every colour.
FAQ
Where does the trip request go?
Nowhere. The last step checks the fields and shows a status line that repeats the place, the dates and the example price, and says that nothing is sent in this demo. Replace the setDone call in submit with your own request: details holds the place, nights, travellers, style and contact, depart the departure day and flexible the switch.
Can someone skip ahead?
No. Steps past the furthest one reached are disabled, so Next is the way forward, and it checks the step you are on first. Back and the step cells return to a step you have already seen, and the answers stay where you left them. The three panels share one height, so the form does not jump between steps.
How is the example price worked out?
Each place has a nightly figure per adult, a style scales it (city breaks 90 percent, culture 100, coast 110, mountains 120), a child counts as half an adult, and the total is that times the nights. The figures are invented and the block says they are examples, not an offer. Until a place and the nights are known the price row says what it needs.
Where do the dates come from?
The visitor's departure day, plus the nights, written out with a fixed formatter in UTC. Days that have passed (by the visitor's clock) cannot be picked. Nothing else reads the clock, and the Flexible switch only adds "give or take 3 days" to the line.
How does the destination list work?
Choosing a place clears its error and starts the route line and the first stop. The field is a searchable input with a list under it: typing narrows the list and choosing a place fills the field. If nothing matches it says "No place found."
How does it fit on a phone?
Below lg the layout is one column: the header, the steps (their cells show only the step names), then the itinerary under a rule. Every field keeps a one-line slot for its message, so the fields never move when an error appears. trips@wayhollow.example and +1 (503) 555-0164 are fictional.
Related
- Pro
Project Brief Wizard Contact
Contact formsA design-studio brief in three steps, with Back and Next, a review of what was typed, and a confirmation that repeats the brief.
- 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
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
Move-date checklist Contact
Quotes and estimatesA move request for a relocation firm where the arrival date writes a six-task checklist, with a searchable destination and a household stepper beside it.
- Pro
Session picker Contact
Events and datesA retreat request with session rows across three days, a capacity bar on each, a room choice, and a running example total for the nights.
- 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.