FAQ Accordion
BlockFrequently asked questions as bordered cards, one answer open at a time.
- Sections
- 1 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add faq-accordionimport { DEFAULT } from "@/components/blocks/faq-accordion"; export default function Page() { return <DEFAULT />;}<FaqAccordionBlock>
| Prop | Type | Default |
|---|---|---|
defaultOpenThe item open on first render, by id (or question). | string | null | — |
description | ReactNode | "Answers to the questions we hear most about the product and how it works." |
heading | ReactNode | "Frequently asked questions" |
headingLevelLevel of the section heading. The questions stay | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
items | FaqAccordionItem[] | DEFAULT_FAQ_ACCORDION_ITEMS |
Plus every attribute of <section> except title.
A section named by its heading. Each question is the accordion's button inside a heading, so questions are reachable by heading navigation, carry aria-expanded, and arrow keys move between them. The staggered entrance only hides a list that starts below the fold, and never under reduced motion.