Accordion

Importing

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

Usage

The component can be used like so:

Default Open State

The component can be opened by default. Note that this only affects initial state, and the user can open and close the component as they please.

Disabled Accordion

You can prevent an accordion from being opened by disabling it with the isDisabled property.

Guarding Toggles

Use onBeforeToggle to run logic before the accordion opens or closes. It receives the state the accordion is about to enter and the event that triggered the toggle. Return (or resolve to) false to cancel the toggle; return anything else to allow it. Both mouse and keyboard activation are routed through this guard.

The handler may be async — the open/close is deferred until the returned promise settles, which is useful for confirmation prompts (e.g. "You have unsaved changes"). While a returned promise is pending, further toggles are ignored.

In the example below, collapsing the section asks for confirmation first. The async onBeforeToggle returns the confirmation modal's promise, so the accordion only closes if you confirm — cancel and it stays open. Opening is always allowed. Passing { withImmediateCallbacks: true } resolves the promise as soon as the modal starts closing, so the accordion collapses immediately rather than waiting for the close animation to finish.

Controlled Open State

Pass isOpen to control the accordion's open state yourself. When set, the accordion no longer manages its own state — it stays exactly as isOpen dictates, and it's up to you to update the value in response to onToggle. This is useful when the open state is derived from external state or when you need to open/close the accordion programmatically.

Because the consumer owns the state, the accordion can be opened or closed from outside it — the button below and the accordion's own header both drive the same isOpen value.

Custom Title Content

You can include custom content in the title area: