shadcn.io is not affiliated with official shadcn/ui
Week Grid Tutoring Contact Block for React
A tutor request for a tutoring service: a subject and a grade, then a Monday to Sunday grid of times that shows how many tutors are free in each, a live count, and a form that checks itself and confirms in place.
Installation
Overview
A tutor request for React with Base UI, built around a week. A start-aligned header sits over a split behind a divider that meets the page's rule with a plus; the contact details of the service sit at the end of the header. At the start of the split, a subject in a row of toggles (one is always on), a grade in a select, and a student's name and an email. At the end, Monday to Sunday by morning, afternoon and evening: each cell is a toggle that shows how many of fourteen example tutors are free then for the chosen subject and grade, and a cell nobody is free in is unavailable. A line above the grid counts the tutors free in the times picked and names the first two. Submitting checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid request replaces the name and the email with a confirmation, takes focus, and leaves the choices in view, locked, with "Send another request" to start again. The rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Toggle Group, Select, Status, Field, Input, Guides, Button and Shine Button, with CSS transitions for the entrances and your theme's tokens for every colour. For tutoring services, music teachers, language schools and anything that is booked by when people are free.
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 tutor desk: subject, details (name, email, grade) and chosen (the picked times that still have a tutor free) hold everything the visitor entered. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Where do the tutors and their free times come from?
TUTORS at the top of the file is fixed example data: fourteen invented tutors, each with the subjects and grades they teach and the cells of the week they are free in (like mon-eve). The number in each cell is worked out from that list for the chosen subject and grade, so it changes when either changes. In production, build the list from your calendar. None of the names is a real person.
What happens when nobody teaches a subject at a grade?
Every cell turns unavailable and the line above the grid says so ("No test prep tutors for Grades 3 to 5 yet"), so the visitor can change the subject or grade rather than submit something that cannot be matched. Picks made earlier are kept, and they come back if the subject or grade changes again. A request needs at least one picked time with a tutor free.
How does the week grid work with a keyboard and a screen reader?
It's a real table: the days are row headers and the parts of the day column headers. Each cell is a button that reports whether it is pressed, and its name says the time and who is free ("Tuesday evening, 3 tutors free"), so a screen reader hears more than the number. Tab moves between the cells that are available. The line above the grid is a polite status region, so a change in the count is spoken once.
How do the subject toggles work on each library?
One toggle is always on; pressing the one that is on does nothing. The toggle group holds a list of one item; the change handler receives the new list.
How does it fit on a phone?
The header comes first, then the subject and grade, then the grid, then the name, email and button, then the contact details, each part under its own rule. The grid is three narrow columns and shortened day names (the full names are read aloud), so nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.
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
Request a Callback Contact
Calls and meetingsA 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.
- Pro
Class Queue Waitlist Contact
Events and datesA waitlist for full classes: three session cells with the queue drawn as dots, your place shown when you tick one, and a form that confirms your place in place.
- Pro
Shift Picker Volunteer Contact
Events and datesA volunteer sign-up on ruled bands: four days of shift cells with spots left, skills as toggles, a commitment control and a form that confirms in place.
- 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
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.