Accordion
Accordions are vertically stacked interactive headings that reveal or hide associated content sections. They help organize large amounts of information into digestible chunks, reducing visual clutter while keeping content accessible. Our accordion system supports single or multiple expanded sections, customizable toggle positions, and smooth animations.
Basic Usage
The Accordion uses a compound component pattern with four parts: Accordion, AccordionItem, AccordionTrigger, and AccordionContent.
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components'
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>What is your return policy?</AccordionTrigger>
<AccordionContent>
We offer a 30-day return policy on all items.
</AccordionContent>
</AccordionItem>
</Accordion>Toggle Position
The toggle icon can be positioned on the left or right side of the trigger. Use the togglePosition prop on AccordionItem.
Toggle on Right (Default)
Toggle on Left
// Toggle on right (default)
<AccordionItem value="item-1" togglePosition="right">
<AccordionTrigger>Toggle on right</AccordionTrigger>
<AccordionContent>Content here</AccordionContent>
</AccordionItem>
// Toggle on left
<AccordionItem value="item-1" togglePosition="left">
<AccordionTrigger>Toggle on left</AccordionTrigger>
<AccordionContent>Content here</AccordionContent>
</AccordionItem>With Icons
You can add an optional icon to the trigger when using right toggle position.
<AccordionTrigger icon={<GlobeIcon />}>
International Shipping
</AccordionTrigger>Multiple Sections
Use type="multiple" to allow multiple sections to be open at the same time.
<Accordion type="multiple">
<AccordionItem value="item-1">...</AccordionItem>
<AccordionItem value="item-2">...</AccordionItem>
</Accordion>Props
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | - | Whether only one or multiple items can be open |
| collapsible | boolean | false | When type="single", allows closing all items |
| defaultValue | string | string[] | - | The default open item(s) |
| value | string | string[] | - | Controlled open item(s) |
| onValueChange | function | - | Callback when open items change |
| className | string | - | Additional CSS classes |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique identifier for the item (required) |
| togglePosition | "left" | "right" | "right" | Position of the toggle icon |
| disabled | boolean | false | Whether the item is disabled |
| className | string | - | Additional CSS classes |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | Optional icon (only shown when toggle is on right) |
| className | string | - | Additional CSS classes |
| children | React.ReactNode | - | The trigger content |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| children | React.ReactNode | - | The content to reveal |