Accordion
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.
Accordion with single expand link
Accordion with multiple expand link
Set Multiple to true to enable multiple expand.
Dynamically create Accordion items link
Use two-way binding @bind-Selected to bind items selection to your model.
Expand/Collapse events link
Disable expand/collapse link
Keyboard Navigation link
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. |
Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under
MIT