Accordion
Reveals or hides sections of related content in a vertically stacked layout. Useful for organizing dense information into digestible sections.
Code
Installation
npx shadcn@latest add accordionBasic Example
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Is it accessible?</AccordionTrigger>
<AccordionContent>
Yes. It adheres to the WAI-ARIA design pattern.
</AccordionContent>
</AccordionItem>
</Accordion>Multiple Items
<Accordion type="multiple">
<AccordionItem value="item-1">
<AccordionTrigger>What is React?</AccordionTrigger>
<AccordionContent>React is a JavaScript library...</AccordionContent>
</AccordionItem>
<AccordionItem value="item-2">
<AccordionTrigger>What is TypeScript?</AccordionTrigger>
<AccordionContent>TypeScript is a strongly typed language...</AccordionContent>
</AccordionItem>
</Accordion>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | — | Type of accordion. Options: "single" (one item open), "multiple" (multiple items open) |
| collapsible | boolean | false | Whether an open item can be closed (only for type="single") |
| value | string | string[] | — | Controlled value of open items (AccordionItem requires value prop) |
| ...props | HTMLAttributes | — | All standard HTML attributes |
Single Type
Multiple Type
Usage Guidelines
When to Use
Use accordions to organize content into collapsible sections, reducing visual clutter while keeping information accessible. Ideal for FAQs, documentation, settings panels, and feature descriptions.
Choose "single" type when users should focus on one topic at a time. Use "multiple" type when users need to compare or reference multiple sections simultaneously.
Best Practices
- Keep accordion labels concise and descriptive
- Use consistent formatting across all accordion items
- Limit the number of accordion items to prevent overwhelming users
- Consider expanding the first item by default to set context
- Ensure accordion content is valuable and not just filler
Accessibility
Accordions are fully keyboard accessible. Users can navigate with Tab, open/close with Enter or Space, and arrow keys navigate between items.
The component uses proper ARIA attributes and semantic HTML to ensure screen readers can announce the accordion state and content appropriately.