Collapsible

import {
  Collapsible,
  CollapsiblePanel,

When to use it#

Use a collapsible for one optional section: advanced settings, the details of a shipping rule, a list of filters. People who do not need it never see it, and people who do open it with one press.

For several sections where one open section replaces another, use an Accordion. For content that is a menu of actions, use a Dropdown Menu.

Import#

Copyimport {
  Collapsible,
  CollapsibleTrigger,
  CollapsiblePanel,
} from "@hel/ui/collapsible"

Usage#

The trigger is a button, and the panel is what it shows and hides. Leave the panel closed at first, or add defaultOpen to start with it open.

Copy<Collapsible>
  <CollapsibleTrigger>Shipping details</CollapsibleTrigger>
  <CollapsiblePanel>Standard shipping takes 3 to 5 working days.</CollapsiblePanel>
</Collapsible>

The trigger is a ghost Button with an arrow that turns down while the panel is open, and flips in right-to-left layouts. The panel slides open and shut, and the motion is turned off for people who prefer reduced motion.

Examples#

Controlled#

Use open and onOpenChange when the page needs to know whether the section is open. Here a list of filters shows how many are chosen in the label of the trigger, even while it is closed.

import * as React from "react"

import { Button } from "@hel/ui/button"

Trigger styles#

The trigger takes the variant, intent, size and roundness of a Button. icon replaces the arrow with your own icon, or removes it with false. A custom icon does not turn, so pick one that reads well when the panel is open or closed.

import { Plus } from "lucide-react"

import {

Props#

Collapsible#

CollapsibleTrigger#

CollapsiblePanel#

keepMounted keeps the content in the page while the panel is closed, which suits a form whose fields must stay. hiddenUntilFound lets the browser's find-in-page open the panel when the text is there.