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>

API Reference

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

Examples

Controlled

You can control the collapsible state by providing open and onOpenChange props.

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

The collapsible can be disabled to prevent user interaction.

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>

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