Collapsible
collapsibleToggles visibility of a single content region with a height transition.
Usage
Basic usage
Click the title to expand/collapse the supplementary content. It is collapsed by default.
tsx
<Collapsible className="w-80">
<CollapsibleTrigger>Expand to view details</CollapsibleTrigger>
<CollapsiblePanel>Here is the supplementary content that is collapsed by default. Click the title to expand it. </CollapsiblePanel>
</Collapsible>Expand by default
Uncontrolled use defaultOpen allows the panel to expand initially.
Here is the supplementary content expanded by default. Click the title again to collapse it.
tsx
<Collapsible defaultOpen className="w-80">
<CollapsibleTrigger>Collapse details</CollapsibleTrigger>
<CollapsiblePanel>Here is the supplementary content expanded by default. Click the title again to collapse it. </CollapsiblePanel>
</Collapsible>Disabled
The trigger under disabled is grayed out and cannot be expanded.
tsx
<Collapsible disabled className="w-80">
<CollapsibleTrigger>Disabled</CollapsibleTrigger>
<CollapsiblePanel> cannot be expanded when disabled. </CollapsiblePanel>
</Collapsible>When to use
Use Collapsible to reveal or hide one block of supplementary content, such as details, a “show more” section, or optional advanced settings. Use Accordion for several adjacent disclosures with mutually exclusive expansion, or Command for navigation without disclosure content.
Import
ts
import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
Collapsible.open | boolean | — | Controlled open state. |
Collapsible.defaultOpen | boolean | false | Initial open state when uncontrolled. |
Collapsible.disabled | boolean | false | Prevents expansion. |
Collapsible.className | string | — | Container class name. |
CollapsibleTrigger.disabled | boolean | false | Disables the trigger independently. |
Events
| Event | Type | Description |
|---|---|---|
Collapsible.onOpenChange | (open: boolean) => void | Called when the open state changes. HulianUI intentionally omits Base UI event details for consistency with Switch and Toggle. |
Slots
| Slot | Type | Description |
|---|---|---|
Collapsible.children | ReactNode | Trigger and Panel composition. |
CollapsibleTrigger.children | ReactNode | Title-row content. |
CollapsiblePanel.children | ReactNode | Collapsible content. |
Example
tsx
<Collapsible className="w-80">
<CollapsibleTrigger>Show details</CollapsibleTrigger>
<CollapsiblePanel>Supplementary content starts collapsed and opens from the title.</CollapsiblePanel>
</Collapsible>Initially open:
tsx
<Collapsible defaultOpen className="w-80">
<CollapsibleTrigger>Hide details</CollapsibleTrigger>
<CollapsiblePanel>This supplementary content starts expanded.</CollapsiblePanel>
</Collapsible>Usage guidelines
- The height transition uses Base UI's
--collapsible-panel-heightCSS variable. Put padding on an inner panel element so the closed state reaches zero height; do not measurescrollHeightor add an animation library. See [[base-ui-accordion-panel-height-css-var-pure-css-transition]]. - Use
openwithonOpenChangefor controlled state, ordefaultOpenfor uncontrolled state, not both.
Related
Command · ContextMenu · Toolbar · Accordion · Link · AnimatedThemeToggler
Playground
<Collapsible>
<CollapsibleTrigger>Title</CollapsibleTrigger>
<CollapsiblePanel>Content</CollapsiblePanel>
</Collapsible>