Skip to content
Layout

Accordion

Multi-panel expand/collapse disclosure.

React source Astro source Core source

Accordion

Stacked disclosure panels built on React Aria DisclosureGroup. Use the compound Accordion.Item, Accordion.Trigger, and Accordion.Panel API for FAQ and settings layouts. For a single standalone panel, use Collapsible.

Examples

Default

Update payment method and view invoices.
Demo.tsxtsx
import { Accordion } from '@var-ui/react';

<Accordion type="single" defaultExpandedKeys={['billing']}>
  <Accordion.Item id="billing">
    <Accordion.Trigger>Billing</Accordion.Trigger>
    <Accordion.Panel>…</Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item id="shipping">
    <Accordion.Trigger>Shipping</Accordion.Trigger>
    <Accordion.Panel>…</Accordion.Panel>
  </Accordion.Item>
</Accordion>

Props

Accessibility

Each trigger is a button with aria-expanded. In single mode, opening one panel closes the others. Triggers support Home, End, ArrowUp, and ArrowDown for keyboard navigation between sections.