Collapsible

An interactive component that expands and collapses a single panel of content.

Default

Collapsible lets users show and hide content with a trigger.

tsx

import { Collapsible, Button } from "@hummingbirdui/react";

export default function CollapsibleDefaultOpen() {
  return (
    <Collapsible className="mx-auto w-full max-w-md space-y-2">
      <Collapsible.Trigger asChild>
        <Button variant="outline" color="primary">
          Show details
        </Button>
      </Collapsible.Trigger>
      <Collapsible.Content>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          Collapsible is built on Radix UI&apos;s headless primitive, so
          keyboard interaction and ARIA wiring are handled automatically.
        </div>
      </Collapsible.Content>
    </Collapsible>
  );
}

Open By Default

Use defaultOpen to render the panel expanded by default.

@hummingbird/react

Tailwind CSS

Radix Primitives

Hummingbird UI

tsx

import { Collapsible, Button } from "@hummingbirdui/react";
import { ChevronsUpDown } from "lucide-react";

export default function CollapsibleDefault() {
  return (
    <Collapsible defaultOpen className="mx-auto w-full max-w-md space-y-2">
      <div className="flex items-center justify-between gap-4">
        <span className="font-semibold">@hummingbird/react</span>
        <Collapsible.Trigger asChild>
          <Button variant="outline" color="secondary" size="sm" shape="square">
            <ChevronsUpDown className="size-4" />
          </Button>
        </Collapsible.Trigger>
      </div>
      <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
        Tailwind CSS
      </div>
      <Collapsible.Content className="space-y-2">
        <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
          Radix Primitives
        </div>
        <div className="rounded-md border border-default px-4 py-2 font-mono text-sm">
          Hummingbird UI
        </div>
      </Collapsible.Content>
    </Collapsible>
  );
}

Controlled

Use open with onOpenChange to control the open state.

The panel is closed.

tsx

import * as React from "react";
import { Collapsible, Button } from "@hummingbirdui/react";

export default function CollapsibleControlled() {
  const [open, setOpen] = React.useState(false);

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="mx-auto w-full max-w-md space-y-2"
    >
      <div className="flex items-center justify-between gap-4">
        <span className="text-sm">
          The panel is {open ? "open" : "closed"}.
        </span>
        <Collapsible.Trigger asChild>
          <Button variant="outline" color="secondary" size="sm">
            {open ? "Close" : "Open"}
          </Button>
        </Collapsible.Trigger>
      </div>
      <Collapsible.Content>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          The parent component owns the open state through <code>open</code> and{" "}
          <code>onOpenChange</code>.
        </div>
      </Collapsible.Content>
    </Collapsible>
  );
}

Disabled

Set disabled on the root to prevent the panel from being toggled.

tsx

import { Collapsible, Button } from "@hummingbirdui/react";

export default function CollapsibleDisabled() {
  return (
    <Collapsible disabled className="mx-auto w-full max-w-md space-y-2">
      <Collapsible.Trigger asChild>
        <Button variant="outline" color="secondary" size="sm" disabled>
          Toggle
        </Button>
      </Collapsible.Trigger>
      <Collapsible.Content>
        <div className="rounded-md border border-default px-4 py-3 text-sm">
          This panel cannot be opened.
        </div>
      </Collapsible.Content>
    </Collapsible>
  );
}

API Reference

Built on the Radix UI Collapsible primitive. Each part forwards all props to its Radix counterpart.

Collapsible

Contains all the parts of a collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	—
`open`	`boolean`	—
`onOpenChange`	`function`	—
`disabled`	`boolean`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Collapsible.Trigger

The button that toggles the collapsible.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

Collapsible.Content

The component that contains the collapsible content.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled

CSS Variable	Description
`--radix-collapsible-content-width`	The width of the content when it opens/closes.
`--radix-collapsible-content-height`	The height of the content when it opens/closes.

Styling

Collapsible is a behavior-only primitive and ships no Hummingbird classes of its own. The panel's height is animated through data-state; the trigger and content take any Hummingbird utility classes as needed.

PreviousClose Button NextDate Picker