shadcn.io is not affiliated with official shadcn/ui
Live Matching Mentorship Contact Block for React
A mentor request that ranks as you choose: up to three focus areas as toggles re-rank three mentors, shown as radio rows with their overlap, beside a form that checks itself and confirms in place.
Installation
Overview
A mentor-request section for React with Base UI. A compact header sits over one form split by a divider that meets the rule under the header. At the start, six focus areas are pressed toggles (up to three; the others become unavailable at three), and under them three mentors are radio rows on shared hairlines, each with initials in an Avatar, a role, years of experience and how many of your chosen areas that mentor shares ("2 of 3 areas") with three dots. The rows re-rank as you press areas, most overlap first and the longest experience on a tie, and the mentor you chose stays chosen wherever the row moves. At the end, a live line says who you are asking and for what, followed by a name, an email and a goal. Submitting checks everything, shows each problem, marks the control invalid and moves focus to the first one; a valid request turns into a confirmation that names the mentor and the areas, in the same space. The mentors and their figures are invented. It's built from Toggle Group, 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. For mentoring networks, alumni programmes and any form where the answer you give changes the choices you see.
FAQ
How do I change the mentors and their areas?
Edit AREAS and MENTORS at the top of the file. Each mentor lists the ids of the areas they cover, a role and a number of years; the ranking is computed from those lists, so nothing else needs to change. The names, roles and the .example email are invented, and the years are example data.
How are the mentors ranked?
By how many of the chosen areas each one covers, then by years of experience when they tie, then in the order of the list. With nothing chosen the rows keep that list order and say "No areas chosen". A polite live line under the rows says which areas the list is ranked for, so a screen reader hears the change.
Why can I only choose three areas?
The limit is MAX_AREAS. Once three are pressed, the other toggles become unavailable and a line under them says to unpress one first; pressing a chosen area again takes it back at any time.
How does the keyboard work?
Each area is a toggle button, so Tab reaches them and Space or Enter presses one. The three mentors are a radio group: arrow keys move between them and select as they go.
Each radio has an id that its row's label points to, so a click anywhere on the row chooses it.
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 sends details, picked and mentorId to your matching desk. Nothing is stored in the page.
How does it fit on a phone?
The form follows the header at once and its two halves stack: the areas and the mentors first, then the request and its fields, separated by a hairline. The avatars are hidden below sm to keep the rows short, the toggles wrap onto as many lines as they need, and the submit button goes full width.
Related
- Pro
Choose a Person Contact
Contact formsA 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.
- Pro
Week Grid Tutoring Contact
Visits and servicesA 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.
- Pro
Accordion Mentorship Team
Learning and mentoringSix mentoring pairs of a coding bootcamp as hairline accordion rows, each joining two avatars with an arrow beside the pair's names; opening a row shows the goal, the roles, the sessions held on a bar and when they meet.
- Pro
Mentorship Match About
CareersTwo sides of a mentorship match for a mentoring-software company, joined by a connector, with three steps underneath for how a match is made.
- Pro
Self-Assessment Coaching Contact
Calls and meetingsA coaching request that starts with three scored sliders: Career, Health and Relationships, each with a level meter, and a computed line naming where there is most room.
- 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.