Demonstration and configuration of the Radzen Blazor Accordion component.
These demos showcase expandable accordion panels with single or multiple expand modes, dynamically created items with two-way binding, expand/collapse events, and the ability to disable expand/collapse functionality.
By default, only one accordion item can be expanded at a time, automatically collapsing others.
Set Multiple to true to enable multiple expand.
Use two-way binding @bind-Selected to bind items selection to your model.
Handle Expand and Collapse events to respond when accordion items are opened or closed.
Console log
Use Disabled="true" on accordion items to prevent them from being expanded or collapsed.
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Accordion component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to an Accordion. |
| DownArrow | Focus next Accordion item. |
| UpArrow | Focus previous Accordion item. |
| Space or Enter | Change the state of a focused Accordion item switching between expanded and collapsed. |