Class RadzenAccordion

An accordion component that displays collapsible content panels with only one or multiple panels expanded at a time. RadzenAccordion organizes content into expandable sections, saving vertical space while keeping all content accessible. Ideal for FAQs, settings panels, grouped content, or any scenario where showing all content at once would be overwhelming. Features single/multiple expand control, optional icons in panel headers, programmatic control via SelectedIndex two-way binding, Expand and Collapse event callbacks, keyboard navigation (Arrow keys, Space/Enter, Home/End), and disabled item support. By default, only one panel can be expanded at a time (Multiple = false). Set Multiple = true to allow multiple panels to be expanded simultaneously.

Inheritance

object

ComponentBase

RadzenComponent

RadzenAccordion

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inherited Members

RadzenComponent.OnMouseEnter()

RadzenComponent.OnMouseLeave()

RadzenComponent.OnContextMenu(MouseEventArgs)

RadzenComponent.GetCssClass()

RadzenComponent.GetId()

RadzenComponent.Debounce(Func<Task>, int)

RadzenComponent.OnAfterRenderAsync(bool)

RadzenComponent.RaiseContextMenu(MouseEventArgs)

RadzenComponent.RaiseMouseEnter()

RadzenComponent.AddContextMenu()

RadzenComponent.RaiseMouseLeave()

RadzenComponent.Dispose()

RadzenComponent.Attributes

RadzenComponent.Element

RadzenComponent.MouseEnter

RadzenComponent.MouseLeave

RadzenComponent.ContextMenu

RadzenComponent.Culture

RadzenComponent.DefaultCulture

RadzenComponent.Style

RadzenComponent.Visible

RadzenComponent.UniqueID

RadzenComponent.JSRuntime

RadzenComponent.IsJSRuntimeAvailable

RadzenComponent.Reference

RadzenComponent.CurrentStyle

ComponentBase.OnInitializedAsync()

ComponentBase.OnParametersSet()

ComponentBase.OnParametersSetAsync()

ComponentBase.StateHasChanged()

ComponentBase.ShouldRender()

ComponentBase.OnAfterRender(bool)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.DispatchExceptionAsync(Exception)

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Namespace: Radzen.Blazor

Assembly: Radzen.Blazor.dll

Syntax

public class RadzenAccordion : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Examples

Basic accordion (single expand mode):

<RadzenAccordion>
    <Items>
        <RadzenAccordionItem Text="Personal Information" Icon="person">
            Name, email, address fields...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Account Settings" Icon="settings">
            Password, preferences, notifications...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Billing" Icon="payment">
            Payment methods, invoices...
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Accordion with multiple expand and events:

<RadzenAccordion Multiple="true" Expand=@OnExpand Collapse=@OnCollapse>
    <Items>
        <RadzenAccordionItem Text="FAQ 1" Selected="true">Answer 1</RadzenAccordionItem>
        <RadzenAccordionItem Text="FAQ 2">Answer 2</RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Constructors

RadzenAccordion()

An accordion component that displays collapsible content panels with only one or multiple panels expanded at a time. RadzenAccordion organizes content into expandable sections, saving vertical space while keeping all content accessible. Ideal for FAQs, settings panels, grouped content, or any scenario where showing all content at once would be overwhelming. Features single/multiple expand control, optional icons in panel headers, programmatic control via SelectedIndex two-way binding, Expand and Collapse event callbacks, keyboard navigation (Arrow keys, Space/Enter, Home/End), and disabled item support. By default, only one panel can be expanded at a time (Multiple = false). Set Multiple = true to allow multiple panels to be expanded simultaneously.

Declaration

public RadzenAccordion()

Examples

Basic accordion (single expand mode):

<RadzenAccordion>
    <Items>
        <RadzenAccordionItem Text="Personal Information" Icon="person">
            Name, email, address fields...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Account Settings" Icon="settings">
            Password, preferences, notifications...
        </RadzenAccordionItem>
        <RadzenAccordionItem Text="Billing" Icon="payment">
            Payment methods, invoices...
        </RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Accordion with multiple expand and events:

<RadzenAccordion Multiple="true" Expand=@OnExpand Collapse=@OnCollapse>
    <Items>
        <RadzenAccordionItem Text="FAQ 1" Selected="true">Answer 1</RadzenAccordionItem>
        <RadzenAccordionItem Text="FAQ 2">Answer 2</RadzenAccordionItem>
    </Items>
</RadzenAccordion>

Properties

Collapse

Gets or sets the callback invoked when an accordion item is collapsed. Receives the index of the collapsed item as a parameter.

Declaration

[Parameter]
public EventCallback<int> Collapse { get; set; }

Property Value

Type	Description
EventCallback<int>	The collapse event callback.

