shadcn.io is not affiliated with official shadcn/ui
Delivery route drawing Contact Block for React
A courier booking with two address fields, a street map that draws the route and the distance between them, and a package size and pickup window.
Installation
Overview
A pickup booking for Swiftbarrow Couriers, a courier, for React with Base UI. Pickup and dropoff are Autocomplete fields over five fictional stops. Choosing both draws a curve between the pins and states the kilometres and the minutes that pair works out to. The same two stops always give the same line. Package size is a Radio Group of small, medium and large, and the pickup window is a Segment Group of morning, afternoon and evening. On a wide screen the map sits in the end column. On a phone it sits under the two addresses. A line under the map states the chosen package size and pickup window. One form holds the stops, the size, the window and the sender's details. Name and phone are required, email is optional. The form checks itself, then a confirmation repeats that same distance. The page's rails and top rule come from the Guides spine. It's built from Autocomplete, Radio Group, Segment Group, Frame, Guides, Field, Input, Shine Button and Button, with a CSS transition on the header and your theme's tokens for every colour. For couriers and anyone booking a trip between two known stops.
FAQ
Where do the kilometres and the minutes come from?
From the two stops' positions on the map. The distance is the straight span between the pins, scaled to kilometres and rounded to one decimal. The minutes are that distance times six, and never under eight. Quay Lane to Binder Court is the pair that lands near 4.3 km. The same place twice says so and draws no curve. Until both stops are chosen, the caption asks for them. Nothing here calls a routing service. The confirmation uses the same function, so it cannot disagree with the map.
Can the visitor type any address?
No. Each field only accepts a stop from its list. Typing filters that list. A typed name has to match a stop's label, or the field stays unchosen and submit asks them to choose a stop from the list. The list is the five places at the top of the file. Replace PLACES with your own stops, each with a label, an area and a position.
Where does the form send its data?
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 both stop ids, the size, the window, the name, the phone and the optional email.
How does the form check what's typed?
The form has noValidate. On submit it requires a pickup, a dropoff, a size, a window, a name and a phone number with at least seven digits. Email is checked only when something is typed, and then it wants an @ and a domain. Size starts on medium and the window on afternoon. Each problem sits under its control, and focus moves to the first one.
What does the confirmation say?
It thanks the visitor by first name and repeats the size, both stop names, the same distance line as the map, and the window, then the phone they typed. It's a status region that takes focus. The map stays visible, and the stops, size and window stop accepting changes once the note is in. "Book another pickup" clears the stops and puts focus on the heading. It doesn't promise a driver or a tracking number.
Are the email address and phone number real?
No. desk@swiftbarrow.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0106 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS. The phone number and the map keep their order in a right-to-left layout. The map is marked dir="ltr" so the pins don't mirror.
Related
- Pro
Crew Estimate Moving Contact
Quotes and estimatesA moving quote in three bands: a home-size segment and special-item toggles, a live crew, truck and hours estimate, then distance, move date, name and email.
- 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
Stylist Booking Contact
Visits and servicesA salon booking that starts with the person: three stylists in hairline cells, each with their next three openings as chips, a live appointment line, and a form that checks itself and confirms in place.
- Pro
Budget Range Slider Contact
Quotes and estimatesA roofing quote request as a card in a card: three kinds of job, a two-thumb budget slider that says in words what the range covers, and a short form that checks itself.
- Pro
Street Map Contact
Contact formsA contact section for a print shop: a form with a team select beside a framed street-map drawing with a dashed walking route from the station, and the address and hours under it.
- Pro
Date Range Calendar Rental Contact
Events and datesAn equipment-hire request in four ruled bands: a tool select with its rates, an inline range calendar with a delivery switch, a band of hairline cells that prices the hire, then name and email.