Collapsible

Expandable/collapsible content section

Basic Usage

Basic collapsible

@radix-ui/primitives

Controlled state

pnpm add @corew500/ui

import { Collapsible } from "@corew500/ui/collapsible"

<Collapsible>Content</Collapsible>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Additional Information

CMS FieldsEN

Section Title

Content Items (3)

Default Open

This simulates how a content editor manages collapsible sections in Payload CMS. Content items can be localized.

Prop	Type	Default	Description
`open`	enum	—	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
`defaultOpen`	enum	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
`onOpenChange`	(open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void	—	Event handler called when the panel is opened or closed.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	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.