Expand

Gets or sets the callback invoked when an accordion item is expanded. Receives the index of the expanded item as a parameter.

Declaration

[Parameter]
public EventCallback<int> Expand { get; set; }

Property Value

Type	Description
EventCallback<int>	The expand event callback.

Items

Gets or sets the render fragment containing RadzenAccordionItem components that define the accordion panels. Each RadzenAccordionItem represents one expandable panel with its header and content.

Declaration

[Parameter]
public RenderFragment Items { get; set; }

Property Value

Type	Description
RenderFragment	The items render fragment containing accordion item definitions.

Multiple

Gets or sets whether multiple accordion items can be expanded simultaneously. When false (default), expanding one item automatically collapses others. When true, users can expand multiple items independently.

Declaration

[Parameter]
public bool Multiple { get; set; }

Property Value

Type	Description
bool	true to allow multiple items expanded; false for single-item expansion. Default is false.

SelectedIndex

Gets or sets the zero-based index of the currently expanded item. Use with @bind-SelectedIndex for two-way binding to programmatically control which item is expanded. In multiple expand mode, this represents the last expanded item.

Declaration

[Parameter]
public int SelectedIndex { get; set; }

Property Value

Type	Description
int	The selected item index. Default is -1 (no selection).

SelectedIndexChanged

Gets or sets the callback invoked when the selected index changes. Used for two-way binding with @bind-SelectedIndex.

Declaration

[Parameter]
public EventCallback<int> SelectedIndexChanged { get; set; }

Property Value

Type	Description
EventCallback<int>	The event callback receiving the new selected index.

Methods

AddItem(RadzenAccordionItem)

Adds the item.

Declaration

public void AddItem(RadzenAccordionItem item)

Parameters

Type	Name	Description
RadzenAccordionItem	item	The item.

BuildRenderTree(RenderTreeBuilder)

An accordion component that displays collapsible content panels with only one or multiple panels expanded at a time. RadzenAccordion organizes content into expandable sections, saving vertical space while keeping all content accessible. Ideal for FAQs, settings panels, grouped content, or any scenario where showing all content at once would be overwhelming. Features single/multiple expand control, optional icons in panel headers, programmatic control via SelectedIndex two-way binding, Expand and Collapse event callbacks, keyboard navigation (Arrow keys, Space/Enter, Home/End), and disabled item support. By default, only one panel can be expanded at a time (Multiple = false). Set Multiple = true to allow multiple panels to be expanded simultaneously.

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetComponentCssClass()

Gets the component CSS class.

Declaration

protected override string GetComponentCssClass()

Returns

Type	Description
string

Overrides

RadzenComponent.GetComponentCssClass()

IsSelected(int, RadzenAccordionItem)

Determines whether the specified index is selected.

Declaration

protected bool IsSelected(int index, RadzenAccordionItem item)

Parameters

Type	Name	Description
int	index	The index.
RadzenAccordionItem	item	The item.

Returns

Type	Description
bool	true if the specified index is selected; otherwise, false.

ItemAriaLabel(int, RadzenAccordionItem)

Gets the item's aria-label attribute value.

Declaration

protected string ItemAriaLabel(int index, RadzenAccordionItem item)

Parameters

Type	Name	Description
int	index	The index.
RadzenAccordionItem	item	The item.

Returns

Type	Description
string	The item's collapse or expand aria-label value depending on if the item is expanded or collapsed. If the relevant aria-label is null or whitespace this method returns "Expand" or "Collapse".

ItemTitle(int, RadzenAccordionItem)

Gets the item's title attribute value.

Declaration

protected string ItemTitle(int index, RadzenAccordionItem item)

Parameters

Type	Name	Description
int	index	The index.
RadzenAccordionItem	item	The item.

Returns

Type	Description
string	The item's collapse or expand title value depending on if the item is expanded or collapsed. If the relevant title is null or whitespace this method returns "Expand" or "Collapse".

OnInitialized()

Called by the Blazor runtime.

Declaration

protected override void OnInitialized()

Overrides

RadzenComponent.OnInitialized()

Refresh()

Refreshes this instance.

Declaration

public void Refresh()

RemoveItem(RadzenAccordionItem)

Removes the item.

Declaration

public void RemoveItem(RadzenAccordionItem item)

Parameters

Type	Name	Description
RadzenAccordionItem	item	The item.

SetParametersAsync(ParameterView)

Called by the Blazor runtime when parameters are set.

Declaration

public override Task SetParametersAsync(ParameterView parameters)

Parameters

Type	Name	Description
ParameterView	parameters	The parameters.

Returns

Type	Description
Task

Overrides

RadzenComponent.SetParametersAsync(ParameterView)

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable