shadcn.io is not affiliated with official shadcn/ui
Vehicle Cascade Booking Contact Block for Ark UI
A garage booking that chooses a make, then a model, then the year, mileage and services, and adds the shop hours from the services you pick.
Installation
Overview
A vehicle booking for React with Ark UI, for Torquehill Garage. The car comes first: a make Combobox, then a model Combobox that stays closed until a make is chosen and clears itself when the make changes, a model year in a Select, the mileage in a Number Input, and the services as a multiple Toggle Group. Each service carries its shop time in tenths of an hour, and the line under the toggles adds those tenths ("About 2.5 hours for 2 services"). Across a split divider are the name, the email and the send. Submitting checks every field, shows each problem under its control and moves focus to the first one. A valid booking turns into a confirmation in that same cell, repeating the car, the year, the mileage, the hours and the email. The page's rails and top rule come from Guides. It's built from Combobox, Select, Number Input, Toggle Group, Field, Input, Shine Button, Button and Guides, with CSS for the header entrance and your theme's tokens for every colour. For garages, workshops and any page where the next choice depends on the last one.
FAQ
Where does the booking 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 make, model, year, mileage, name and email, and services holds the chosen service ids. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Why does the model list depend on the make?
Each model belongs to one make. Until a make is chosen the model combobox is disabled and a line says to choose a make first. Choosing a make, or clearing it, drops the model and remounts that combobox so the typed text goes with it. The hours do not depend on the car.
Both comboboxes take a collection from useListCollection. Changing the make calls set with that make's models and clears the filter. Each item is a ComboboxItem with item.
How are the hours worked out?
Each service stores its time in tenths of an hour: oil and the battery are 5, brakes are 15, and tyres, the inspection and the alignment are 10. The line adds the tenths of the services that are on, divides by 10, and says "hour" only when the total is exactly 1. With nothing chosen it asks you to choose a service. The line is a polite live region, so a change is announced. At least one service is required.
The toggle takes value as the selected ids, multiple, and onValueChange with the next ids. Ark passes those ids on value; Base UI and Radix pass the array itself.
How is the model year select labelled?
The label above it names the control, and focus can land on it when the year is missing. Years run back from 2026, a fixed anchor, for 21 years, so the list does not depend on today's date. Each option starts with the words "Model year" and the digits sit in a bdi.
The Field takes the select's id, so its label and the hidden native select share it.
How does the mileage field keep its id?
The mileage is a whole number from 0 to 400,000. An empty field is invalid. Zero is allowed.
The Number Input root sets the input's id with ids, so the label's htmlFor matches it.
Are the email address and phone number real?
No. hello@torquehill.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0189 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. Calderbay, Heddleford, Ilexmere and Marrowick, and their models, are invented.