FaqSection

A frequently asked questions section as a centered accordion, a topic rail beside grouped questions, or a searchable list that highlights matches as you type.

When to use

• Pricing, product and support pages that answer the same questions every week.
• accordion for up to about ten questions; columns when questions fall into categories; search for long lists.
• Not for a single expandable panel inside a form or card: use Accordion or ExpandableCard.
• Not for documentation with long answers, code or images; answers here are plain text.

Usage

import { FaqSection } from "@/components/iris/blocks/faq-section/faq-section";

h(FaqSection, {
  variant: "accordion",
  title: "Questions, answered",
  description: "What marketing teams ask before they connect their first brand.",
  items: [
    {
      question: "Where can Polaris publish?",
      answer: "WordPress, LinkedIn, X and Facebook. A failed publish is tried up to 3 times.",
      category: "Publishing",
    },
    {
      question: "Is there a free plan?",
      answer: "Yes. Free includes 50 generations every 30 days, 2 seats and 1 connected account.",
      category: "Plans",
    },
  ],
  contact: {
    label: "Still have a question?",
    description: "Write to us and a person on the team replies.",
    href: "/contact",
  },
});

Props

Prop	Type	Default	Description
variant	"accordion" | "columns" | "search"	"accordion"	Centered list, category rail with groups, or a filter field.
title	string	"Frequently asked questions"	Heading.
description	string	"What marketing teams ask before they connect their first brand."	Line under the heading.
items	FaqItem[]	8 sample questions about Polaris (faqExampleItems)	{ question, answer, id?, category? }. answer is plain text and is what search matches; category groups questions in columns.
multiple	boolean	false	Allow several answers open at once.
value / defaultValue	string[]	first item open	Open item ids (controlled / uncontrolled). Ids default to the question text.
onValueChange	(value: string[]) => void	none	Called when items open or close.
category / onCategoryChange	string, (category) => void	first category	Active category in columns (controlled).
query / onQueryChange	string, (query) => void	empty	Search text in search (controlled).
contact	{ label, description?, href?, onClick? } | null	"Still have a question?" card	A way to reach a person, shown under the list. null hides it.
className	string	none	Extra class on the section.

Notes

• Pass your own items: the defaults are sample questions about Polaris, a marketing writing product (grouped Product, Publishing and Plans), exported as faqExampleItems.
• Search is accent and case insensitive and wraps matches in <mark>.
• Questions are disclosure buttons with aria-expanded; Arrow Up and Down, Home and End move between them. Each open answer is a region labelled by its question, and the section is labelled by its heading.
• Reads the ink, ink-2, ink-3, line, surface, hover and accent-tint tokens; the layout follows its own width (container queries at 720, 760 and 480 px).
• Answers open their height on a spring; reduced motion opens them instantly.