Top
Accordion - Managing accordion tabs
Accordion
By default, the <Accordion /> has uncontrolled behaviour - meaning it will be expanding tabs as usual when the user clicks on tab titles. Once the <Accordion /> is focused, tabs can also be expanded/collapsed via keyboard interaction. You can use Arrow up/down to navigate between tabs, and hit Enter to expand/collapse the currently focused tab.
In order to have a controlled <Accordion />, you can use the activeIndex prop. When using the controlled behaviour, you need to make sure you update the value of activeIndex when onActivate(activeIndex) (or onExpand(activeIndex)) is triggered.
There is an important difference between onActivate(activeIndex) and onExpand(activeIndex): onActivate(activeIndex) is called whenever onExpand(expandIndex) is called, plus, in accordions with collapsible=true or multiExpand=true, onActivate(activeIndex) is also called when an expanded tab is collapsed.
Therefore, it's best to update the value for activeIndex by using onActivate(activeIndex).
For uncontrolled behaviour, use defaultActiveIndex. In this case, the <Accordion /> will store the active tabs in its own internal state.