XDS — Design System

Collapsible@xds/core v0.0.13 · XDSCollapsible

Usage

Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into sections they care about. Wrap multiple collapsibles in XDSCollapsibleGroup for accordion behavior. For custom collapsible components, use the `useXDSCollapsible` hook directly (`xds hook useXDSCollapsible`).

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

Best practices

Guidance	Practices
Do	Wrap each XDSCollapsible in an XDSCard for visual separation in accordion layouts.
Do	Use XDSCollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time.
Do	Use type="multiple" when users need to compare content across sections, like feature lists or pricing tiers.
Do	Start sections open (defaultIsOpen) when the content is likely needed on first view — don't make users click to see essential info.
Don't	Hide critical or required content behind a collapsible — users may not discover it.
Don't	Nest collapsibles more than two levels deep — it makes content hard to find and navigate.
Don't	Use a collapsible for a single short paragraph — just show the text directly instead.

Examples

Common configurations, variations, and states.

Collapsible — Controlled

Manage the open section from parent state. Use when the open state needs to sync with a URL param, form, or external control.

Collapsible — Multiple Mode

Several sections open at once. Use when users need to compare content across sections, like feature lists or pricing tiers.

Collapsible — Single Mode

Only one section open at a time. Use for settings pages or any list where expanding one item should close the others.

Collapsible — With Dividers

Collapsible sections separated by dividers instead of cards. Use for inline disclosure in detail panels or sidebar content where cards would add too much weight.

Usage

import {XDSCollapsible} from '@xds/core/Collapsible'

Best practices

Guidance	Practices
Do	Wrap each XDSCollapsible in an XDSCard for visual separation in accordion layouts.
Do	Use XDSCollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time.
Do	Use type="multiple" when users need to compare content across sections, like feature lists or pricing tiers.
Do	Start sections open (defaultIsOpen) when the content is likely needed on first view — don't make users click to see essential info.
Don't	Hide critical or required content behind a collapsible — users may not discover it.
Don't	Nest collapsibles more than two levels deep — it makes content hard to find and navigate.
Don't	Use a collapsible for a single short paragraph — just show the text directly instead.