Collapsible

A single show/hide disclosure that expands and collapses a panel of content.

Basic

Show code

import { Collapsible } from "@makeplane/propel/components/collapsible";

export default function BasicDemo() {
  return (
    <Collapsible trigger="Recent activity" indicator>
      3 work items updated in the last hour.
    </Collapsible>
  );
}

Default open

3 work items updated in the last hour.

Show code

import { Collapsible } from "@makeplane/propel/components/collapsible";

export default function DefaultOpenDemo() {
  return (
    <Collapsible trigger="Recent activity" indicator defaultOpen>
      3 work items updated in the last hour.
    </Collapsible>
  );
}

Without indicator

Show code

import { Collapsible } from "@makeplane/propel/components/collapsible";

export default function WithoutIndicatorDemo() {
  return (
    <Collapsible trigger="Recent activity" indicator={false}>
      3 work items updated in the last hour.
    </Collapsible>
  );
}

Installation

import { Collapsible } from "@makeplane/propel/components/collapsible";

Props

Collapsible

Prop	Type	Required	Description
children	ReactNode	No	The collapsible content region.
render	ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, CollapsibleRootState>	No	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
trigger	ReactNode	Yes	The button content that opens and closes the panel.
indicator	boolean	Yes	Whether to show the rotating chevron indicator at the trigger's inline-end.
keepMounted	boolean	No	Keep the panel in the DOM while closed — Base UI's `Panel.keepMounted`.
hiddenUntilFound	boolean	No	Reveal on the browser's find-in-page — Base UI's `Panel.hiddenUntilFound`.