Collapsible

The React Collapsible component lets users show or hide content by clicking a trigger. It is used to expand and collapse sections without leaving the page.

It helps keep the UI clean by hiding details until needed. For example, users can click to view order details, logs, or settings only when required.

This component is built on top of React Aria's Disclosure primitive and styled using Tailwind CSS. It gives built-in focus management, proper ARIA attributes, and keyboard interaction out of the box.

Installation

npx @tailgrids/cli add collapsible

Anatomy

Import the three composable parts and assemble them.

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent
} from "@/components/collapsible";

export default function CollapsibleAnatomy() {
  return (
    <Collapsible>
      <CollapsibleTrigger />
      <CollapsibleContent />
    </Collapsible>
  );
}

Usage

Import the three composable parts and assemble them.

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent
} from "@/registry/core/collapsible";

export default function Example() {
  return (
    <Collapsible>
      <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
      <CollapsibleContent>
        Yes. Free to use for personal and commercial projects. No attribution
        required.
      </CollapsibleContent>
    </Collapsible>
  );
}

Examples

Controlled

The collapsible component can be controlled using isExpanded and onExpandedChange. In this example, we show an error summary with a "Stack trace" section that can be toggled open to reveal more details.

Default Open

By default, the collapsible component is closed. You can open it by default using defaultExpanded prop on Collapsible component.

Disabled

You can use isDisabled to prevent the user from expanding or collapsing the panel.

Order Summery

With Icon

Interactive

You can create a fully interactive collapsible component using the Collapsible component.

API Reference

Collapsible

The root component. Wraps React Aria's Disclosure and accepts all its props.

CollapsibleTrigger

The heading + button element that toggles the panel. Renders a semantic heading wrapping a <button slot="trigger">.

CollapsibleContent

The collapsible panel that shows content when the trigger is activated. Maps to React Aria's DisclosurePanel.

The panel is hidden from the accessibility tree when collapsed. React Aria handles the hidden attribute automatically.

Accessibility

• Keyboard support: Users can press Enter or Space on the trigger to expand or collapse the content.
• Focus management: The trigger can receive focus, and focus styles appear when navigating with the keyboard.
• ARIA behavior: The component automatically manages expanded (aria-expanded) and collapsed states so screen readers know when content is visible.
• Semantic structure: The trigger is rendered as a button within a heading, helping screen readers understand the content hierarchy.
• Content visibility: When collapsed, the content is hidden from assistive technologies and becomes available when expanded.
• Disabled state: When disabled, the trigger cannot be focused or activated.