shadcn.io is not affiliated with official shadcn/ui
Feedback FAQ Block for Solid
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 Solid with Ark 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.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens, and search engines and server rendering see all seven.
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.