FAQ section

FAQs as an accordion, a topic rail, or a searchable list that highlights matches.

import { FaqSection } from "@/forma/arc/blocks/faq-section/faq-section";

Base

In FORMA

Liegt in kit/arc/blocks/faq-section und ist über @/forma/arc/blocks/faq-section/faq-section erreichbar.
Farbe, Ecken, Höhen, Abstände, Tiefe, Schrift und Tempo kommen aus der Richtung (core/arc-bridge.ts); Arc behält Verhalten, Tastatur und Federn.

When to use

FAQ sections on pricing, product, and support pages.
Long FAQs that benefit from categories or live search.

When not to use

Use accordion for generic collapsible content that is not a question list.
Use a docs page when answers need code, images, or long structure.

Usage

import { FaqSection } from "@/forma/arc/blocks/faq-section/faq-section";

export function PricingFaq() {
  return (
    <FaqSection
      variant="search"
      title="Questions about billing"
      items={[
        { question: "Can I cancel anytime?", answer: "Yes. Your plan stays active until the end of the billing period." },
        { question: "Do you offer refunds?", answer: "We refund annual plans within 14 days of purchase." },
      ]}
      contact={{ label: "Talk to billing", href: "mailto:billing@example.com" }}
    />
  );
}

API reference

FaqSection

An FAQ in three layouts: one centered accordion, questions grouped beside a category rail, or a list that filters as you type.

Prop	Type	Default	Description
`variant`	`"accordion" \| "columns" \| "search"`	`"accordion"`	Layout.
`title`	`string`	`"Frequently asked questions"`	Section heading.
`description`	`string`	–	One line under the heading.
`items`	`{ id?: string; question: string; answer: string; category?: string }[]`	`faqExampleItems`	Questions. answer is plain text and is what search matches. category groups the columns variant.
`multiple`	`boolean`	`false`	Allow several answers open at once.
`value`	`string[]`	–	Open item ids (controlled). Ids default to the question.
`defaultValue`	`string[]`	–	Initially open ids when uncontrolled.
`onValueChange`	`(value: string[]) => void`	–	Called when answers open or close.
`category`	`string`	–	Active category in the columns variant (controlled).
`onCategoryChange`	`(category: string) => void`	–	Called when the category changes.
`query`	`string`	–	Search text in the search variant (controlled).
`onQueryChange`	`(query: string) => void`	–	Called as the search text changes.
`contact`	`{ label: string; description?: string; href?: string; onClick?: () => void } \| null`	–	A way to reach a person when the answer isn't here. Pass null to hide it.
`className`	`string`	–	Extra class on the section.

FaqSectionBlock

Default export: a preview with a layout switcher.

Prop	Type	Default	Description
`variant`	`FaqSectionVariant`	`"accordion"`	Initial variant.

Keyboard interactions

Keys	Action
ArrowUp / ArrowDown	Move between questions in one list.
Home / End	First or last question.
Enter / Space	Opens or closes the focused answer.

Accessibility

Questions are buttons with aria-expanded controlling their answer region.
Search matches are wrapped in mark elements; closed items that match only in the answer show a short excerpt.
The search variant uses Arc SearchField with a real label.

Motion

Answers open with height and opacity together and the plus icon turns.
Filtering and category changes move remaining items with layout animation.
Reduced motion opens and filters instantly.

Responsive behavior

Container queries: below 760px the category rail becomes a horizontal scrolling row above the questions; below 480px padding tightens.

Performance

Search filters in memory on each keystroke; fine for dozens of items, not thousands.

Notes for AI

Keep answers plain text; the search variant matches and highlights inside them.
Pass stable ids when questions may be reworded, so controlled open state survives edits.
Composes Arc SearchField and SegmentedControl.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt

ZurückHero section WeiterContact section

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.