Collapsible

A single button that toggles a single panel. No chrome, no chevron — just an accessible toggle with built-in height animation.

Examples

Basic

Controlled

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.

tsx

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 — bring your own styles, icon, and rotation logic.

tsx

<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.

tsx

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

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

API

Collapsible

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Fired when the panel opens or closes.
`disabled`	`boolean`	`false`	Disables the trigger.
`className`	`string`	—	Additional CSS classes on the root.

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 — 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) — 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 — it will clip during the height transition. Wrap the content in an inner div instead.

PreviousCheckbox

NextCombobox