Collapsible

Collapsible is a component that shows or hides content.

CollapsibleContent API

import * as Collapsible from '@base_ui/react/Collapsible';
const CollapsibleContent = Collapsible.Content;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
htmlHidden	'hidden' \| 'until-found'	'hidden'	The hidden state when closed
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use CollapsibleContent to change the default props of this component with the theme.

import * as Collapsible from '@base_ui/react/Collapsible';
const CollapsibleRoot = Collapsible.Root;

Props of the native component are also available.

Name	Type	Default	Description
animated	bool	true	If `true`, the component supports CSS/JS-based animations and transitions.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
defaultOpen	bool	true	If `true`, the Collapsible is initially open. This is the uncontrolled counterpart of `open`.
disabled	bool	false	If `true`, the component is disabled.
onOpenChange	func	-	Callback fired when the Collapsible is opened or closed.
open	bool	-	If `true`, the Collapsible is initially open. This is the controlled counterpart of `defaultOpen`.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use CollapsibleRoot to change the default props of this component with the theme.

import * as Collapsible from '@base_ui/react/Collapsible';
const CollapsibleTrigger = Collapsible.Trigger;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use CollapsibleTrigger to change the default props of this component with the theme.