Loading…

FAQ Tabbed Grid

Block

Frequently asked questions in category tabs, each category a grid of always-visible answers.

Sections
1 components
1 file

Installation

The block is written to your blocks directory, and everything it is built from is installed alongside it.

$pnpm dlx @dowel-ui/cli add faq-tabbed-grid

Usage

A starting point, not a black box: render it, then edit the layout, the copy and the fields — they are yours.

app/page.tsxTSX

import { DEFAULT } from "@/components/blocks/faq-tabbed-grid"; export default function Page() {  return <DEFAULT />;}

Built from

Every piece is a component you already have documentation for, and can change independently.

Tabs

API

<FaqTabbedGridBlock>

Prop	Type	Default
`categories`	`FaqTabbedGridCategory[]`	`DEFAULT_FAQ_TABBED_GRID_CATEGORIES`
`categoriesLabel` Accessible name of the tab list.	`string`	`"Question categories"`
`defaultValue` Initial category id when uncontrolled. Defaults to the first.	`string`	—
`description`	`ReactNode`	`"Quick, complete answers to common questions about the platform, its services and its features."`
`heading`	`ReactNode`	`"FAQs"`
`headingLevel` Level of the section heading. Questions are the list's terms (`dt`), which may not contain headings, so they add no level of their own.	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`
`onValueChange`	`(value: string) => void`	—
`value` Controlled active category id.	`string`	—

Plus every attribute of <section> except title, defaultValue.

Accessibility

Categories are real tabs (a named tablist, arrow keys, one panel each) whose underline slides between them. Each panel is a description list — questions as terms, answers as details — so the pairing is announced. Icons are decorative. The staggered rise of a newly shown panel collapses to nothing under reduced motion.

Prop

Type

Default

categories

FaqTabbedGridCategory[]

DEFAULT_FAQ_TABBED_GRID_CATEGORIES

categoriesLabel

Accessible name of the tab list.

string

"Question categories"

defaultValue

Initial category id when uncontrolled. Defaults to the first.

string

—

description

ReactNode

"Quick, complete answers to common questions about the platform, its services and its features."

heading

ReactNode

"FAQs"

headingLevel

Level of the section heading. Questions are the list's terms (dt), which may not contain headings, so they add no level of their own.

1 | 2 | 3 | 4 | 5 | 6

2

onValueChange

(value: string) => void

—

value

Controlled active category id.

string

—