Collapsible

A single disclosure panel that expands and collapses with smooth animation. Supports both controlled and uncontrolled modes.

Import

tsx

import { Collapsible } from '@tac-ui/web';

Playground

Interactively configure the Collapsible props below.

Default Open

tsx

<Collapsible label="Click to expand">
  This is the collapsible content.
</Collapsible>

Default

A basic collapsible panel starts closed and reveals content when the trigger is clicked.

tsx

<Collapsible label="Show details">
  Here are some additional details that were previously hidden.
</Collapsible>

Default Open

Set defaultOpen to start the panel in an expanded state.

This content is visible by default.

tsx

<Collapsible label="Already expanded" defaultOpen>
  This content is visible by default.
</Collapsible>

Controlled

Pass open and onOpenChange to control the panel from external state.

tsx

const [open, setOpen] = useState(false);

<Collapsible label="Controlled panel" open={open} onOpenChange={setOpen}>
  This panel is controlled by external state.
</Collapsible>

Nested

Collapsible panels can be nested to create hierarchical disclosure patterns.

Outer content visible here.

tsx

<Collapsible label="Outer panel" defaultOpen>
  Outer content
  <Collapsible label="Inner panel">
    Inner content
  </Collapsible>
</Collapsible>

Collapsible vs Accordion

Use Collapsible for a single independent disclosure panel. Use Accordion when you have multiple related sections where expanding one should optionally collapse others.

API Reference

Prop	Type	Default	Description
label	React.ReactNode	-	The label displayed in the trigger button.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
defaultOpen	boolean	false	Initial open state for uncontrolled mode.
children	React.ReactNode	-	Content revealed when the panel is open.
className	string	-	Additional CSS class names.