Collapsible

Examples

Overview

Collapsible is a passthrough wrapper around Base UI Collapsible. It ships with one bit of styling: a height transition on CollapsibleContent driven by Base UI's --collapsible-panel-height CSS variable. Everything else (trigger styling, chevron, hover states) is yours.

Reach for Collapsible when you have one section to expand. If you have a group of sibling sections where users would expect arrow-key navigation, use Accordion instead.

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@rogo-technologies/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>Show advanced settings</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>;

Usage

Basic

The trigger is a plain button, so bring your own styles, icon, and rotation logic.

<Collapsible>
  <CollapsibleTrigger className="group flex items-center justify-between">
    Advanced settings
    <IconChevronDownSmall className="size-4 transition-transform group-aria-expanded:rotate-180" />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="px-3 pt-2">…</div>
  </CollapsibleContent>
</Collapsible>

Controlled

Pass open + onOpenChange to manage state externally.

const [open, setOpen] = useState(false);

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>;

API

Collapsible

CollapsibleTrigger

Renders a native <button>. Accepts all standard button props. Has aria-expanded for styling hooks.

CollapsibleContent

Renders a <div> with overflow: hidden and a height transition driven by --collapsible-panel-height. Wrap your content in a child element if you need padding, since padding on the panel itself would clip during the animation.

Guidelines

Do

• Use Collapsible for one-off sections: an "Advanced settings" toggle on a form, an expandable card body, a collapsible sidebar group.
• Style the trigger like a button (or a row), since the primitive intentionally gives you nothing.
• Use aria-expanded on the trigger to rotate a chevron or swap an icon.

Don't

• Don't stack multiple Collapsibles to fake an Accordion. Use Accordion so arrow keys move focus between triggers.
• Don't put padding directly on CollapsibleContent, since it will clip during the height transition. Wrap the content in an inner div instead.