//
An interactive component which expands/collapses a panel.
bun add xiod-ui1import {2 Collapsible,3 CollapsibleContent,4 CollapsiblePanel,5 CollapsibleTrigger6} from "xiod-ui/collapsible";1<Collapsible>2 <CollapsibleTrigger />3 <CollapsibleContent>4 <CollapsiblePanel />5 </CollapsibleContent>6</Collapsible>| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean| undefined | - | Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead. |
defaultOpen | boolean| undefined | false | Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead. |
onOpenChange | ((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)| undefined | - | Event handler called when the panel is opened or closed. |
disabled | boolean| undefined | false | Whether the component should ignore user interaction. |
className | string| ((state: CollapsibleRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, CollapsibleRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: CollapsibleRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
hiddenUntilFound | boolean| undefined | false | Allows the browser's built-in page search to find and expand the panel contents. Overrides the `keepMounted` prop and uses `hidden="until-found"` to hide the element without removing it from the DOM. |
keepMounted | boolean| undefined | false | Whether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used. |
className | string| ((state: CollapsiblePanelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, CollapsiblePanelState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: CollapsiblePanelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
nativeButton | boolean| undefined | true | Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`). |
className | string| ((state: CollapsibleTriggerState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, CollapsibleTriggerState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: CollapsibleTriggerState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |