Accordion
The Accordion component is used to expand and collapse the content area by clicking the title. It is often used to display a large amount of content in a limited space.
Import
import { Accordion } from 'rsuite';Examples
Basic
By default, multiple panels can be expanded. Click the title to expand or collapse the accordion panel area.
Bordered
Expand only one panel
When defaultActiveKey or activeKey is set, only one panel can be expanded.
Controlled
activeKey can be controlled by onSelect callback.
Custom Indicator
Custom Header
Disabled Panel
Accessibility
ARIA properties
aria-expanded: Indicates whether the panel is expanded or collapsed.aria-controls: Identifies the content that is controlled by the panel.aria-labelledby: Identifies the element that serves as the title for the panel.aria-disabled: Indicates that the panel is disabled.
Keyboard interactions
- Tab: Move focus to the next focusable panel.
- Enter or Space: Expand or collapse the panel.
Resources
Props
<Accordion>
| Property | Type (Default) |
Description |
|---|---|---|
| activeKey | string | The active item's event key. |
| bordered | boolean | Show border. |
| classPrefix | string | The prefix of the component CSS class. |
| defaultActiveKey | string | The default active item's event key. |
| onSelect | (eventKey: string, event) => void | Callback fired when the active item changes. |
<Accordion.Panel>
| Property | Type (Default) |
Description |
|---|---|---|
| bodyFill | boolean | Content area filled with containers. |
| caretAs | ReactNode | Custom indicator. |
| classPrefix | string ('panel') |
The prefix of the component CSS class. |
| defaultExpanded | boolean | Expand the panel by default. |
| disabled | boolean | Disable the panel. |
| eventKey | string | The event key corresponding to the panel. |
| expanded | boolean | Expand the panel. |
| header | ReactNode | The title of the panel. |