Collapsible
One section that reveals its body on demand
Retry policyDefaults
Retry 3 · exponential · jitter off · advanced closed
For several sections at once, use Accordion; it prerenders its bodies.
Installation
npx shadcn@latest add @sudokw/components-collapsibleimport { Collapsible } from "@gpuixui/components";Usage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@gpuixui/components/collapsible";
<Collapsible defaultOpen={false}>
<CollapsibleTrigger>Advanced options</CollapsibleTrigger>
<CollapsibleContent>
Retry budget: 3 attempts
</CollapsibleContent>
</Collapsible>;Composition
Collapsible
├── CollapsibleTrigger
└── CollapsibleContentAPI reference
| Part | Prop | Type | Default | Consequence |
|---|---|---|---|---|
Collapsible | open | boolean | — | controlled state; omit it to let the root keep its own |
Collapsible | defaultOpen | boolean | false | the uncontrolled starting state, open on the first frame |
Collapsible | onOpenChange | (open: boolean) => void | none | the next state the trigger reports |
Collapsible | children | CollapsibleTrigger and CollapsibleContent | — | the direct parts; a misplaced family part throws |
CollapsibleTrigger | disabled | boolean | false | leaves the tab order, dims, and refuses click, Enter and Space |
CollapsibleTrigger | className | string | — | joined after the recipe, so it wins conflicts |
CollapsibleTrigger | style | StateStyle<CollapsibleTriggerState> | the recipe | resolved against the live state and merged last |
CollapsibleContent | className | string | — | joined after the recipe on the measured box |
CollapsibleContent | children | ReactNode | — | the body; mounted only while open, and during the exit |
Keyboard
- EnterSpace
- expands or collapses the section
read from collapsible.tsx
Edit this page on GitHubapps/docs/content/docs/components/collapsible.mdx