Accordion
Stacks titled sections that expand to show content, one or several at a time.
Acme Corporation
Acme is a manufacturing customer in San Francisco with 1,200 employees and two subsidiaries.
Installation
The CLI installs the Radix or Base UI file to match your project.
If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.
When to use
Use it
- A record or settings page has several groups of details, and people need only some of them at once: a record's details, opportunities and cases.
- A long page of related sections should start short, with people opening what they need.
- One section open at a time keeps a narrow panel short. Several open at once lets people compare sections.
Don't use it
- There's one block to show and hide. Use Collapsible.
- People switch between views of the same thing and never need two at once. Use Tabs.
- The content is short enough to show in full. Use Card with headings.
- The content is a list of records with actions. Use Table or Item.
Usage
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion"Accordion
└── AccordionItem
├── AccordionTrigger
└── AccordionContentIn Radix projects, Accordion needs type="single" or type="multiple", and collapsible lets the open section close. In Base UI projects, there's no type: pass multiple to let several sections open, give values as an array (defaultValue={["details"]}), and an open section always closes.
Examples
Multiple open
Two of three sections open at once, set with `multiple` on `Accordion` (`type="multiple"` in Radix projects).
Disabled section
The middle section disabled with `disabled` on its `AccordionItem`, and the first open.
API reference
| Part | Built on |
|---|---|
Accordion | Radix Accordion.Root (opens in a new tab) |
AccordionItem | Radix Accordion.Item (opens in a new tab) |
AccordionTrigger | Radix Accordion.Trigger (opens in a new tab) |
AccordionContent | Radix Accordion.Content (opens in a new tab) |
SLDS mapping
Accordion is slds-accordion, the base of lightning-accordion. AccordionItem is slds-accordion__list-item with its slds-accordion__section, and draws the line between sections. AccordionTrigger is slds-accordion__summary-action in slds-accordion__summary-heading, with the chevron, slds-accordion__summary-action-icon, before the title. AccordionContent is slds-accordion__content. Several open sections are lightning-accordion's allow-multiple-sections-open.
Known gaps:
- SLDS's summary can hold an actions menu beside the title. Here the trigger is the whole row, so a menu can't sit in it. Put actions in the content.
Keyboard interactions
| Keys | Action |
|---|---|
| Space, Enter | Opens or closes the focused section. |
| Arrow Down, Arrow Up | Moves to the next or previous trigger, wrapping at the ends. Radix projects only. |
| Home, End | Moves to the first or last trigger. Radix projects only. |
In Base UI projects, triggers move with Tab alone, and a disabled trigger stays in the tab order but won't open.
Accessibility
- Each trigger is a button inside an
h3. Put a level 2 heading above the accordion, as the examples do, so the page's headings stay in order. - Content links are underlined only on hover, and in Cosmos dark a link inside a sentence barely differs from the muted text around it. Put a link on its own line.
Responsive behavior
- The accordion fills its container's width.
- On screens narrower than 64rem (1024px), long titles wrap. From 64rem up, a long title stays on one line and ends in an ellipsis, so keep titles short enough to read when cut.
Rules
- Give every
AccordionItema uniquevalue. - Keep titles to a few words of plain text. A button or link inside
AccordionTriggerputs a control inside a button. - Wrap content paragraphs in
p, so they take the section's spacing.