shadcn.io is not affiliated with official shadcn/ui
Choose a Person Contact Block for Radix UI
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 Radix 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.