Skip to main content
The Collapsible component provides a simple way to show and hide content. It consists of a trigger that controls the visibility of a panel.

​
Usage

import { Collapsible } from '@raystack/apsara';
import { ChevronDownIcon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <Collapsible>
      <Collapsible.Trigger>
        <span>Show more information</span>
        <ChevronDownIcon />
      </Collapsible.Trigger>
      <Collapsible.Panel>
        <p>This is the collapsible content that can be shown or hidden.</p>
      </Collapsible.Panel>
    </Collapsible>
  );
}

​
Controlled collapsible

import { Collapsible } from '@raystack/apsara';
import { useState } from 'react';

export default function ControlledExample() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <Collapsible.Trigger>
        {open ? 'Hide' : 'Show'} details
      </Collapsible.Trigger>
      <Collapsible.Panel>
        <p>Controlled collapsible content.</p>
      </Collapsible.Panel>
    </Collapsible>
  );
}

​
API reference

​
Collapsible (Root)

The root container for the collapsible.
​
open
boolean
The controlled open state of the collapsible.
​
defaultOpen
boolean
default:"false"
The default open state when uncontrolled.
​
onOpenChange
(open: boolean) => void
Callback fired when the open state changes.
​
disabled
boolean
Whether the collapsible is disabled.

​
Collapsible.Trigger

The button that toggles the collapsible state.
​
className
string
Additional CSS class for the trigger.
​
children
ReactNode
The content of the trigger button.

​
Collapsible.Panel

The collapsible content area.
​
className
string
Additional CSS class for the panel.
​
children
ReactNode
The content to display when expanded.