Accordion

Collapsible content sections that help organize information into digestible chunks. Perfect for FAQs, settings panels, and navigation groups.

Basic Accordion

Single-open accordion where only one section can be expanded at a time.

import { Accordion, AccordionItem } from '@/components/ui/Accordion';

const items: AccordionItem[] = [
  {
    id: 'section-1',
    title: 'Getting Started',
    content: <div>Your content here...</div>
  },
  {
    id: 'section-2', 
    title: 'Advanced Features',
    content: <div>More content...</div>
  }
];

<Accordion items={items} />

Multiple Sections Open

Allow multiple sections to be expanded simultaneously.

<Accordion 
  items={settingsItems} 
  allowMultiple={true}
/>

FAQ Style

Clean, minimal styling perfect for frequently asked questions.

<Accordion 
  items={faqItems} 
  variant="minimal" 
/>

Bordered Variant

Each section has a bottom border for visual separation.

<Accordion 
  items={basicItems} 
  variant="bordered" 
/>

Disabled States

Some sections can be disabled to prevent interaction.

const items: AccordionItem[] = [
  {
    id: 'available',
    title: 'Available Section',
    content: <p>This section is available.</p>
  },
  {
    id: 'disabled',
    title: 'Disabled Section',
    disabled: true,
    content: <p>This content cannot be accessed.</p>
  }
];

Props

Accordion Props

PropTypeDefaultDescription
itemsAccordionItem[]-Array of accordion sections
allowMultiplebooleanfalseAllow multiple sections open at once
variant'default' | 'bordered' | 'minimal''default'Visual style variant
classNamestring-Additional CSS classes

AccordionItem Interface

PropertyTypeRequiredDescription
idstringYesUnique identifier for the section
titlestringYesSection header text
contentReact.ReactNodeYesSection content
defaultOpenbooleanNoWhether section starts expanded
disabledbooleanNoWhether section is disabled

Best Practices

When to Use

  • Content Organization: Break long content into digestible sections
  • FAQs: Present frequently asked questions in an organized manner
  • Settings Panels: Group related configuration options
  • Navigation: Create collapsible navigation sections

Accessibility

  • Keyboard navigation with arrow keys and Enter/Space
  • Proper ARIA attributes for screen readers
  • Focus management and visual focus indicators
  • Semantic HTML structure with buttons and regions

Design Guidelines

  • Use clear, descriptive section titles
  • Keep content sections focused and not too long
  • Consider using icons to provide additional context
  • Use the minimal variant for content-heavy sections
  • Prefer single-open behavior unless users need to compare content