shadcn.io is not affiliated with official shadcn/ui
Talk catalogue Contact Block for Svelte
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 Svelte with Ark 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.