||

Collapsible

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

A collapsible panel controlled by a button.

doc
collapsible-demo

Overview

Use a collapsible when one piece of content can be shown or hidden by a single control.

Collapsible is simpler than accordion. It is a good fit for optional details, advanced settings, helper text, or a single expandable section.

Anatomy

A collapsible has a root, trigger, and content. The trigger controls whether the content is visible. The content should be directly related to the trigger.

Behavior

Use collapsible when there is only one expandable region. If you have several related expandable regions, use Accordion instead.

Accessibility

The trigger should be a real button with clear text. Keep focus visible and make sure the expanded state is communicated by the primitive.

Installation

 
npx honestui@latest add collapsible

Usage

 
import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
<Collapsible>
  <CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
  <CollapsiblePanel>
    Yes, you can access the file in the cloud.
  </CollapsiblePanel>
</Collapsible>