ComponentsNavigation

Collapsible

One show/hide region with its trigger — advanced settings in a form, "show more" tags, a side-panel block. The single-section primitive under Accordion: no coordination between sections, any element as the trigger, and a height animation that respects reduced motion and data-motion.

Radix Collapsible components/collapsible.tsxtheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@vamos-ui/react";

<Collapsible>
  <CollapsibleTrigger meta="3 fields">Advanced settings</CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

WAI-ARIA disclosure: a button with aria-expanded and aria-controls; Enter and Space toggle.

Several sections where only one opens at a time, or arrow-key navigation between headers? Use Accordion.

Examples

Show more (asChild, controlled)

asChild turns any Button into the trigger; control open to change its label. The first items stay outside the region.

WholesaleNet 30EU VAT

Order side panel (CRM)

Independent blocks that can all be open at once. meta summarises a closed block and is part of the button's name; disabled locks one.

Carrier
Northline Express
Tracking
NLX 4471 0932
ETA
Thu, 14 Nov

Motion levels

The region animates its height with ui-collapse. Inside data-motion="off" or with prefers-reduced-motion it opens instantly.

API

Collapsible

PropTypeDefault
open / defaultOpen / onOpenChange
Controlled or uncontrolled state.
booleanfalse
disabled
The trigger is disabled and the state is locked.
boolean—

CollapsibleTrigger

PropTypeDefault
asChild
Use your own button (Button, a link-styled control). The built-in row look and chevron are skipped.
boolean—
icon
Leading icon.
ReactNode—
meta
Summary on the end side ("3 fields", "€1,488.00"). Read as part of the name.
ReactNode—
chevron
Trailing chevron that turns when open.
booleantrue

CollapsibleContent

PropTypeDefault
forceMount
Keep the content in the DOM while closed (for find-in-page or animation libraries).
boolean—
className
Goes on the animated region; put padding on an inner element so the height animation stays smooth.
string—
Previous
Checkbox
Next
Color picker