shadcn.io is not affiliated with official shadcn/ui
Multi Select FAQ Block for Vue
A topic-chip FAQ for an outdoor-gear rental: any number of chips can be on, and the list shows the union of their questions, with a live count.
Installation
Overview
A multi-select FAQ for Vue with Ark UI. Under a compact header, a band holds five topic chips with the number of questions in each; any number can be on, and a pressed chip turns solid. The list below shows every question from the topics that are on, or all ten when none is, a line under the chips says what it holds ("2 topics, 4 of 10 questions") and a Clear button turns the chips off again. The chips wrap onto two lines on a phone rather than scrolling. It's built from Toggle, Accordion, Button and Guides, with your theme's tokens for every colour. For FAQs where one question often belongs to several concerns and visitors want to combine them.
FAQ
How do I change the topics and questions?
Edit TOPICS (an id and a label) and QUESTIONS (an id, the question, its answer and the topic it belongs to) at the top of the file. The number on each chip is counted from QUESTIONS, and so is the line under the chips. A question belongs to one topic; to let it match several, give it a topics array and test it with some.
Why does turning on a second chip add questions instead of narrowing the list?
The chips are a union: a question shows when any of the topics that are on matches it. With none on, every question shows. If you want an intersection, switch the filter from includes to every over a topics array.
How does it work with a keyboard and a screen reader?
The chips are toggle buttons in a fieldset named "Topics": Tab moves between them, Space or Enter turns one on or off, and each one says whether it's pressed. The count under them is a polite live region, so a change is announced without moving focus. Each question is a button inside its own h3.
In the list the Up and Down arrows also move between questions.
Does the page jump when the list shrinks?
The list keeps a minimum height of about five rows, so even the shortest result leaves the block's closing line where the eye expects it, and the Clear button stays in place (hidden, not removed) while no chip is on. A list that shrinks from ten rows to two does still get shorter, as the visitor asked it to.
Are the hidden questions still in the page's markup?
No: a question that doesn't match is removed from the page, not hidden, so only what the chips show is rendered. If search engines should see every answer, render the unfiltered list on the server and filter it in the browser, or add structured data built from QUESTIONS.