shadcn.io is not affiliated with official shadcn/ui
Request a Callback Contact Block for Ark UI
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 Ark 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 Field takes the select's id, so its label and the hidden native select share it, and focusing that select passes focus to the button. 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.