shadcn.io is not affiliated with official shadcn/ui
Sortable FAQ Block for Solid
A FAQ for a garden-planner app whose questions really sort: a three-way control in a narrow start column reorders eight rows by most asked, newest or A to Z.
Installation
Overview
A sortable FAQ for Solid with Ark UI. A narrow start column holds the title, a sentence and a pill-shaped control with three choices, Most asked, Newest and A to Z; the eight questions sit in the end column behind a split divider that runs from the page's top rule to the block's end. Choosing a sort moves the rows and says so in words under the control. Each row carries its key: how often it's asked, such as "2.1k asks", and a "New" badge on the latest additions. Nothing changes height. On a phone the header stacks above the rows and the control goes full width. It's built from Accordion, Segment Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For help centres where popularity, freshness or alphabet each help a different reader.
FAQ
How do I change the questions and their keys?
Edit QUESTIONS at the top of the file: each entry has an id, the question and its answer, asks (how often it was asked, a number) and order (its place in the order the questions were written, higher is newer). NEW_FROM is the order from which a question carries the "New" badge. SORTS holds the three choices; add one by adding a case to sorted.
How does the sorting work?
sorted returns a copy of the questions in the order the choice asks for: by asks high to low, by order high to low, or by the question's text with the browser's alphabetical order. The rows are the same elements in a new order, so a row you opened stays open after the sort.
What do screen readers hear?
The control is a group named "Sort the questions" with three options, and the line under it, "Sorted by A to Z", is a polite status that is read out when you choose. Each question is a button inside its own h3 under the section's h2, and the count of asks is part of the button's name.
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.
Where do the numbers come from?
They're sample counts in the data: wire asks to your own help-centre analytics, or drop the figure and sort by order alone. They're written with compact, which turns 2140 into "2.1k"; in right-to-left layouts the number keeps its reading order.
How does it work with a keyboard?
Tab moves from the control to the first question and on down the rows; Enter or Space opens one. The control is a radio group: arrow keys move between its three choices and choose as they go. The Up and Down arrows also move between questions, and Home and End jump to the first and last.