Accordion

Base UICopy Anchor Link

Accordion wraps Base UI accordion primitives in a column Stack. Each Accordion.Item owns the trigger header and collapsible panel, so you pass a trigger label and panel children instead of composing public Header / Trigger / Panel parts.

Root value, defaultValue, and onValueChange come from Base UI. Set multiple when several sections can stay open; exclusive FAQs stay single-open by default. Items wrap Surface by default: color, border, and radius forward to that host, and root islands toggles separated cards versus an attached block with corner radius only on the first and last rows.

Keyboard and aria behavior stay upstream. You compose items, copy, and surrounding chrome in JSX.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Accordion } from '@viraui/react';

<Accordion>
  <Accordion.Item />
</Accordion>

When to useCopy Anchor Link

• FAQ or help content where one answer at a time keeps the page short
• Settings groups where several sections can stay open together (multiple)
• Collapsible blocks that should look like Surface islands or one attached stack

When not to useCopy Anchor Link

• Persistent peer views in the same region → Tabs
• A single boolean or short disclosure that is not a section list → details/summary or a custom Stack row
• Content that should always stay visible → plain Stack / Surface

RelatedCopy Anchor Link

• Stack — column host Accordion builds on
• Surface — island / attached item chrome
• Tabs — peer panels that stay in view when selected
• Separator — static breaks when collapse is not needed

Common examplesCopy Anchor Link

Exclusive openCopy Anchor Link

One open panel at a time is the default disclosure pattern. Useful for FAQs where each answer replaces the previous. Items keep Surface islands with gap between cards; nest the accordion under a titled panel when the group needs chrome.

Multiple openCopy Anchor Link

Pass multiple so several panels can stay expanded together. Handy for settings groups where readers compare related answers. Seed open sections with defaultValue as an array of item values.

Attached blockCopy Anchor Link

Set islands={false} when Surface items should read as one attached block. Corner radius stays on the outer edges of the first and last rows instead of gapped islands. Leave islands on (the default) for separated cards.

Ask your agentCopy Anchor Link

Build a payout help panel with an FAQ accordion — When do payouts arrive?, What fees apply?, and Tax documents — only one section open at a time. Put a short title and description above the questions, and View all statements plus Contact support in a footer bar.