FAQ Categorized
BlockFrequently asked questions in topic tabs, each topic an accordion of answers.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add faq-categorizedimport { DEFAULT } from "@/components/blocks/faq-categorized"; export default function Page() { return <DEFAULT />;}<FaqCategorizedBlock>
| Prop | Type | Default |
|---|---|---|
categories | FaqCategorizedCategory[] | DEFAULT_FAQ_CATEGORIZED_CATEGORIES |
categoriesLabelAccessible name of the tab list. | string | "Question topics" |
defaultValueInitial category id when uncontrolled. Defaults to the first. | string | — |
description | ReactNode | "Answers, organised by topic." |
heading | ReactNode | "Frequently asked questions" |
headingLevelLevel of the section heading. The questions stay | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
onValueChange | (value: string) => void | — |
valueControlled active category id. | string | — |
Plus every attribute of <section> except title, defaultValue.
Topics are real tabs — a named tablist with arrow keys and a panel each — where the source had buttons with role=tab and no panels. Each question is an accordion button inside a heading. Changing topic closes the open answer, since it belongs to the topic being left. The staggered entrance collapses to nothing under reduced motion.