shadcn.io is not affiliated with official shadcn/ui
Topic Select FAQ Block for Svelte
A short FAQ for a bike-share with a topic Select at the end of its header: choose a topic and its questions fill the rows below, or choose All topics for all twelve.
Installation
Overview
A short FAQ for Svelte with Ark UI. A header holds the title and a sentence at its start and a Select at its end that picks a topic; below it, in hairline rows, are the questions of that topic, four of twelve to begin with. The sentence says how many are showing, and "All topics" lists every question with its topic as a badge in front. The list keeps a floor height, so switching topics doesn't collapse the page, and on a phone the Select goes full width under the title. 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, Select, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For support pages with a handful of topics and too many questions to list at once.
FAQ
How do I change the topics and questions?
Edit TOPICS and QUESTIONS at the top of the file. A topic is a label and a value, the first one, "All topics", being the value all; each question names its topic by that value. FIRST_TOPIC says which one is chosen on load: the list starts short, and the count in the sentence reads from the arrays.
How does the Select work?
It's our Select with a "Topic" label inside its trigger, so the chosen value reads "Topic Rides". Choosing a topic swaps the rows at once and the rows start closed. Arrow keys and typing move through the options, Enter chooses and Escape closes the list, as in any Select.
What do screen readers hear?
The trigger is named "Topic" and announces its value. When the choice changes, the sentence in the header, "Showing 4 of 12 questions", is a polite status, so the new count is read out. Each question is a button inside its own h3 under the section's h2.
Does the page jump when I change topic?
Not when you move between topics of the same size: the list has a floor height of four rows. Choosing All topics shows twelve rows, so the block grows by the eight extra questions you asked for, and going back shrinks it again.