Accordion
An Accordion is a stack of headings that allow users to show or hide the section of content under each one.
When to Use
- for a list of questions and answers, such as “When is an invoice overdue?”
- for sections that users read one at a time, as opening an item closes the one that was open
- for sections that users compare, as several items stay open when
multipleis set
When Not to Use
- for one section with a trigger of any shape (use a Collapsible)
- for views where one is always shown, as every item of an Accordion can be closed (use Tabs)
- for content that every reader needs (keep it visible on the page)
- to divide content that stays visible (use a Separator)
| Accordion | Collapsible | |
|---|---|---|
| Purpose | A list of sections under headings | One section |
| Sections | Several. One is open, or several with multiple. | One |
| Trigger | A full-width row with a caret, in an h3 | A button with no classes, or the element passed to render |
| Style | A line between items and padded rows | None |
| Panel Role | region, named by its trigger | None |
| State | value, an array of the open items’ values | open, a boolean |
Anatomy
| Element | Usage |
|---|---|
| Trigger | Required |
| Caret | Required |
| Panel | Required |
| Item | Required |
AccordionTrigger renders the heading, the button, and the caret.
Behavior
An Accordion fills the width of its container. A label that is longer than one line wraps. By default, all items are closed. To open an item initially, add its value to defaultValue.
Hidden Content
By default, a closed panel isn’t in the page’s markup, so users can’t reach its text with the browser’s find-in-page. If you set hiddenUntilFound on Accordion, closed panels stay in the markup with hidden="until-found", and find-in-page reaches their text and opens the item. If you set keepMounted, closed panels stay in the markup with the hidden attribute.
Content
| String | Rule | Example | Counterexample |
|---|---|---|---|
| Trigger | Ask the question or name the section that the panel contains | “When is an invoice overdue?” | “Learn more” |
Accessibility
Base UI’s Accordion wraps each trigger in an h3 and names each panel by its trigger. Users move between triggers with Tab; the arrow keys, Home, and End don’t move focus between them.
Installation
npx shadcn@latest add @summit/accordionUsage
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
<Accordion defaultValue={['overdue']}>
<AccordionItem value="overdue">
<AccordionTrigger>When is an invoice overdue?</AccordionTrigger>
<AccordionContent>The day after its due date.</AccordionContent>
</AccordionItem>
<AccordionItem value="reminders">
<AccordionTrigger>Who gets payment reminders?</AccordionTrigger>
<AccordionContent>The billing contact of the client.</AccordionContent>
</AccordionItem>
</Accordion>;Keep Several Items Open
To allow several items to stay open, set multiple on Accordion.
<Accordion multiple defaultValue={['overdue', 'reminders']}>
<AccordionItem value="overdue" />
<AccordionItem value="reminders" />
</Accordion>Disable an Item
To disable one item, set disabled on its AccordionItem. To disable all items, set disabled on Accordion. A disabled trigger is removed from the tab order.
<AccordionItem value="currency" disabled>
<AccordionTrigger>Can I bill in another currency?</AccordionTrigger>
<AccordionContent>Yes. Set the currency on the client.</AccordionContent>
</AccordionItem>API Reference
Summit adds no props. className on AccordionContent is applied to the inner div. The parts accept the props of their matching parts in Base UI’s Accordion, where AccordionContent is Accordion.Panel. See the Base UI Accordion documentation for multiple, value, defaultValue, onValueChange, disabled, hiddenUntilFound, and keepMounted.