Skip to content
Layout

Collapsible

Expand/collapse disclosure panel.

Collapsible

Expand/collapse panel built on React Aria Disclosure. Use Accordion for stacked multi-panel layouts, or CollapsibleGroup for a lower-level grouping API.

Examples

Default

Demo.tsxtsx
import { Collapsible, CollapsibleGroup } from '@var-ui/react';

<CollapsibleGroup>
  <Collapsible id="a" title="Section A" variant="bordered"></Collapsible>
  <Collapsible id="b" title="Section B" variant="bordered"></Collapsible>
</CollapsibleGroup>

Props

Accessibility

The trigger is a button with aria-expanded; the panel is associated automatically.