useXDSCollapsible@xds/core · Collapsible
Preview coming soon

Usage

Reusable hook that encapsulates the collapsible state machine. Supports three modes: group-controlled (inside XDSCollapsibleGroup), controlled (isOpen + onOpenChange), and uncontrolled (self-managed with defaultIsOpen). Used internally by XDSCard and XDSSection.

Best practices

GuidancePractices
DoUse the hook directly when building custom collapsible components that need XDS collapsible behavior without XDSCollapsible wrapper.
DoFor accordion behavior, wrap items in XDSCollapsibleGroup and pass unique value props.
Don'tImplement your own open/close state when useXDSCollapsible already provides it — the hook handles group coordination automatically.

Parameters

ParamTypeDescription
isCollapsible
boolean | XDSCollapsibleConfigEnable collapsible behavior. true = self-managed (starts open). Pass config object for controlled mode or custom defaults.
value
stringUnique identifier within an XDSCollapsibleGroup. When present and inside a group, state is managed by the group.

Returns

FieldTypeDescription
isEnabledbooleanWhether collapsible behavior is active.
isOpenbooleanWhether the content is currently expanded.
toggle() => voidToggle open/closed state. Dispatches to group, controlled callback, or internal state.

Import

ts
import {useXDSCollapsible} from '@xds/core/Collapsible'