shadcn.io is not affiliated with official shadcn/ui
Birthday Room Childcare Contact Block for React
A place request for a day nursery in a card in card: a birthday in a segmented date field names the room the child belongs in, and five day toggles price the week at example rates.
Installation
Overview
A day-nursery place request for React with Base UI, in a card in card: a muted shell with + marks on its corners wraps a raised panel, under a start-aligned header. The panel is split by a hairline. At the start, the child: a first name and a date of birth in a segmented date field, with a badge naming the room the birthday falls in (Babies, Toddlers or Preschool, with its age range) and a line saying how old the child is. At the end, the days a week as five toggles, Monday to Friday, with a readout under them: the room, the price of one day, the number of days and the week's total. A tinted band along the foot holds the parent's name and email and the submit button. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation inside the same panel. It's built from Date Input, Toggle Group, Badge, Field, Input, Guides, Shine Button and Button, with your theme's tokens for every colour. For nurseries, clubs, schools and any form where one date decides what the rest of the page says.
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 your own call (your admissions inbox, a CRM or a form endpoint): the child's name, the birthday, the days, the parent's name and the email are in state. The confirmation only repeats what was sent and promises no reply time.
How does the birthday choose the room?
When the date is complete, the block counts the whole months between it and today (read when the date is entered, never during the first render) and looks for the room in ROOMS whose first and last months contain it: Babies from 3 to 11 months, Toddlers from 12 to 23, Preschool from 24 to 59. A birthday in the future, a child under 3 months or one of five and over gets a plain sentence instead of a room, and submitting says so under the date. Edit ROOMS for your own rooms and ages.
Are the prices real?
No: they are example rates, and the block says so under the readout ("Example rates, per child") and in the confirmation. The week is the room's rate (rate in ROOMS) times the number of days chosen; add your own rules (a sibling discount, a part-day rate) in the same place. Prices are wrapped so their order holds in a right-to-left layout.
How does the date field work?
It is a segmented field: month, day and year are typed or stepped with the arrow keys, and the segments move on as they fill. Its placeholders and slashes use the full muted text colour so they pass contrast, and the segment in focus is drawn in the foreground colour, not the primary. The label is the date field's own label part, wrapped around a field label.
How does the form check what's entered?
The form has noValidate, so the block shows its own messages. On submit, problems checks the child's name, that the birthday fits a room, that at least one day is chosen, and the parent's name and email (an @ and a domain). Each problem appears under its field with an icon, and focus moves to the first one, which can be the first segment of the date. Typing or choosing clears its message.
How does it fit on a phone?
Below md the two halves of the panel stack, the child first and the days under it, each part opened by a hairline, and the contact fields and the submit button fill the width. The five day toggles share the row at 320 pixels. Nothing scrolls sideways. The header and the card fade up once on load; with reduced motion they simply appear.
Related
- 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
Add Another Pet Contact
Visits and servicesA visit request for a pet sitter that grows with the household: a cell for each pet (species, name, age, vaccinations) that you add and remove, then services, a first-visit date and contact details on ruled bands.
- Pro
Table Reservation Contact
Events and datesA restaurant reservation in a card in card: a party size stepper, a date picker that closes Mondays and past days, five sittings as choices 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.
- Pro
Card Inset Metric Row CTA
Figures and statsA start-aligned card-in-card CTA for an API platform: a headline, one sentence and two calls to action, with three platform figures in a closing band across the foot of the panel.
- Pro
Floor Plan Coworking Contact
Visits and servicesA tour request for a coworking space that starts with a floor plan: four tappable zones with their vacancy, then a start date, a team size, a name and an email, checked against the zone chosen.