Function: Accordion()

Accordion(__namedParameters): Element

Defined in: Accordion/Accordion.tsx:149

Accessible accordion component with collapsible content sections.

This component provides a simplified API for creating expandable/collapsible content sections. It uses design tokens from @ttoss/theme for consistent styling and follows WAI-ARIA accordion pattern for accessibility.

Parameters

Parameter	Type
__namedParameters	AccordionProps

Returns

Element

Examples

<Accordion
  items={[
    {
      title: 'Section 1',
      content: 'Content for section 1',
    },
    {
      title: 'Section 2',
      content: 'Content for section 2',
    },
  ]}
/>

<Accordion
  multiple
  defaultExpanded={[0, 1]}
  items={[
    {
      id: 'item-1',
      title: 'Pre-expanded Section 1',
      content: <div>Rich content</div>,
    },
    {
      id: 'item-2',
      title: 'Pre-expanded Section 2',
      content: <p>More content</p>,
    },
  ]}
  onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
/>

// Custom rendering with renderItem
<Accordion
  items={items}
  renderItem={({ item, isExpanded, toggle, ids }) => (
    <CustomAccordionItem
      item={item}
      isExpanded={isExpanded}
      onToggle={toggle}
      headingId={ids.headingId}
      panelId={ids.panelId}
    />
  )}
/>