Accordion
A collapsible content component for organizing information into expandable sections. Supports multiple variants, sizes, single or multiple expansion, and smooth animations powered by Framer Motion.
Live Preview
Interact with the accordion component in real time. Adjust variant, size, and behavior to see changes instantly.
1<Accordion2items={items}3variant="bordered"4size="md"5iconPosition="right"6/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Accordion component into your file.
import { Accordion } from '@/components/aidash/accordion';Usage
The simplest way to use the Accordion with default props.
1const items = [2{3 id: 'q1',4 title: 'What is your return policy?',5 content: 'We offer a 30-day money-back guarantee...',6},7{8 id: 'q2',9 title: 'How long does shipping take?',10 content: 'Standard shipping takes 5-7 business days...',11},12{13 id: 'q3',14 title: 'Do you offer international shipping?',15 content: 'Yes, we ship to over 50 countries worldwide...',16},17];18 19<Accordion items={items} />Variants
Three visual variants to match different design contexts.
Bordered
Flush
Separated
1<Accordion variant="bordered" items={items} />2<Accordion variant="flush" items={items} />3<Accordion variant="separated" items={items} />bordered for standalone sections, flush for embedding within cards, and separated for visually distinct items.Sizes
Three sizes to fit different layout contexts and content density.
Small
Medium (Default)
Large
1<Accordion size="sm" items={items} />2<Accordion size="md" items={items} />3<Accordion size="lg" items={items} />Multiple Mode
Allow multiple accordion items to be expanded at the same time.
1<Accordion2multiple3items={[4 { id: '1', title: 'First Section', content: '...' },5 { id: '2', title: 'Second Section', content: '...' },6 { id: '3', title: 'Third Section', content: '...' },7]}8/>Default Expanded
Pre-expand specific items when the accordion first renders.
1<Accordion2defaultExpanded={['config']}3items={[4 { id: 'start', title: 'Getting Started', content: '...' },5 { id: 'config', title: 'Configuration', content: '...' },6 { id: 'advanced', title: 'Advanced Usage', content: '...' },7]}8/>With Custom Icons
Add custom icons to accordion headers for visual context.
1<Accordion2items={[3 {4 id: '1',5 title: 'Frequently Asked Questions',6 content: 'Find answers to common questions...',7 icon: <QuestionIcon />,8 },9 {10 id: '2',11 title: 'Security & Privacy',12 content: 'We use industry-standard encryption...',13 icon: <ShieldIcon />,14 },15]}16/>Disabled Items
Disable specific accordion items to prevent user interaction.
1<Accordion2items={[3 { id: '1', title: 'Available Feature', content: '...' },4 { id: '2', title: 'Premium Feature (Locked)', content: '...', disabled: true },5 { id: '3', title: 'Another Available Feature', content: '...' },6]}7/>Nested Content
Accordion content can include any React node -- lists, code blocks, images, and more.
1<Accordion2items={[3 {4 id: 'req',5 title: 'System Requirements',6 content: (7 <ul className="list-disc list-inside">8 <li>Node.js 18.0 or later</li>9 <li>React 18.0 or later</li>10 <li>TypeScript 5.0 or later</li>11 </ul>12 ),13 },14]}15/>Accessibility
Built-in accessibility features following WAI-ARIA Accordion pattern.
ARIA Roles & States
Headers use role="button" with aria-expanded to communicate state. Content panels use role="region" with aria-labelledby linking back to the header.
Keyboard Navigation
Navigate between headers with Tab. Toggle items with Enter or Space. Disabled items are skipped in the tab order.
Focus Management
Uses focus-visible for keyboard-only focus indicators. Focus ring appears only during keyboard navigation, not on mouse click.
Screen Reader Support
Expanded/collapsed state is announced to screen readers. Disabled items are communicated via aria-disabled.
1{/* Rendered HTML structure */}2<div role="region">3<h3>4 <button5 aria-expanded="true"6 aria-controls="panel-1"7 id="header-1"8 >9 Section Title10 </button>11</h3>12<div13 role="region"14 aria-labelledby="header-1"15 id="panel-1"16>17 Section content...18</div>19</div>API Reference
Complete list of props accepted by the Accordion component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | — | Array of accordion items to render |
| multiple | boolean | false | Allow multiple items to be expanded simultaneously |
| defaultExpanded | string[] | [] | IDs of items expanded by default |
| variant | 'bordered' | 'flush' | 'separated' | 'bordered' | Visual style of the accordion |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the accordion items |
| iconPosition | 'left' | 'right' | 'right' | Position of the expand/collapse icon |
| className | string | '' | Additional CSS classes |
| onChange | (expandedIds: string[]) => void | — | Callback fired when expanded items change |
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique identifier for the item |
| title | ReactNode | — | Content rendered in the accordion header |
| content | ReactNode | — | Content rendered when the item is expanded |
| icon | ReactNode | — | Optional icon rendered in the header |
| disabled | boolean | false | Disable interaction with this item |
title and content fields accept ReactNode, so you can pass strings, JSX elements, or any renderable content.Related
Other components that work well alongside Accordion.