Studiov0.6.0
Studio/Patterns/Accordion Section

Accordion Section

Content

Collapsible content sections for FAQ, specifications, or detailed information that benefits from progressive disclosure.

Code Example

<Accordion type="multiple" className="w-full">
  {items.map((item) => (
    <AccordionItem key={item.id} value={item.id}>
      <AccordionTrigger>{item.question}</AccordionTrigger>
      <AccordionContent>
        <p className="text-sm text-muted-foreground">{item.answer}</p>
      </AccordionContent>
    </AccordionItem>
  ))}
</Accordion>

Variants (2)

Bordered

Each item has a visible border and separator

variant= "bordered"

Flush

No borders, just divider lines between items

variant= "flush"

Guidelines

Do

  • Use clear, question-format titles
  • Keep expanded content under 200 words
  • Allow multiple items open simultaneously
  • Place most important items first

Don't

  • Nest accordions inside accordions
  • Use accordions for navigation
  • Hide critical information that users must see
  • Use more than 15 items without grouping

Use Cases

  • FAQ pages
  • Technical specification breakdowns
  • Fund terms and conditions
  • Feature detail expansion on landing pages

Details

Category
Content
Reference Component
Accordion
Variants
2
Guidelines
4 dos, 4 donts
Back to all patterns