shadcn.io is not affiliated with official shadcn/ui
Talk catalogue Contact Block for React
A speaker request that starts with a catalogue of four talks, then a form that carries the chosen talk, the audience size and the event date.
Installation
Overview
A booking request for Dr. Nessa Halvick, built for React with Base UI. A Listbox at the start offers four talks, each with a title, a length and a level, and one is selected to begin. The form beside it repeats that talk, then asks for an audience in a Number Input (10 to 400), an event date in a Date Input, a name, an email and an optional note. On a phone the catalogue comes first and the form follows. Submitting checks the talk, the audience, a complete date from today onward, the name and the email, then confirms in the form's cell with the talk, the audience and the date. It's built from Field, Input, Textarea, Listbox, Number Input, Date Input, Guides, Shine Button and Button.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. The request is the talk id, the audience, the event date, the name, the email and the optional note. The block does not promise a hold on the date.
How does the talk catalogue work?
Four talks live in TALKS. The list is a single-select Listbox, and "Attention is a budget" is selected to start, so the form always carries a talk. Choosing another talk updates the line at the top of the form ("Requesting…") and clears a missing-talk message. The selected row uses a muted fill rather than a coloured one. The catalogue comes before the form in the source, and on a phone it stays above the form.
How is the event date checked?
The Date Input stays empty until month, day and year are all set. A complete date is a year-month-day value. Anything incomplete asks you to enter the event date. A complete date before today (read from the visitor's clock when they submit) asks for today or a later day. The confirmation prints the date from that value, for example "2 Nov 2026".
How does the form check what's typed?
The form has noValidate. On submit, problems checks the talk, an audience of 10 to 400, the date, a name, and an email with an @ and a domain. The note is optional. Each problem appears under its field with an icon, the control is marked invalid, and focus moves to the first one. Choosing a talk, changing the audience, completing the date, or typing, clears that field's message.
What does the confirmation say?
It thanks the visitor by first name and repeats the talk title, the audience and the event date. It's a status region that takes focus, and "Request another talk" restores the first talk, an audience of 80 and an empty date, and puts focus on the form heading. The two-business-day reply stays under the button.
How does it fit on a phone?
Below lg the split stacks: the header, the four talks, then the form, with a rule and + marks between the catalogue and the form. Name and email go one per row below sm, and the submit button goes full width. Under 360 pixels the contact labels shrink to their icons. The header fades up once; with reduced motion it simply appears. book@halvick.example and +1 (555) 010-0136 are fictional.
Related
- Pro
Ranked Interview Slots Contact
Calls and meetingsAn interview scheduler where the candidate ranks up to three of eight offered times, reorders them with buttons, and picks a time zone from a searchable list, in two cells that share their hairlines.
- Pro
Enrolment Steps Contact
ApplicationsAn enrolment request for a day school in four steps: the student, the programme, the parent and a review where every answer has an Edit button.
- Pro
Agenda Builder Demo Contact
Calls and meetingsA demo request that builds its own agenda: four product parts as pressable choices, an ordered agenda with start minutes, a bar against the 30-minute mark and a form that checks itself and confirms in place.
- Pro
Press Kit Contact
Partners and creatorsA press desk with a press kit of three real files that download from the page beside a press form with an inquiry switch and a deadline date picker that marks a date within two days Rush.
- 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 Matching Mentorship Contact
Calls and meetingsA mentor request that ranks as you choose: up to three focus areas as toggles re-rank three mentors, shown as radio rows with their overlap, beside a form that checks itself and confirms in place.