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 CollapsibleGroup for accordion behavior. For custom collapsible components, use the useCollapsible hook directly (astryx hook useCollapsible).
ts
| Guidance | Practices |
|---|---|
| Do | Wrap each Collapsible in an Card for visual separation in accordion layouts. |
| Do | Use CollapsibleGroup 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. |
Manage the open section from parent state. Use when the open state needs to sync with a URL param, form, or external control.
Several sections open at once. Use when users need to compare content across sections, like feature lists or pricing tiers.
Only one section open at a time. Use for settings pages or any list where expanding one item should close the others.
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.