Skip to content
garn

Collapsible

A single region that expands and collapses.

Stablev0.4.2added in v0.1.0@garn/ui/collapsible
On this page

Default

A show-more region toggled by an icon button.

Installation

garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.

terminal
npx garn-ui add collapsible
First time? Set up garn in your project
Registry
collapsible
Deps
@radix-ui/react-collapsible
Registry deps
None — standalone

Import

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

Anatomy

The parts this component is built from — compose them to assemble it.

CollapsibleRequired[data-slot="collapsible"]

Root — owns the open state.

CollapsibleTriggerRequired[data-slot="collapsible-trigger"]

Toggles the region (asChild to wrap your own button).

CollapsibleContentRequired[data-slot="collapsible-content"]

The region that shows/hides.

Props

The component's public props and their types.

No component-specific props — this is a thin wrapper over its native element.

Styling

Target these data-slots and states, and remap these tokens, to restyle without forking the component.

[data-slot="collapsible"]

States

SelectorState
[data-state=open]open
[data-state=closed]closed
[disabled]disabled

When to use

Show/hide a single independent region — a 'show more', an expandable row, an optional details block.

Reach for something else when

  • Several stacked sections with one-open-at-a-time behavior (use accordion)
  • switching peer views (use tabs)
  • a floating surface (use popover/dialog).

Overview

Collapsible shows or hides a single independent region — a "show more", an expandable table row, an optional details block. Collapsible owns the open state, CollapsibleTrigger toggles it (asChild to wrap your own control), and CollapsibleContent is the region. It's the one-region primitive; for a set of stacked, related sections use an Accordion, and for switching between peer panels use Tabs.

Guidelines

Use it for one optional region, not a set. A single show/hide is exactly its job; the moment you have several coordinated sections, an Accordion models that better. Keep the trigger label describing what expands ("Show details").

Don't hide essential content behind it. Collapse genuinely secondary detail — required fields or critical info shouldn't start hidden where users may never expand them. Default-open when the content is usually wanted.

Wire the state for assistive tech. The trigger reflects aria-expanded and controls the region — keep that link intact and make the trigger a real button. Avoid animating height in a way that fights reduced-motion.

Best practices

Do
  • Pair one CollapsibleTrigger with one CollapsibleContent.
  • Use open/onOpenChange (controlled) or defaultOpen (uncontrolled).
  • Make the trigger a real, focusable button.
Don't
  • Don't use a Collapsible for many sections — that's accordion.
  • Don't hide essential content behind an unclear trigger.

Content guidelines

  • Write a trigger that says what expands (“Show advanced options”).
  • Keep the trigger's wording the same whether the region is open or closed.

Accessibility

ARIA APG
disclosure

Keyboard

EnterSpaceToggle the region.
A1.3.1Info and RelationshipsA2.1.1KeyboardA4.1.2Name, Role, Value
  • The trigger is a button with aria-expanded + aria-controls pointing at the content region.