# FAQ section

> Searchable FAQ with category filters, an accordion and a contact fallback.

Block · Pro · https://lodeui.com/blocks/faq-section

## When to use

- Pricing pages and help sections with 6+ common questions.

## When not to use

- Long documentation: use the help center.

## Installation

```bash
npx shadcn@latest add @lode/faq-section
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { FaqSection } from "@/components/blocks/faq-section";

<FaqSection faqs={[{ category: "Billing", q: "Can I cancel?", a: "Any time, from Billing." }]} contact={{ label: "Email us", href: "mailto:help@acme.com" }} />
```

Built from: Accordion

## API reference

### FaqSection

Search plus category chips over an accordion. Also the default export.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title / description | `string` | – | Heading. |
| faqs | `{ q; a; category }[]` | – | Questions; categories become filter chips. |
| contact | `{ label; href }` | – | Fallback action. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through search, categories and questions |
| Enter / Space | Open a question |

## Accessibility

- Categories are a radio group; results update in a polite live region.
- Accordion headers use aria-expanded.

## Motion

- The category pill slides; results cross-fade on filter; answers expand by height.

## Responsive behavior

- Single column; chips wrap.

## Performance

- Filtering is local and instant.

## Notes for AI

- Keep answers to 1–3 sentences.

## Related

- [Accordion](https://lodeui.com/components/accordion) — Expandable sections with smooth height and a turning plus.
- [Help center](https://lodeui.com/blocks/help-center) — Help center with instant search, topics, article reader and feedback.
- [Pricing comparison](https://lodeui.com/blocks/pricing-comparison) — Plan comparison table with sticky headers, yearly toggle and a mobile plan picker.