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
| Guidance | Practices |
|---|---|
| Do | Use the hook directly when building custom collapsible components that need XDS collapsible behavior without XDSCollapsible wrapper. |
| Do | For accordion behavior, wrap items in XDSCollapsibleGroup and pass unique value props. |
| Don't | Implement your own open/close state when useXDSCollapsible already provides it — the hook handles group coordination automatically. |
Parameters
| Param | Type | Description |
|---|---|---|
isCollapsible | boolean | XDSCollapsibleConfig | Enable collapsible behavior. true = self-managed (starts open). Pass config object for controlled mode or custom defaults. |
value | string | Unique identifier within an XDSCollapsibleGroup. When present and inside a group, state is managed by the group. |
Returns
| Field | Type | Description |
|---|---|---|
| isEnabled | boolean | Whether collapsible behavior is active. |
| isOpen | boolean | Whether the content is currently expanded. |
| toggle | () => void | Toggle open/closed state. Dispatches to group, controlled callback, or internal state. |
Import
tsimport {useXDSCollapsible} from '@xds/core/Collapsible'