Accordion
Accordions allow you to reduce vertical space by creating collapsible sections in your content while also organizing and grouping information.
It's possible to have multiple panels open at the same time by adding the multiple
prop.
This will disable auto closing of panels when opening another one.
You can pass an array of numbers to defaultIndex
to open multiple panels by default.
You can use headerIcon
to add an icon to the header.
The icon needs to be a function, you can import them from libraries such as react-icons or heroicons.
The wrapper for the accordion panels.
Prop | Default | Description |
---|---|---|
defaultIndex | undefined | Number | Array\<Number\> The index of the panel to be open by default |
multiple | false | Boolean Whether to allow multiple panels to be open at the same time |
divider | false | Boolean Whether to show a divider between panels |
Prop | Default | Description |
---|---|---|
header | String | React.Element The header of the panel | |
headerIcon | Function The icon to show in the header | |
arrowIcon | Function The icon to show in the header |