Disclosure
Collapsible
An animated show/hide region with a trigger and content, built on Radix Collapsible.
An animated show/hide region built on Radix Collapsible. A CollapsibleTrigger toggles the visibility of a CollapsibleContent, which slides open and closed. Use defaultOpen for the uncontrolled case, or open + onOpenChange when you want to drive it yourself.
Import
import {
Collapsible, CollapsibleTrigger, CollapsibleContent,
} from "@yuhuanowo/yunui";
Basic
Toggle a section
Open by default
Render it expanded on first paint with defaultOpen (uncontrolled).
Default open
Primitives, layout helpers, and themed tokens.
Parts
| Prop | Type | Default | Description |
|---|---|---|---|
| Collapsible | CollapsibleProps | — | The root. Accepts `defaultOpen` (uncontrolled), `open` + `onOpenChange` (controlled), and `disabled`. |
| CollapsibleTrigger | CollapsibleTriggerProps | — | The button that toggles the content. Use `asChild` to render your own element (e.g. a Button). |
| CollapsibleContent | CollapsibleContentProps | — | The region that slides open and closed; animates on mount via the Radix open/closed data attributes. |