Accordion
View in Storybook
Explore interactive examples and all component variations in our Storybook.
The Accordion component is used to display and hide content in expandable sections. It's built on top of Radix UI's Accordion primitive and provides a clean, accessible way to organize content.
Basic Usage
Multiple Items Open
Default Open Item
This accordion item is open by default because we set defaultValue="item-2".
FAQ Style
Disabled Items
Properties
Accordion
| Property | Type | Description |
|---|---|---|
type | "single" | "multiple" | Defines whether only one item can be open at a time ("single") or multiple ("multiple"). |
collapsible | boolean | If true, allows the currently open item to be closed. |
defaultValue | string | string[] | The value of the item (or items) that will be open by default. |
value | string | string[] | The value of the currently open item (or items) (controlled). |
onValueChange | (value: string | string[]) => void | Callback fired when the value of the open item changes. |
dir | "ltr" | "rtl" | Text direction. |
orientation | "vertical" | "horizontal" | Accordion orientation. |
AccordionItem
| Property | Type | Description |
|---|---|---|
value | string | A unique value to identify the accordion item. Required. |
disabled | boolean | If true, the accordion item cannot be opened or closed. |
AccordionTrigger
Does not have specific properties beyond standard HTML properties.
AccordionContent
Does not have specific properties beyond standard HTML properties.
Customization
You can customize the appearance of the Accordion using CSS classes or Tailwind CSS.
Common Use Cases
The Accordion component is perfect for:
- FAQ sections - Organize frequently asked questions in a compact, searchable format
- Settings panels - Group related configuration options together
- Documentation - Structure complex information into digestible sections
- Product features - Showcase features without overwhelming the user
- Terms and conditions - Break down legal text into manageable sections
- Troubleshooting guides - Organize solutions by problem category
The component is built on Radix UI's Accordion primitive, ensuring full accessibility compliance with ARIA standards and keyboard navigation support.