Skip to main content

​
FAQs

FAQ accordion component with expandable/collapsible question-answer pairs. Only one question can be expanded at a time.

​
Import

import { FAQs } from '@adoptaunabuelo/react-components';

​
Props

​
options
Array<FAQOption>
required
Array of FAQ items with question and answer
​
onClick
(index: number) => void
Callback fired when FAQ item is clicked, receives item index
​
style
React.CSSProperties
Custom styles for the container

​
FAQOption

​
id
string
required
Unique identifier for the FAQ item
​
title
string
required
Question text (always visible)
​
description
string
required
Answer text (visible when expanded)

​
Usage

<FAQs
  options={[
    {
      id: "1",
      title: "How do I get started?",
      description: "To get started, simply..."
    }
  ]}
  onClick={(index) => trackFaqClick(index)}
/>

​
Notes

  • Only one FAQ can be expanded at a time
  • Clicking an expanded FAQ collapses it
  • Chevron icon indicates expanded/collapsed state (ChevronUp/ChevronDown)
  • Hover effect adds underline to collapsed questions
  • First question (index 0) is expanded by default
  • Questions use medium weight text, answers use regular weight

Build docs developers (and LLMs) love

Get started for freeTalk to us