shadcn.io is not affiliated with official shadcn/ui
Request a Callback Contact Block for React
A callback request with a status band and a form that asks when to ring: as soon as possible, later today from a select of 15-minute times, or on a chosen day, with a time zone.
Installation
Overview
A callback section for React with Base UI. A start-aligned header sits over a status band on its own rule with a + mark at each rail: a dot and one line, either the example wait for "as soon as possible" or the hours when callbacks are booked, both stacked in one cell so the band never changes height. Under it, the form and a short set of contact details behind a divider. The form's first question is when to call, as a segmented control: as soon as possible, later today (a select of 15-minute times that starts half an hour after the current time once the page is in the browser) or a day in the next week (a day, a time and a time zone in a native select). Name and phone follow, each in a Field. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation in the same space that says when the call was asked for, takes focus, and offers "Request another call". It's built from Segment Group, Select, Native Select, Status, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For broadband and telecom providers, banks, clinics and any business that returns calls.
FAQ
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 a call to your call-centre queue or CRM: details holds the mode, day, time, time zone, name and phone. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Is the four-minute wait real?
No. "About 4 minutes" is an example label and says so on the page ("example wait"). A wait time is a promise a server has to keep, so connect it to your queue's real figure, or remove the line and keep the hours. The band reads as a polite live region, so a change in the line is announced.
How are the callback times worked out?
TIMES holds every 15-minute step from 8:00 am to 8:00 pm. "Later today" shows only the steps at least half an hour after the current time, read once the block mounts in the browser, so the server's render never goes stale. If the day's times are over, the select says "No times left today" and submitting explains why. "Pick a day" shows the whole list, and its days are written relative to today ("Tomorrow", "In 3 days") so no date is hard-coded.
How are the selects labelled?
Each label names its select for screen readers, and focus can land on the select when its value is missing.
Each select's trigger takes the id, and the label points to it with htmlFor.
The time zone is a native select, which gives a phone its own picker.
Are the phone number and hours real?
No. +1 (415) 555-0118 is in the 555-0100 to 555-0199 range set aside for fiction. Replace PHONE, PHONE_HREF and the hours line with yours. The number keeps its order in a right-to-left layout.
How does it fit on a phone?
Everything stacks: the header, the status band (one line), the form, then the contact details under their own rule. The segmented control wraps if it has to, the day, time and zone selects go one per row, and the submit button goes full width, so nothing scrolls sideways at 320 pixels.
Related
- Pro
Month Calendar Scheduler Contact
Calls and meetingsA scheduling split: a host panel at the start; a month calendar that closes weekends and past days, the open times of the chosen day and a name and email at the end, with Confirm unavailable until a day and time are chosen.
- 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
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.
- 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
Live Indicator Banner
Live statusA heartbeat callout for a monitoring tool: a framed status dot that sends out one ring on each poll, an all-systems-operational heading, a line with how long ago it checked and the p95 latency, and a status-page link.
- Pro
Self-Assessment Coaching Contact
Calls and meetingsA coaching request that starts with three scored sliders: Career, Health and Relationships, each with a level meter, and a computed line naming where there is most room.