Collapsible

Show and hide a related panel of content. Use for optional details, recovery info, and progressive disclosure.

Examples

Basic

Overview

Collapsible pairs a trigger with a panel that expands and collapses. The trigger includes a chevron that rotates when open. Built on Base UI for accessible expand/collapse behavior.

tsx

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsiblePanel,
} from "@standard-ui/react"

<Collapsible>
  <CollapsibleTrigger>Recovery keys</CollapsibleTrigger>
  <CollapsiblePanel>
    Store these keys somewhere safe.
  </CollapsiblePanel>
</Collapsible>

Usage

Composition

Wrap CollapsibleTrigger and CollapsiblePanel in Collapsible. Keep trigger labels short and descriptive of the hidden content.

tsx

<Collapsible defaultOpen>
  <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
  <CollapsiblePanel>
    {/* optional details */}
  </CollapsiblePanel>
</Collapsible>

Open state

Use defaultOpen for uncontrolled, or open with onOpenChange when the page needs to react to expand/collapse.

tsx

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Details</CollapsibleTrigger>
  <CollapsiblePanel>…</CollapsiblePanel>
</Collapsible>

API

Parts mirror Base UI Collapsible. Root owns open state; trigger and panel render the control and content.

Part	Role
Collapsible	Root state and open control.
CollapsibleTrigger	Toggles the panel. Includes a chevron affordance.
CollapsiblePanel	Expandable content region.

Collapsible

Prop	Type	Default	Description
defaultOpen	boolean	false	Uncontrolled initial open state.
open	boolean	—	Controlled open state.
onOpenChange	(open: boolean, event) => void	—	Called when the panel opens or closes.
disabled	boolean	false	Disables the collapsible.

Guidelines

Do

Use for optional or secondary content that most users can skip
Label the trigger with what will be revealed
Prefer accordion when several related sections share one list

Don't

Don't hide required form fields behind a collapsible
Don't nest many collapsibles — prefer a clearer page structure
Don't use a collapsible for a single short sentence of text