Collapsible
Disclosure primitive for hiding and revealing a single content region.
Quick Preview
Deposit, legal fees, and inspection costs are due before closing.
Composition
Use this public composition when building Collapsible:
Collapsible
├── CollapsibleTrigger
└── CollapsibleContentUsage
<Collapsible>
<CollapsibleTrigger>More details</CollapsibleTrigger>
<CollapsibleContent>Hidden details.</CollapsibleContent>
</Collapsible>Examples
Default Collapsible
Use this as the starting point for Collapsible. Keep product data, routing, fetching, and authorization logic in the consuming app.
Deposit, legal fees, and inspection costs are due before closing.
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
open / defaultOpen | boolean | - | Controlled or uncontrolled open state. |
className | string | - | Local layout or spacing overrides. |
| native/root props | React component props | - | Passed through to the underlying root or primitive. |
Accessibility
- Preserve the documented Collapsible composition so labels, triggers, content, and controls remain connected.
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.