shadcn.io is not affiliated with official shadcn/ui
Feedback FAQ Block for React
A centred FAQ for a scheduling app: seven accordion rows whose open answers end in a Was this helpful? foot with Yes and No, reason chips after a No, and a polite thank-you.
Installation
Overview
A feedback FAQ for React with Base UI. A centred header sits over seven questions that run from rail to rail under a rule with + marks, their text held in a centred column. Every open answer ends in a "Was this helpful?" foot: Yes and No are toggle buttons that turn to the text colour on the page colour when pressed (never the primary), and a No opens three reason chips (Out of date, Too long, Didn't answer) and a Send button. A polite status line thanks you in words, and each question keeps its own answer. Nothing leaves the page. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Toggle, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help centres and product docs where you want a signal on which answers fall short.
FAQ
How do I change the questions and the reasons?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. REASONS holds the chips shown after a No, and OPEN_QUESTION names the row that's open on load; set it to an id that doesn't exist to start with all of them closed. One answer is open at a time.
Add multiple to the Accordion to let several stay open.
Where does the feedback go?
Nowhere yet. Each answer's Yes or No, its reasons and whether you sent them live in one object per question, in the component's state, so a reload clears them. To collect them, call your own endpoint from the change function (and from the Send press in FeedbackFoot); the status line already says what the visitor did, so it needs no change.
Does anything move when I press No?
The reasons take a line of their own under Yes and No, and from sm that line is reserved in every open answer, so a No moves nothing below it. On a phone the chips wrap onto a second line and the answer grows by that much, inside the open row only. Pressing Yes or No again takes the answer back and clears the reasons.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2. Yes and No are toggle buttons in a group named "Was this answer helpful?", and the reasons are toggle buttons in a group named "What was wrong with this answer?"; each says whether it's pressed. The status line is a polite live region, and Send stays where it is and reads "Sent" afterwards, so keyboard focus is never lost.
Tab moves between the questions and the buttons in each open answer; the arrow keys don't move between questions on this base.
Are the closed answers in the page's markup?
Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all seven, and the browser's find in page opens the answer that holds a match.
What moves, and what happens with reduced motion?
The header and the rows fade up once when the page loads, and the chevron turns over as a row opens, all with CSS transitions. With reduced motion the entrance is off and the chevron turns without animating. The answers open and close at once, with no height animation.
Related
- Pro
Rating FAQ
Votes and reactionsA reverse-split FAQ for a recipe app: seven rows that each show an average rating, with a one-to-five scale at the foot of every open answer and the header beside the rows.
- Pro
Reactions FAQ
Votes and reactionsA start-aligned FAQ for a design-feedback tool: six rows whose open answers end in four reaction chips, each a face or a heart with a word and a count, plus running totals.
- Pro
Votes FAQ
Votes and reactionsA community FAQ for a product forum: six accordion rows with a vote rail at the start of each, an up arrow, a score and a down arrow, one vote per answer that can be taken back.
- Pro
Support Ticket FAQ
Contact and signupA ticket form that tries to make itself unnecessary, for a form builder: common questions at the start, and at the end a form on a card in card whose subject finds matching answers as you type.
- Pro
FAQ with Contact Card
Contact and signupAn FAQ beside a contact card for an energy supplier: seven questions in an accordion, and behind a split divider a sticky card in card with email, live chat status, phone hours and a Shine Button.
- Pro
Accordion FAQ
Accordion listsA side-header FAQ for a web analytics tool: the title, one sentence and a contact prompt beside seven questions in an accordion, behind a split divider.