Collapsible

Simple show/hide toggle for a single section. Use for FAQ items, filter panels, and inline detail sections. For grouped sections use Accordion instead.

Anatomy

<Collapsible>
  <CollapsibleTrigger />  {/* click to toggle */}
  <CollapsibleContent /> {/* revealed content */}
</Collapsible>

Examples

FAQ list

Default open

These settings are expanded by default because they are commonly needed.

Props

Collapsible

children*

ReactNode

Must contain CollapsibleTrigger and CollapsibleContent.

open

boolean

Controlled open state.

defaultOpen= false

boolean

Whether open by default (uncontrolled).

onOpenChange

(open: boolean) => void

Called when the open state changes.

disabled= false

boolean

Prevents toggling.

className

string

Additional classes on the root.

Prop	Type	Default	Description
children*	ReactNode	—	Must contain CollapsibleTrigger and CollapsibleContent.
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Whether open by default (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when the open state changes.
disabled	boolean	false	Prevents toggling.
className	string	—	Additional classes on the root.

CollapsibleTrigger

children*

ReactNode

Trigger label.

showChevron= true

boolean

Show a rotating chevron on the right.

className

string

Additional classes.

Prop	Type	Default	Description
children*	ReactNode	—	Trigger label.
showChevron	boolean	true	Show a rotating chevron on the right.
className	string	—	Additional classes.

CollapsibleContent

children*

ReactNode

Revealed content.

className

string

Additional classes on the content wrapper.

Prop	Type	Default	Description
children*	ReactNode	—	Revealed content.
className	string	—	Additional classes on the content wrapper.

PreviousCard NextDivider