Accordion
Collapsible content sections with smooth animations.
Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It's animated by default, but you can disable it if you prefer.
Examples
Multiple Items
First section
Content for the first section.
Second section
Content for the second section.
Third section
Content for the third section.
With Default Value
Section 1
Content for section 1.
Section 2 (open by default)
This section is open by default using the defaultValue prop.
Section 3
Content for section 3.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'single' | 'multiple' | 'single' | Determines whether one or multiple items can be opened at the same time. |
| defaultValue | string | string[] | undefined | The value of the item(s) to expand by default. |
| value | string | string[] | undefined | The controlled value of the item(s) to expand. |
| onValueChange | (value: string | string[]) => void | undefined | Event handler called when the expanded state changes. |
| collapsible | boolean | false | When true, allows closing content by clicking the trigger for an open item. |