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

Pre-Selecting Items

This article provides an example that demonstrates how to pre-select items for the end-user. The described approach allows you to pre-select a single item or a set of items if they exist in the data source.

Pre-select items for the user

@* You can pre-select an item or set of items only if they exist in the data source. *@
    <TelerikButton OnClick="@SelectHandler">Pre-select countries</TelerikButton>
    <TelerikButton OnClick="@ClearSelectionHandler">Clear selection</TelerikButton>
<TelerikMultiSelect Data="@Countries"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" />
@if (Values.Count > 0)
        @foreach (var item in Values)
@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();
    void SelectHandler()
        List<string> PreselectedValues = new List<string>()
            "Bulgaria", "Croatia"
        // create a new reference so that the framework can notify the component to update
        Values = new List<string>(PreselectedValues);
    void ClearSelectionHandler()
        Values = new List<string>();
    protected override void OnInitialized()
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("North Macedonia");
        // you can also pre-select items here based on data you fetch, not just on a button click
In this article