Collapsible
The Collapsible component groups content beneath a header that can be expanded or collapsed. It manages its own state by default and can also be controlled by a parent component.
Import
Basic usage
Use a concise header that describes the hidden content. The entire header is used as the toggle target unless disableHeaderToggle is enabled.
Error state
Use the error style when the section contains invalid fields that require attention.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Content displayed inside the collapsible section. |
| | — | Content displayed in the section header. |
| | — | Displays controls on the trailing edge of the header. |
| | | Sets the visual state. |
| | | Sets the initial uncontrolled state. |
| | — | Controls the collapsed state from a parent component. |
| | — | Runs when the section is toggled. |
| | | Prevents the header from toggling the section. |
| | | Hides the trailing chevron. |
| | — | Renders content after the collapsible content wrapper. |
* An asterisk denotes that a prop is required.
Was this page helpful?