Astryx Design System

useCollapsible@astryxdesign/core v0.0.15 · useCollapsible

Usage

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

ts
import {useCollapsible} from '@astryxdesign/core/Collapsible'

Best practices

Guidance	Practices
Do	Use the hook directly when building custom collapsible components that need XDS collapsible behavior without Collapsible wrapper.
Do	For accordion behavior, wrap items in CollapsibleGroup and pass unique value props.
Don't	Implement your own open/close state when useCollapsible already provides it; the hook handles group coordination automatically.

Parameters

Param	Type	Description
isCollapsible	boolean \| CollapsibleConfig	Enable collapsible behavior. true = self-managed (starts open). Pass config object for controlled mode or custom defaults.
value	string	Unique identifier within an CollapsibleGroup. 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.

Examples

Common configurations, variations, and states.

useCollapsible — Custom Disclosure

Custom disclosure UI built directly with useCollapsible for headless open/close state.