shadcn.io is not affiliated with official shadcn/ui
Live Search FAQ Block for React Aria
A searchable FAQ for a notes app: a start-aligned header, a band with a full-width search field and a live count, and ten questions that filter as you type, open every match and mark the matched words.
Installation
Overview
A searchable FAQ for React with React Aria. A start-aligned header sits over two bands: the first holds a full-width search field with a Clear button and a live count, the second ten questions in hairline rows. Typing filters the rows over the question and the answer, opens every match and marks the matched words; clearing the field, with the button or Escape, brings back the full list. The list keeps a floor height and an empty state offers a reset, so the page doesn't jump while you type. 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, Input Group, Search Highlight Text, Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For help centres, docs home pages and product pages whose questions outgrew a short list.
FAQ
How do I change the questions?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. The header's count, the placeholder and the empty state all read from the array, so nothing else needs touching. Ten questions fit about one screen; past twenty, group them by topic or add "Show more".
What does the search look at?
The question and its answer, ignoring case and accents, matching the typed text anywhere in either, so "resume" finds "Résumé". While a query is typed, every matching row opens so you can see the marked words in its answer; you can still open and close rows yourself, and clearing the field closes them all. To search only the questions, drop item.answer from matches.
How are the matches marked?
Each matched word is a real mark element from Search Highlight Text, underlined and then filled from the underline up in the foreground colour at 14%, so it reads in any theme. With reduced motion the marks are simply there. Change the tint in MARK.
Does the page jump while I type?
No. The list has a floor height, so filtering to two rows leaves the space below intact; the count above the list is the only line that changes. If nothing matches, an empty state says "No questions match" with the typed words and a Clear search button that also returns focus to the field.
Are the closed answers in the page's markup?
Yes, when no search is active. React Aria keeps every closed panel in the markup as hidden="until-found", so the browser's find in page opens the one that holds a match. While a query is typed, rows that don't match are removed.
How does it work with a keyboard and a screen reader?
The field has a name ("Search the questions"), the count under it is a polite status, so each change is announced ("4 of 10 questions"), and every question is a button inside its own h3 under the section's h2. Escape in the field clears it. Enter or Space opens and closes a row, and Tab moves between rows and the Clear button.