Collapsible

Collapsible toggles the visibility of a content section behind a rotating chevron button. Unlike Accordion, it’s a compound component: Collapsible provides the expanded state, and you compose Collapsible.Button and Collapsible.Content yourself inside it. This is the building block Workflow Builder uses for the expand/collapse control on its node panels - see NodePanel for that composition.

Usage

import { Collapsible } from '@workflowbuilder/ui';

function Example() {
  return (
    <Collapsible defaultExpanded>
      <Collapsible.Button />
      <Collapsible.Content>Additional details go here.</Collapsible.Content>
    </Collapsible>
  );
}

Parts

Collapsible.Button and Collapsible.Content read the expanded state from context, so both must be rendered inside a Collapsible.

Part	Props	Description
Collapsible	see Props	State provider. Controlled via isExpanded + onToggle, or uncontrolled via defaultExpanded.
Collapsible.Button	none	Toggle button rendered as a rotating chevron. Reads and flips the expanded state.
Collapsible.Content	children	Content wrapper. Animates its height between collapsed and expanded.

Props

childrenrequired

TypeReactNode

collapseLabel

Typestring

Default'Collapse'

Accessible label for the button when the content is expanded

defaultExpanded

Typeboolean

expandLabel

Typestring

Default'Expand'

Accessible label for the button when the content is collapsed

isExpanded

Typeboolean

onToggle

Type(expanded: boolean) => void

CSS variables

Size

--wb-public-collapsible-transition-duration