Skip to main content

Collapsible

Shows or hides one region of content behind a trigger.

import { Collapsible } from "@/fragments/ui";Source

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>

Installation

npx @usefragments/cli add collapsible

Writes src/fragments/ui/components/Collapsible plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

Collapsible is a compound: import the root and reach its parts through 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>

Chevron Start

Marker leads the label instead of trailing it.

<Collapsible>
  <Collapsible.Trigger chevronPosition="start">Navigation</Collapsible.Trigger>
  <Collapsible.Content>
    <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
      <li>Dashboard</li>
      <li>Settings</li>

No Chevron

Bare trigger when the surrounding layout signals enough.

<Collapsible>
  <Collapsible.Trigger showChevron={false}>Show more details</Collapsible.Trigger>
  <Collapsible.Content>
    <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

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setCollapsible.Trigger and Collapsible.Content components
defaultOpenbooleanfalseWhether the collapsible is initially open (uncontrolled)
openbooleanNot setControlled open state
onOpenChangefunctionNot setCallback when open state changes - (open: boolean) => void
disabledbooleanfalseWhether the collapsible is disabled

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

Guidance

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)

Related

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

Next steps