AccordionGroup

Importing

The component can be imported via:

import { 
  AccordionGroup, 
  Accordion, 
  AccordionTitle, 
  AccordionContent 
} from '@customerio/pluma-components/react';

Usage

Allow Multiple Open Accordions

By default, the AccordionGroup will not allow multiple accordions to be open at the same time. This can be changed by setting shouldAllowMultipleOpen to true.

Default Open

You can set all accordions to be open by default by utilizing the defaultOpen property on the group.

Controlling Members Individually

An AccordionGroup provides two things: consistent layout (spacing between accordions) and open-state coordination (single- or multiple-open). These are independent — the layout is applied to every child regardless of how its state is managed.

A controlled Accordion (one given an isOpen prop) opts out of the group's coordination while still sitting inside the group's layout: its open state is driven entirely by isOpen, so the group never opens or closes it. This is useful when you want the group's spacing but need to own an accordion's state yourself — for example, to guard collapsing with onBeforeToggle.

Only one section is open at a time here — but that's enforced by the consumer's own state, not the group, so a controlled member could just as easily be driven independently.

Note that in a single-open group, the "at most one open at a time" behavior only applies to the uncontrolled members that participate in coordination. Controlled members are managed independently and are not counted against that limit.