Blazor Accordion
The Blazor Accordion shows collapsible panels with single or multiple expand modes, dynamic items, and expand/collapse events.
Accordion with single expand linkLink to this section
By default, only one accordion item can be expanded at a time, automatically collapsing others.
Accordion with multiple expand linkLink to this section
Set Multiple to true to enable multiple expand.
Dynamically create Accordion items linkLink to this section
Use two-way binding @bind-Selected to bind items selection to your model.
Expand/Collapse events linkLink to this section
Handle Expand and Collapse events to respond when accordion items are opened or closed.
Console log
Client-side rendering linkLink to this section
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 linkLink to this section
Use Disabled="true" on accordion items to prevent them from being expanded or collapsed.
Keyboard Navigation linkLink to this section
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 | Move focus to the next/previous focusable element; each header is part of the page Tab sequence. |
| DownArrow | Focus the next enabled item (stops at the last; disabled items are skipped). |
| UpArrow | Focus the previous enabled item (stops at the first; disabled items are skipped). |
| Home | Focus the first enabled item. |
| End | Focus the last enabled item. |
| Space or Enter | Change the state of a focused Accordion item switching between expanded and collapsed. |
Frequently asked questions
How do I allow multiple panels open in the Blazor Accordion?
Set Multiple to true so more than one panel can be expanded at once; otherwise opening one collapses the others.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT