Collapsible

Expandable/collapsible section component for organizing content in panels, settings interfaces, and property inspectors. Supports controlled and uncontrolled modes, custom indicators, multiple sizes, and optional content persistence when collapsed.

Live Preview

Import

import { Collapsible } from 'entangle-ui';

Usage

<Collapsible trigger="Section Title">
  <p>Collapsible content here</p>
</Collapsible>

Controlled

Use open and onChange for controlled mode.

const [isOpen, setIsOpen] = useState(false);

<Collapsible open={isOpen} onChange={setIsOpen} trigger="Controlled Section">
  <p>Content that you control</p>
</Collapsible>;

Default Open

Set defaultOpen to have the section expanded on first render.

<Collapsible defaultOpen trigger="Initially Open">
  <p>This content is visible by default</p>
</Collapsible>

Sizes

<Collapsible size="sm" trigger="Small (24px header)">
  <p>Small section content</p>
</Collapsible>

<Collapsible size="md" trigger="Medium (28px header)">
  <p>Medium section content</p>
</Collapsible>

<Collapsible size="lg" trigger="Large (32px header)">
  <p>Large section content</p>
</Collapsible>

Size	Header height	Use case
sm	24px	Compact property panels
md	28px	Standard settings sections
lg	32px	Prominent section headings

Custom Indicator

By default, a chevron icon rotates to indicate open/closed state. Pass a custom React node to replace it, or null to hide the indicator entirely.

{
  /* Custom indicator */
}
<Collapsible indicator={<PlusIcon />} trigger="Custom Icon">
  <p>Uses a custom indicator icon</p>
</Collapsible>;

{
  /* No indicator */
}
<Collapsible indicator={null} trigger="No Indicator">
  <p>No expand/collapse icon shown</p>
</Collapsible>;

Keep Mounted

By default, collapsed content is removed from the DOM. Set keepMounted to keep it in the DOM (hidden) for preserving state or improving toggle performance.

<Collapsible keepMounted trigger="Persistent Content">
  <ComplexForm />
</Collapsible>

Disabled

When disabled, the collapsible cannot be toggled.

<Collapsible disabled trigger="Disabled Section">
  <p>This section cannot be toggled</p>
</Collapsible>

<Collapsible disabled defaultOpen trigger="Disabled Open">
  <p>This content is permanently visible</p>
</Collapsible>

Nested Collapsibles

Collapsibles can be nested for hierarchical content organization.

<Collapsible trigger="Transform" defaultOpen>
  <Collapsible trigger="Position" size="sm">
    <p>X: 0, Y: 0, Z: 0</p>
  </Collapsible>
  <Collapsible trigger="Rotation" size="sm">
    <p>X: 0, Y: 0, Z: 0</p>
  </Collapsible>
  <Collapsible trigger="Scale" size="sm">
    <p>X: 1, Y: 1, Z: 1</p>
  </Collapsible>
</Collapsible>

Rich Trigger Content

The trigger prop accepts any React node, so you can include icons or badges in the header.

<Collapsible
  trigger={
    <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <SettingsIcon />
      Advanced Settings
    </span>
  }
>
  <p>Advanced configuration options</p>
</Collapsible>

Props

Prop	Type	Default	Description
trigger	ReactNode	—	Content shown in the collapsible header/trigger.
children	ReactNode	—	Content to render when expanded.
open	boolean	—	Whether the section is expanded (controlled mode).
defaultOpen	boolean	false	Default expanded state (uncontrolled mode).
size	'sm' | 'md' | 'lg'	'sm'	Size controlling header height, padding, and font size.
indicator	ReactNode | null	—	Custom indicator icon. Defaults to a chevron. Set to null to hide.
disabled	boolean	false	Whether the collapsible is disabled.
keepMounted	boolean	false	Whether to keep content in the DOM when collapsed.
onChange	(open: boolean) => void	—	Callback when the open state changes.
className	string	—	Additional CSS class names.
style	CSSProperties	—	Inline styles.
testId	string	—	Test identifier for automated testing.
ref	Ref<HTMLDivElement>	—	Ref to the root div element.

Accessibility

• Trigger button uses aria-expanded to indicate current state
• Trigger is linked to content via aria-controls / id
• Content region uses role="region" with aria-labelledby pointing to the trigger
• aria-disabled is set when the collapsible is disabled
• Content is hidden with the hidden attribute when collapsed (unless keepMounted is false, in which case it is removed from the DOM)
• Keyboard accessible: Enter/Space to toggle, Tab to navigate