Accordion

Overview

Use an accordion when the page has related sections that should stay close together, but the user does not need to see every section at the same time.

Accordions work well for settings, FAQs, filters, details panels, and long forms with optional sections. Avoid them when all content must be compared side by side.

Anatomy

An accordion is made from an accordion root, one or more items, a trigger for each item, and content for each panel. The trigger should clearly describe what will open. The content should be short enough that opening one panel does not make the page hard to scan.

Behavior

Use a single accordion when only one panel should be open. Use a multiple accordion when several panels can stay open at once. Use controlled state when the open panel needs to sync with routing, saved preferences, or another part of the page.

Accessibility

Keep triggers as real buttons, use clear headings, and make sure focus remains visible. Keyboard users should be able to tab to the trigger and open or close it with the keyboard.

Installation

npx love-ui@latest add accordion

Usage

import {
  Accordion,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
} from "@/components/ui/accordion"

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionPanel>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Examples

These examples show the main accordion modes: one open panel, many open panels, and externally controlled state.

Single Accordion

Use this for compact pages where opening one section should close the previous section.

Multiple Accordion

Use this when each section is independent and users may need to keep several answers open.

Controlled Accordion

Use this when the open item must be controlled by your application state.