Blazor Accordion
Single or multiple expand modes, dynamic items, and expand/collapse events.
Accordion with single expand link
By default, only one accordion item can be expanded at a time, automatically collapsing others.
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
Handle Expand and Collapse events to respond when accordion items are opened or closed.
Console log
Client-side rendering link
Set RenderMode to AccordionRenderMode.Client to handle expand/collapse with JavaScript. All items are rendered initially and toggled client-side for faster interaction.
Console log
Disable expand/collapse link
Use Disabled="true" on accordion items to prevent them from being expanded or collapsed.
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-2026 Radzen.
Source Code licensed under
MIT