Accordion

Expandable sections for organizing content. Only one section is open at a time by default.

Storybook documentation (opens in new tab)

React

<Accordion>
  <AccordionItem label="Section 1">
    <Text>Content for section 1</Text>
  </AccordionItem>
  <AccordionItem label="Section 2">
    <Text>Content for section 2</Text>
  </AccordionItem>
</Accordion>

CSS

<div class="accordion">
  <div class="accordion_item">
    <button class="accordion_control" aria-expanded="false">
      <span class="accordion_header">Section 1</span>
      <span class="accordion_icon accordion_icon-arrow">▼</span>
    </button>
    <div class="accordion_content" role="region">
      <p>Content for section 1</p>
    </div>
  </div>
</div>

Props

Allow Multiple

By default, only one section can be open at a time. Use allowMultiple to allow multiple sections to be open simultaneously.

React

<Accordion allowMultiple>
  <AccordionItem label="Section 1">...</AccordionItem>
  <AccordionItem label="Section 2">...</AccordionItem>
</Accordion>

Size

React

<Accordion size="sm">...</Accordion>
<Accordion size="md">...</Accordion>
<Accordion size="lg">...</Accordion>

CSS

<div class="accordion accordion-sm">...</div>
<div class="accordion">...</div>
<div class="accordion accordion-lg">...</div>

Transparent

React

<Accordion transparent>...</Accordion>

CSS

<div class="accordion accordion-transparent">...</div>

Disabled Items

React

<Accordion>
  <AccordionItem label="Enabled">...</AccordionItem>
  <AccordionItem label="Disabled" disabled>...</AccordionItem>
</Accordion>

CSS

<div class="accordion">
  <div class="accordion_item">...</div>
  <div class="accordion_item accordion_item-disabled">...</div>
</div>

Accessibility

• Uses button element for accordion headers
• aria-expanded indicates open/closed state
• aria-controls links header to content panel
• Content panel has role="region" and aria-labelledby
• Keyboard accessible: Enter/Space to toggle
• hidden attribute on collapsed panels