New to Telerik UI for Blazor? Download free 30-day trial

ListBox Selection

This article describes the ListBox selection feature, including the available selection modes, and how to use the SelectedItems parameter.

Selection Modes

The ListBox component provides users two ways to select items. This depends on the value of the SelectionMode parameter, which expects a member of the ListBoxSelectionMode enum.

Selection Mode Description
Single Users can select only one ListBox item. They can change the selected item, but cannot deselect the selected one. You can use a custom toolbar button to clear the selection. See the example below.
Multiple Users can select any number of items. The ListBox supports selection of adjacent items with Shift or non-adjacent items with Ctrl (Cmd on a Mac). Use mouse clicks or the arrow keys, as described on the ListBox Keyboard Navigation demo.

SelectedItems Parameter

The SelectedItems parameter of the ListBox supports two-way binding. In this case, the component will update the SelectedItems parameter value automatically when the user changes the current selection. If you use SelectedItems with one-way binding, you must subscribe to the SelectedItemsChanged event to update the SelectedItems parameter value manually on each user selection.

The ListBox SelectedItems parameter must be defined as IEnumerable<T> in the application. Unlike the Data parameter, it cannot be a List<T>, because the built-in SelectedItemsChanged handler that is used with two-way binding is defined in the ListBox source code as EventCallback<IEnumerable<T>>.


Using ListBox SelectionMode and Custom Deselect Tool

@* Resetting ListBoxSelectedItems on SelectionMode change is optional *@

<TelerikRadioGroup Data="@RadioGroupData"
                   ValueChanged="@( (ListBoxSelectionMode newValue) => OnRadioGroupValueChanged(newValue) )">

<br />
<br />

<TelerikListBox Data="@ListBoxData"
                <TelerikButton Icon="@SvgIcon.StripAllFormatting"
                               Title="Deselect All"
                               OnClick="@( () => ListBoxSelectedItems = new List<ListBoxModel>() )"
                               Enabled="@( ListBoxSelectedItems.Count() > 0 )" />

@code {
    private List<ListBoxModel> ListBoxData { get; set; } = new List<ListBoxModel>();

    private IEnumerable<ListBoxModel> ListBoxSelectedItems { get; set; } = new List<ListBoxModel>();

    private ListBoxSelectionMode CurrentSelectionMode { get; set; } = ListBoxSelectionMode.Single;

    private List<ListBoxSelectionMode> RadioGroupData { get; set; } = new List<ListBoxSelectionMode>() {

    private void OnRadioGroupValueChanged(ListBoxSelectionMode newValue)
        CurrentSelectionMode = newValue;

        ListBoxSelectedItems = new List<ListBoxModel>();

    protected override void OnInitialized()
        for (int i = 1; i <= 7; i++)
            ListBoxData.Add(new ListBoxModel()
                Id = i,
                Name = $"ListBox Item {i}",


    public class ListBoxModel
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;

Next Steps

See Also

In this article