Collapsible

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

npm

npx love-ui@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>