shadcn.io is not affiliated with official shadcn/ui
Answers First Contact Block for React Aria
A contact form that tries to answer first: five numbered answers in an accordion beside a form whose subject field opens the answers that match, then checks itself and confirms in place.
Installation
Overview
A contact section for React with React Aria that gives the answer a chance before it takes a message. At the start, under a compact header, five numbered answers sit in an Accordion with a live count; at the end, behind a split divider that meets the page's top rule with a + mark, "Still need help?" opens a form: name, email, subject and message, each a Field with its label. Typing the subject opens the answers whose words match (at most two, so the list keeps its height) and marks them "Match"; words found in most answers, such as "notes", are left out unless nothing else matches. Submitting the form checks every field, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid message turns into a confirmation in the same space, which takes focus. On a phone the form comes straight after the header and the answers after it. It's built from Accordion, Badge, Field, Input, Textarea, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For help centres, product docs and any form that gets the same five questions every week.
FAQ
How does the subject open the right answers?
The subject is split into words of four letters or more, folded to lower case without accents, and each word is looked for in an answer's question, text and a hidden hints string. A word that appears in more than three of the five answers is too common to help and is dropped, unless it is all there is. The first two matches open and every match gets a Match badge; clearing the field closes everything again. Edit ANSWERS, COMMON and MAX_OPEN to fit your own help centre.
How does the accordion behave with the keyboard?
Each answer's question is a button inside a heading, so screen readers can list the questions. Typing the subject opens rows for you; you can still open and close any row yourself. Every row opens and closes with Enter or Space. How arrow keys move between rows differs by library, so test the one you ship.
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: details holds the name, email, subject and message. The address in the note under the button, help@quillnest.example, is on the reserved .example domain.
What does the count line say, and who hears it?
Before anything is typed it says how many answers there are; while typing it says how many match ("1 of 5 answers match your subject") or that none do. It's a status region, so a screen reader hears it only when the count changes, not on every keystroke. The subject field points to it with aria-describedby.