Design Tokens for Mesh have just been released!
Skip to content

Expander Group

The Expander Group is used for grouping Expander components.

Installation

bash
npm install @nib-components/expander-group

Usage

jsx
import ExpanderGroup from '@nib-components/expander-group';

Interactive demo

jsx

Props

PropTypeDefaultDescription
expandedIndexnumbernullIndex of the expander to be expanded.
expandedIndexesnumber[]nullIndexes of multiple expanders to be expanded. Requires multiExpanded = true
onExpanderToggledfunctionA function to be called when the expander is toggled.
multiExpandedbooleanfalseBy default, only a single <Expander /> is allowed to be open at any one time. This allows more than one to be open at any one time.

In addition to these props, expanded and onToggleExpanded props are passed down to the children of <ExpanderGroup /> to keep state on the expanded state.

Considerations

Expander Group by default limits the number of Expanders allowed open at a time to one. However, Expander Group can allow multiple Expanders to be open at a time with the multiExpanded prop.

Expander Group can initially open a specifc Expander by setting the index to the zero-based index of the Expander using the expandedIndex prop.