shadcn.io is not affiliated with official shadcn/ui
Hover Reveal FAQ Block for React Aria
A FAQ for an alterations service whose rows open as a mouse moves over them and fold back when it leaves; a click, a tap or Enter pins a row open.
Installation
Overview
A hover-to-reveal FAQ for React with React Aria. Five hairline rows run from rail to rail under a title and a one-line hint. Move a mouse over a question and its answer opens; leave the list and every row folds back, except the ones you've clicked, which are pinned open and show a small pin beside their chevron. Keyboard focus reveals a row exactly as hover does, and a tap pins one on a touch screen, so nothing depends on a pointer. The last row ends the block, so the next section's rule is its bottom edge. 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 and Guides, with CSS transitions and your theme's tokens for every colour. For short lists where a visitor skims many questions in a moment, such as service pages, menus and policies.
FAQ
Exactly what opens a row, and what closes it?
A mouse moving over a row opens it, and so does keyboard focus landing on its question (from Tab, not from a click). Rows only ever open below the one you're on, so nothing slides out from under the pointer: moving down the list keeps the rows above you open, and moving back up closes the ones below. Leaving the list, or moving focus out of it, closes everything that isn't pinned. A click, a tap, or Enter or Space on a question pins that row; doing it again lets it go.
What happens on a touch screen, or with no mouse?
Only a mouse pointer opens rows by hover: touch and pen input skip it, because there is no hover to speak of. A tap pins the row open and a second tap closes it. A keyboard user gets the same reveal from focus, and presses Enter or Space to pin a row. Every route uses the same buttons, so a screen reader announces each question as expanded or collapsed whichever way it was opened.
What does the pin mean?
It marks a row you chose to keep open. A row that's only open because the pointer is over it, or because focus is on it, shows no pin and folds back when you move on. The pin is decoration (the button's expanded state already carries the meaning for a screen reader), and the hint under the title tells sighted visitors what it's for.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found": search engines see all five, and the browser's find in page opens the answer that holds a match.
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. Tab moves from question to question, revealing each as it arrives and closing the ones below when you go back. Several rows can be open at once.
What moves, and what happens with reduced motion?
The header and the list fade up once when the page loads, an answer eases open under its question and the chevron turns. With reduced motion the entrances are off and the chevron turns without animating. The catalog's Accordion still eases an answer's height over 200 milliseconds.