Collapsible

GradeTested

UsageCopy Anchor Link

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@cadence-clinical/ui";
import { ChevronDown } from "lucide-react";

<Collapsible>
  <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>
    Earlier entries
    <ChevronDown
      data-icon="inline-end"
      className="transition-[rotate] duration-150 ease-out-strong in-data-[panel-open]:rotate-180"
    />
  </CollapsibleTrigger>
  <CollapsibleContent>...</CollapsibleContent>
</Collapsible>;

Collapsible follows the shadcn Collapsible and keeps its part names and props, so shadcn code works unchanged. It is built on the Base UI Collapsible, whose props it accepts, such as open, onOpenChange and defaultOpen.

Render the trigger as a Button through render, and give it a chevron: the example above turns one. While the section is open the trigger carries data-panel-open, so an icon inside it turns with in-data-[panel-open]:rotate-180.

Found by the browserCopy Anchor Link

A closed section is taken out of the page, so the browser's find does not reach its words. Set hiddenUntilFound on CollapsibleContent to keep it in the page, hidden, so find can reach its words and open it. A browser that does not support hidden="until-found" keeps the section hidden from find, as if it were not set.

<CollapsibleContent hiddenUntilFound>...</CollapsibleContent>

What Cadence changesCopy Anchor Link

• The section grows to its height as it opens, and shrinks as it closes, in 150ms. shadcn's opens at once. With reduced motion it opens at once here too.

AccessibilityCopy Anchor Link

• The trigger says whether the section is open and names the section it controls.
• Enter and Space open and close it.
• A disabled Collapsible's trigger is a disabled button: it says it is disabled, ignores a press, and Tab passes over it.