shadcn.io is not affiliated with official shadcn/ui
Pickup or Delivery Checkout Block for React
A fulfilment step for a timber yard: a segment control swaps the form between Pick up (a branch, its hours and a ready time worked out from the prep time) and Deliver (address fields, a window and a fee), with the total, the promise and the button following the mode.
Installation
Overview
Let people choose between collecting and having it brought, with this pickup or delivery checkout for React with Base UI. A compact header from Cobblestay, a timber and fixings yard, sits over a hairline frame with a plus mark on each corner. A Segment Group at the top swaps the form under it. Pick up shows a branch Native Select of three with their opening hours and a ready time worked out from a two-hour prep time, the fixed "now" (Friday, 10:40) and the branch's hours: "Ready today after 12:45", or the next open day when the day is too short. Deliver shows a name, a street, a city, a five-digit postcode and a delivery window, and promises the next working day. Both forms stay in the block, so switching back finds what you typed. Under them a short list gives the order, the pick-up or delivery fee and the total, the promise line follows the mode, and the only Shine Button reads "Reserve for pickup" or "Pay $64.00". For builders' merchants, florists and any shop with a counter and a van.
FAQ
How is the ready time worked out?
From the branch's typed opening times for the day: it starts at the later of "now" and opening time, adds the two-hour prep time, rounds up to the next quarter hour, and checks that this is before closing. If it is not, it tries the next day with the opening time as the start, and says "tomorrow" or the weekday. The branch and the prep time are constants at the top of the file (STORES, PREP_MINUTES) and "now" is the typed NOW_MINUTES; in your shop read the clock in the branch's time zone.
Are my entries kept when I switch modes?
Yes. Both forms are always in the page, laid in one grid cell so the panel takes the taller height and never jumps; the one you are not using is hidden from sight, from the tab order and from assistive technology. The values live in the block's state, so Pick up, then Deliver, then Pick up again changes nothing you typed.
What happens if I press Pay with the delivery form incomplete?
The button is never disabled. Pressing it marks each missing part (name, street and a five-digit postcode) with a reserved line under its field, says how many details need fixing in the polite status line, and keeps the problems in step with your typing. In Pick up mode there is nothing to fix: it reserves in the demo and says when and where.
Does the browser fill in the address?
Yes: the address fields carry the standard tokens (name, address-line1, address-level2, postal-code), so a browser or password manager can offer a saved address. Card fields are the ones to switch off, and this step has none.
How do I use it with a keyboard?
The segment control is one tab stop with arrow keys to change the mode, the branch and the window are native selects, and the fields are in reading order. The form that is not showing cannot be reached by Tab.
What stays local in the demo, and how do I wire it up?
Everything: nothing is reserved, sent or charged, and the status line says so. In your app read the branches and their hours from your stock system (and hold the items when you reserve), validate the address and the postcode on the server, create the order with the mode, and show the server's error in the same status line.