AccordionItem

Individual expandable section within an Accordion. Must be used as a child of Accordion.

Storybook documentation (opens in new tab)

React

<Accordion>
  <AccordionItem label="Click to expand">
    <Text>Content inside the accordion item</Text>
  </AccordionItem>
</Accordion>

CSS

<div class="accordion">
  <div class="accordion_item">
    <button class="accordion_control" aria-expanded="false" aria-controls="panel-1">
      <span class="accordion_header">Click to expand</span>
      <span class="accordion_icon accordion_icon-arrow">▼</span>
    </button>
    <div id="panel-1" class="accordion_content" role="region">
      <p>Content inside the accordion item</p>
    </div>
  </div>
</div>

Props

Label

The label prop sets the header text for the accordion item.

React

<AccordionItem label="Custom label text">
  <Text>Content</Text>
</AccordionItem>

Icon

Add a leading icon to the accordion item.

React

import { User, Folder } from '@phosphor-icons/react'

<Accordion>
  <AccordionItem label="Profile" icon={<User />}>
    <Text>User profile settings</Text>
  </AccordionItem>
  <AccordionItem label="Files" icon={<Folder />}>
    <Text>File management options</Text>
  </AccordionItem>
</Accordion>

CSS

<div class="accordion_item">
  <button class="accordion_control">
    <span class="accordion_icon"><!-- icon SVG --></span>
    <span class="accordion_header">Profile</span>
    <span class="accordion_icon accordion_icon-arrow">▼</span>
  </button>
  <div class="accordion_content" role="region">...</div>
</div>

Disabled

Prevent an accordion item from being expanded.

React

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

CSS

<div class="accordion_item accordion_item-disabled">
  <button class="accordion_control" disabled aria-disabled="true">
    <span class="accordion_header">Disabled</span>
    <span class="accordion_icon accordion_icon-arrow">▼</span>
  </button>
  <div class="accordion_content" role="region">...</div>
</div>

Accessibility

• Header is a button element with type="button"
• aria-expanded reflects current open/closed state
• aria-controls links to the content panel ID
• aria-disabled and disabled attribute when disabled
• Content panel has role="region" and aria-labelledby
• Icons are marked with aria-hidden="true"