Accordion
A set of stacked headings that expand or collapse to reveal related content, supporting single or multiple open sections.
An accordion is a vertically stacked set of interactive headings that each reveal a section of content. They're commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
Use accordions when you need to save vertical space by hiding content until needed, particularly with a large amount of content that's not all needed at once.
Ensure accordion headers are properly marked up with buttons and use aria-expanded to indicate the state to screen readers. Our component handles this for you automatically.
Variants
An accordion is a vertically stacked set of interactive headings that each reveal a section of content. They're commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.
Use accordions when you need to save vertical space by hiding content until needed, particularly with a large amount of content that's not all needed at once.
Features
- Supports single and multiple selection modes
- Controlled and uncontrolled modes
- CVA-powered design variants
- Smooth transitions with optional animations
- Customizable padding, color, and border per item
- Built-in accessibility via
aria-*attributes
Variants
Props
Accordion Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Accordion items |
| selectionMode | "single" | "multiple" | "single" | Controls how many items can be expanded |
| expandedItems | string[] | — | Controlled list of expanded item IDs |
| onExpandedChange | (ids: string[]) => void | — | Callback when expanded items change |
AccordionItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique identifier for the item |
| title | ReactNode | — | Accordion item title |
| children | ReactNode | — | Content inside the accordion item |
| itemColor | "light" | "dark" | "light" | Background color variant |
| itemPadding | "sm" | "md" | "lg" | "md" | Padding size variant |
| itemBorder | "none" | "default" | "default" | Border style variant |
| itemDisableAnimation | boolean | false | Whether to disable expand/collapse animation |