File

packages/components/eui-accordion/eui-accordion-item.component.ts

Description

Individual accordion item component that can be expanded or collapsed within an eui-accordion container. Provides a collapsible panel with header and content sections, supporting smooth collapse animations. Uses Angular CDK's accordion item functionality for managing expansion state and accessibility. Supports size variants (S, M, L) and disabled state through BaseStatesDirective. Emits toggleItem event when expansion state changes, allowing parent components to track state.

Basic usage

<eui-accordion>
  <eui-accordion-item>
    <eui-accordion-item-header>Header Text</eui-accordion-item-header>
    Panel content goes here
  </eui-accordion-item>
</eui-accordion>

With initial expanded state and size variant

<eui-accordion-item isExpanded euiSizeS (toggleItem)="onToggle($event)">
  <eui-accordion-item-header>Small Item</eui-accordion-item-header>
  Content
</eui-accordion-item>

Disabled item

<eui-accordion-item euiDisabled>
  <eui-accordion-item-header>Disabled Item</eui-accordion-item-header>
  Content
</eui-accordion-item>

Accessibility

• Header is keyboard accessible with Enter/Space to toggle expansion
• ARIA attributes (aria-expanded, aria-controls) automatically managed by CDK
• Screen readers announce expansion state and content visibility changes
• Focus remains on header after toggling for consistent keyboard navigation
• Disabled items are not focusable and announced as disabled to screen readers

Notes

• Must be used within an eui-accordion parent component
• Requires eui-accordion-item-header directive for header content
• Collapse animation is applied automatically on state changes
• Size variants (euiSizeS, euiSizeM, euiSizeL) affect header and content spacing
• toggleItem event emits boolean indicating current expanded state (true = expanded)
• isExpanded input can be used for programmatic control of expansion state