FAQ

An accordion‑style FAQ section featuring animated expand/collapse. It provides a clean design with configurable single‑ or multiple‑open questions. Use this component for question/answer pairs; for generic collapsible content, choose the Accordion component instead.

Use Cases

• FAQ section on landing pages
• Help/support pages
• Product information pages
• Pricing page – address common billing questions

Properties

heading

Section heading displayed above the FAQ list. Type: string. Default: Frequently Asked Questions

subheading

Optional subheading below the heading. Type: string.

items

Array of question/answer pairs. Type: array.

allowMultiple

When false, opening a new question closes the previous one (accordion). When true, multiple can be open. Type: boolean. Default: false

customCss

Custom CSS property pairs. Type: string.

Best Practices

• Use 4-8 questions for a good section length
• Start with the most common/important questions
• Keep answers concise but complete (2-4 sentences)
• Use allowMultiple: false for cleaner UX (default)
• Always customize questions to match the specific app/business context

Common Mistakes

Using generic placeholder questions

Why it's a problem: FAQ should address real user concerns for the specific app being built

Fix: Write questions specific to the app’s domain (e.g., for a restaurant app: ‘How do I modify my reservation?’)

Writing answers that are too long (5+ paragraphs)

Why it's a problem: Long answers break the accordion pattern — users expect quick answers

Fix: Keep answers to 2-4 sentences. Link to docs for detailed information.