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

DO

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