React Collapsible component

Preview

<Collapsible>
  <Collapsible.Trigger>Click to expand</Collapsible.Trigger>
  <Collapsible.Content>
    <p>This content is hidden by default and revealed when the trigger is clicked.</p>
  </Collapsible.Content>
</Collapsible>

Usage

Use when

Detail most readers do not need
Optional or advanced settings
Navigation sections that fold away
Building a disclosure the other components do not cover

Avoid when

Several sections that should coordinate (use Accordion)
Content that must overlay the page (use Dialog or Popover)
Action lists (use Menu)

Implementation notes

The trigger should say what opens, not 'click here'
defaultOpen for content most users want on arrival
Keep the trigger to a short phrase
The caret always leads; a bespoke trigger uses render and draws its own glyph

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Collapsible once, then compose its parts with dot notation.

Collapsible.Trigger
Collapsible.Content

Starts closed and opens on click.

<Collapsible>
  <Collapsible.Trigger>Click to expand</Collapsible.Trigger>
  <Collapsible.Content>
    <p>This content is hidden by default and revealed when the trigger is clicked.</p>
  </Collapsible.Content>
</Collapsible>

Examples

Default Open

Starts open for content most users want.

<Collapsible defaultOpen>
  <Collapsible.Trigger>Section Title</Collapsible.Trigger>
  <Collapsible.Content>
    <p>This content is visible by default. Click the trigger to collapse.</p>
  </Collapsible.Content>
</Collapsible>

Custom Trigger

A bespoke trigger through render owns its own glyph.

<Collapsible>
  <Collapsible.Trigger render={<Button variant="ghost" size="sm" />}>Show more details</Collapsible.Trigger>
  <Collapsible.Content keepMounted>
    <p>Hidden details that appear when triggered.</p>
  </Collapsible.Content>
</Collapsible>

Disabled

Locked shut and skipped by the keyboard.

<Collapsible disabled>
  <Collapsible.Trigger>Cannot toggle (disabled)</Collapsible.Trigger>
  <Collapsible.Content>
    <p>This content cannot be shown because the collapsible is disabled.</p>
  </Collapsible.Content>
</Collapsible>

Multiple Sections

Independent regions that ignore each other.

<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
  <Collapsible defaultOpen>
    <Collapsible.Trigger>Getting Started</Collapsible.Trigger>
    <Collapsible.Content>
      <p>Introduction and setup instructions.</p>
    </Collapsible.Content>

API reference

Component props
Prop	Type	Default	Description
`children`Required	`React.ReactNode`	Not set	Collapsible.Trigger and Collapsible.Content components
`className`	`string \| undefined`	Not set	—
`Content.children`Required	`React.ReactNode`	Not set	—
`Content.className`	`string \| undefined`	Not set	—
`Content.hiddenUntilFound`	`boolean \| undefined`	Not set	Let the browser's find-in-page reveal the closed content.
`Content.keepMounted`	`boolean \| undefined`	Not set	Keep the content in the DOM while closed (hidden and inert).
`defaultOpen`	`boolean \| undefined`	`false`	Whether the collapsible is initially open (uncontrolled)
`disabled`	`boolean \| undefined`	`false`	Whether the trigger is inert (focusable, dimmed once)
`onOpenChange`	`((open: boolean, eventDetails: CollapsibleChangeEventDetails) => void) \| undefined`	Not set	Called when the trigger opens or closes the content - (open: boolean, eventDetails) => void
`open`	`boolean \| undefined`	Not set	Controlled open state
`Trigger.children`Required	`React.ReactNode`	Not set	—
`Trigger.className`	`string \| undefined`	Not set	—

Accessibility

Trigger must have aria-expanded to indicate state
Content region needs aria-labelledby pointing to trigger
Keyboard: Enter/Space toggles open state
Focus should remain on trigger after toggle

AccordionalternativeUse Accordion for multiple exclusive collapsible sections
Sidebarused-bySidebar uses Collapsible for section expand/collapse
MenualternativeUse Menu for dropdown navigation with actions

Next steps

Accessibility guidanceThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.