Accordion | ELFBAR Design System

ACCORDION

When to Use

Example: FAQ on help page

Grouping related content that doesn't all need to be visible at once
FAQ sections, settings panels, or filter groups
Reducing visual clutter while keeping content accessible

Usage Guidelines

Use single mode when only one section is relevant at a time. Use multiple mode for forms or settings where users compare sections. Keep trigger labels short and descriptive

Don’t

Don't nest accordions inside accordions. Don't use for content that users need to compare side-by-side

Accessibility

Radix UI natively implements role="button", aria-expanded, aria-controls
Keyboard: Enter/Space to toggle, Tab to navigate between triggers