Collapsible
A single region that expands and collapses.
@garn/ui/collapsibleDefault
A show-more region toggled by an icon button.
Starred repositories
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.
npx garn-ui add collapsible- Registry
collapsible- Source
- collapsible.tsx
- Deps
@radix-ui/react-collapsible- Registry deps
- None — standalone
Import
import { Collapsible } from "@garn/ui/collapsible";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="collapsible"]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
- Pair one CollapsibleTrigger with one CollapsibleContent.
- Use
open/onOpenChange(controlled) ordefaultOpen(uncontrolled). - Make the trigger a real, focusable button.
- 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
| EnterSpace | Toggle the region. |
- • The trigger is a button with aria-expanded + aria-controls pointing at the content region.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.