Accordion - Keep React
Table of Contents#
- Default Accordion
- Flush Accordion
- Default Open item
- Open Multiple Panel
- Disabled Accordion
- Accordion API Reference
- Item API Reference
Default Accordion#
The default Accordion component lets users expand and collapse sections by clicking on the header or button.
Flush Accordion#
The flush property removes the outer border and background color, giving the accordion a minimalistic, seamless look.
Default Open item#
If you need one or more accordion items to be open by default, use the defaultValue prop with the corresponding item's value property.
Open Multiple Panel#
To allow multiple accordion items to be open at the same time, set the accordion's type prop to "multiple".
Disabled Accordion#
To prevent interaction with certain accordion, use the disabled property on specific Accordion components.
Accordion API Reference#
Explore the full range of props available for the Accordion component:
| Property | Description | Type | Default |
|---|---|---|---|
| type | Determines whether one or multiple items can be opened at the same time. | single multiple | single |
| flush | Accordion without outer border and and background color | boolean | false |
| disabled | Disable interaction with the accordion. | boolean | false |
| collapsible | When type is "single", allows closing content when clicking trigger for an open item. | boolean | true |
| defaultValue | Which panel will be open by default. | string | None |
Item API Reference#
Learn about the properties available for individual Accordion items:
| Property | Description | Type | Default |
|---|---|---|---|
| value | This value connect to the content | string | None |
| disabled | Disable interaction with the accordion item. | boolean | false |