FAQ Searchable
BlockFrequently asked questions filtered by a search field as you type.
- Sections
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add faq-searchableimport { DEFAULT } from "@/components/blocks/faq-searchable"; export default function Page() { return <DEFAULT />;}<FaqSearchableBlock>
| Prop | Type | Default |
|---|---|---|
defaultQueryInitial search text when uncontrolled. | string | "" |
description | ReactNode | "Search the questions to find the answer you need." |
heading | ReactNode | "Frequently asked questions" |
headingLevelLevel of the section heading. The questions stay | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
items | FaqSearchableItem[] | DEFAULT_FAQ_SEARCHABLE_ITEMS |
labelsVisible and announced text, for localisation. | Partial<FaqSearchableLabels> | — |
onQueryChange | (query: string) => void | — |
queryControlled search text. | string | — |
Plus every attribute of <section> except title.
The search field has a real (visually hidden) label, not only a placeholder that disappears once someone types. Filtering replaces the list, so the number of matches — or the no-results message — is a polite live region. Questions are accordion buttons inside headings; a new search closes the open answer, since it may no longer be in the list.