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

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.