Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
Show title only by default.
Specify what to display first.
Add text or components as subtitle.
Highlight importance at a higher level.
Pass visible and onVisibleChange to control a section. A section with disabled cannot be toggled.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| title(required) | collapse title | string | - | - |
| subtitle | description | string | - | - |
| initialVisible | initial expanded | boolean | - | false |
| visible | expanded, to control it | boolean | - | - |
| onVisibleChange | called with the next state when the header is clicked | (visible: boolean) => void | - | - |
| disabled | the section cannot be toggled | boolean | - | false |
| shadow | show shadow card | boolean | - | false |
| ... | native props | HTMLAttributes | 'id', 'name', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| accordion | accordion mode | boolean | - | true |
| ... | native props | HTMLAttributes | 'id', 'name', 'className', ... | - |
The title is a heading with a real button inside, so a screen reader announces it as a heading and as a button that is expanded or collapsed, and aria-controls points at the content. Enter and Space toggle a section. In a Collapse.Group, the Up and Down arrows move focus between the titles, wrapping at the ends, and Home and End go to the first and the last. Disabled sections are skipped.