shadcn.io is not affiliated with official shadcn/ui
Live Matching Mentorship Contact Block for React Aria
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 React Aria. 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.
React Aria's toggle group takes its keys as ids, so the areas use selectedKeys rather than a value list.
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.