Collapsible for React Aria

A collapsible hides one section behind a button.

Use it for a single show-more, like an address under an order status. For several sections in a list, use an Accordion so the arrow keys move between them. In React, React Aria connects the button to the panel.

Installation

Anatomy

Collapsible
├── CollapsibleTrigger
├── CollapsibleContent
└── CollapsibleIndicator

Usage

import { ChevronsUpDownIcon } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { buttonVariants } from "@/components/ui/button";
import {
  Collapsible, CollapsibleContent, CollapsibleTrigger,
} from "@/components/ui/collapsible";

const CollapsibleDemo = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Collapsible
      className="flex w-[350px] flex-col gap-2"
      isExpanded={isOpen}
      onExpandedChange={setIsOpen}
    >
      <div className="flex items-center justify-between gap-2 px-4">
        <h4 className="font-semibold text-sm">Order #4189</h4>
        <CollapsibleTrigger
          className={cn(
            buttonVariants({ size: "icon-xs", variant: "ghost" }),
            "size-6"
          )}
        >
          <ChevronsUpDownIcon aria-hidden="true" />
          <span className="sr-only">Toggle details</span>
        </CollapsibleTrigger>
      </div>
      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
        <span className="text-muted-foreground">Status</span>
        <span className="font-medium">Shipped</span>
      </div>
      <CollapsibleContent className="flex flex-col gap-2">
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Shipping address</p>
          <p className="text-muted-foreground">100 Market St, San Francisco</p>
        </div>
        <div className="rounded-md border px-4 py-2 text-sm">
          <p className="font-medium">Items</p>
          <p className="text-muted-foreground">2x Studio Headphones</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
};

Accessibility

Demos

Basic

A card holds one full-width trigger, Product details, and a chevron that turns when the panel is open. Inside is a short note and a Learn More button. Nothing outside reads the open state, so the collapsible keeps it. Use that when the trigger is the only control that should care, and treat the card as just a frame.

Settings

Two radius fields stay on screen. The bottom corners live in CollapsibleContent and show up when the icon button is pressed. The button's accessible name switches between show and hide, which is why open is controlled: the icon depends on it. Use this for advanced values that would double the form for most people, and do not hide a field this way if it has to be filled.

File Tree

Folders are nested collapsibles and files are plain buttons. Each level opens on its own, which is enough for a small static outline in a card. There is no selection, no typeahead, and no rename, so a real navigator should be a Tree View instead of stacked disclosures. Arrow keys will not walk these rows, because each trigger is its own button.

Rtl

The same order summary, in Arabic, with dir set to rtl. The status row and the hidden address follow the text, and the toggle sits at the inline end. Set direction on the collapsible when this block is translated even if the page around it is not. The chevron does not point to a physical side, so leave it, and keep margins logical or the rows drift.

FAQ

API Reference