shadcn.io is not affiliated with official shadcn/ui
Choose a Person Contact Block for React
A band of four people, each a radio cell with initials, role and reply time, that addresses the form below it: a form that names its recipient, checks itself and confirms in place.
Installation
Overview
A contact section for React with Base UI where the visitor picks who to write to. A compact header opens on a band of four people on shared hairlines that run from rail to rail, each a radio cell with initials in an Avatar, a name, a role and "Replies within a day", laid out as a 2x2 on a phone. The chosen cell gets a foreground ring and a filled radio; it addresses the form under it, whose first line reads "To: Maya Okafor" and says what she handles, and whose button reads "Write to Maya". The form is a real one: name, email and a note, each a Field with its label. Submitting it checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid note turns into a confirmation that names the person, in the same space, and the choice locks until you write another. It's built from Radio Group, Field, Avatar, Input, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour; initials stand in for photos. For studios, agencies and small teams where the right inbox matters.
FAQ
How do I change the people and what they handle?
Edit TEAM at the top of the file: each person has an id, a first name, initials, a full name, a role and a handles phrase that completes "Maya handles …". The reply line ("Replies within a day") is fixed text in PersonCell: keep it only if the people keep that promise. The invented names and the .example email in the copy aren't real people.
How is the choice built for keyboards and screen readers?
The four cells are a radio group named "Who would you like to write to?", and each cell is the label of its own radio, so a click anywhere on it chooses it.
Arrow keys move between the people and select as they go; Tab leaves the group. Each radio has an id that its label points to.
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 that routes details to the chosen person's inbox: choice holds their id.
What does a screen reader hear when I choose someone else?
The sentence under "To:" is a polite live region, so choosing a person reads out who they are and what they handle. The heading changes with it and names the form, so the form is always labelled with its recipient.
Related
- Pro
Support Channels Contact
Support and feedbackA support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which 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
Grid Cards Team
Grids and wallsTwelve people of a restaurant-software company in a hairline grid that runs from rail to rail, each an initials avatar with a name, a role, a department badge and a city, under a department picker that brings the picked team to the front and dims everyone else.
- Pro
Split Panel Team Picker CTA
Pickers and togglesA split CTA where visitors pick the engineer they want to talk to from four choice cards with initials, role and availability, a Shine Button that names their choice, and a closing band of assurances.
- 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
Card in Card Contact
Contact formsA card-in-card contact section for a bookkeeping service: the details of the desk you pick beside a raised form with a live message counter.