Accordion

Overview

The Accordion component is the parent wrapper for a collection of collapsible accordion items. It optionally provides an "Expand/Collapse All" button that allows users to open or close all items at once.

Subcomponents

The Accordion uses a compound component pattern with the following subcomponents:

• AccordionItem - Container for each accordion trigger and accordion content
• AccordionTrigger - Clickable header/button area
• AccordionContent - Collapsible content area

Examples

Basic Usage

By default, only one accordion item can be open at a time (single mode).

Multiple Items Open

Use type="multiple" to allow multiple accordion items to be open simultaneously.

With Toggle All Button

Use showToggleAll to display an "Expand/Collapse All" button. When enabled, the accordion automatically uses type="multiple".

Props

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@im/integral/components/styled';