Collapsible

An interactive component that toggles the visibility of its content panel.

1<Collapsible style={{ textAlign: "center" }}>
2  <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
3  <Collapsible.Panel>
4    <p>This is the collapsible content. It can contain any React elements.</p>
5  </Collapsible.Panel>
6</Collapsible>

Anatomy

Import and assemble the component:

1import { Collapsible } from '@raystack/apsara'
2

3<Collapsible>
4  <Collapsible.Trigger />
5  <Collapsible.Panel />
6</Collapsible>

Usage

The panel manages its own open state unless you take it over.

Controlled

Pass open with onOpenChange to own the state, so a button elsewhere on the page can expand the section.

1(function ControlledCollapsible() {
2  const [open, setOpen] = React.useState(false);
3

4  return (
5    <Collapsible
6      style={{ textAlign: "center" }}
7      open={open}
8      onOpenChange={setOpen}
9    >
10      <Collapsible.Trigger>
11        {open ? "Hide" : "Show"} content
12      </Collapsible.Trigger>
13      <Collapsible.Panel>
14        <p>This content is controlled by React state.</p>
15      </Collapsible.Panel>

Default open

Use defaultOpen to have the panel initially expanded.

1<Collapsible defaultOpen style={{ textAlign: "center" }}>
2  <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
3  <Collapsible.Panel>
4    <p>This content is visible by default.</p>
5  </Collapsible.Panel>
6</Collapsible>

Disabled

disabled freezes the collapsible in its current state — use it while content is still loading rather than hiding the section outright.

1<Collapsible disabled style={{ textAlign: "center" }}>
2  <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>
3  <Collapsible.Panel>
4    <p>This content cannot be toggled.</p>
5  </Collapsible.Panel>
6</Collapsible>

API Reference

Three parts: a root, the trigger that toggles it, and the panel that opens.

Root

Groups all parts of the collapsible.

Prop

Type

Trigger

A button that toggles the visibility of the panel.

Prop

Type

Panel

Contains the collapsible content.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
collapsibleThe root element
collapsible-triggerThe button that toggles the panel
collapsible-panelThe collapsible content panel

Accessibility

  • The Trigger uses aria-expanded to indicate the open/closed state of the panel.
  • Supports keyboard interaction with Enter and Space to toggle the panel.
  • The Panel is automatically associated with the Trigger via aria-controls.
  • Respects motion preferences: panel expand/collapse motion is enabled only when prefers-reduced-motion: no-preference