Checkboxes in MultiSelect Dropdown

Updated on Jun 4, 2026

Environment

Product

MultiSelect for Blazor

Description

How to add checkboxes for item selection in the Telerik MultiSelect for Blazor? There should also be a "Select All" option at the top of the dropdown.

Solution

1. Use an ItemTemplate to add a Telerik Blazor CheckBox in each item.
2. Use a HeaderTemplate to add a "Select All" checkbox above the data items. Optionally, use an indeterminate checkbox state if only some MultiSelect items are selected.
3. (optional) Set the MultiSelect AutoClose parameter to false.
4. (optional) Set the MultiSelect TagMode parameter to Single or alternatively, set MaxAllowedTags to avoid drastic MultiSelect height changes when users select all items at once.

Using MultiSelect checkboxes in header and item templates

<TelerikMultiSelect @ref="@MultiSelectRef"
                    Data="@MultiSelectData"
                    @bind-Value="@MultiSelectValues"
                    AutoClose="false"
                    TextField="@nameof(ListItem.Text)"
                    ValueField="@nameof(ListItem.Id)"
                    ShowArrowButton="true"
                    TagMode="@MultiSelectTagMode.Multiple"
                    MaxAllowedTags="3">
    <HeaderTemplate>
        <label class="k-list-item">
            <TelerikCheckBox Value="@(MultiSelectValues.Count == MultiSelectData.Count)"
                             ValueChanged="@SelectAllChanged"
                             TValue="@bool"
                             Indeterminate="@(MultiSelectValues.Count > 0 && MultiSelectValues.Count < MultiSelectData.Count)" />
            <strong>Select All @MultiSelectData.Count Items</strong>
        </label>
    </HeaderTemplate>
    <ItemTemplate>
        <TelerikCheckBox Value="@MultiSelectValues.Contains(context.Id)" />
        @context.Text
    </ItemTemplate>
</TelerikMultiSelect>

@code {
    #nullable enable

    private TelerikMultiSelect<ListItem, int>? MultiSelectRef;
    private List<ListItem> MultiSelectData { get; set; } = new();

    private List<int> MultiSelectValues { get; set; } = new() { 1, 3 };

    private void SelectAllChanged(bool value)
    {
        if (value)
        {
            MultiSelectValues = MultiSelectData.Select(i => i.Id).ToList();
        }
        else
        {
            MultiSelectValues = new();
        }

        MultiSelectRef?.Refresh();
    }

    protected override void OnInitialized()
    {
        MultiSelectData = new List<ListItem>();

        for (int i = 1; i <= 24; i++)
        {
            MultiSelectData.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}",
                Category = $"Category {i % 6 + 1}"
            });
        }

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
        public string Category { get; set; } = string.Empty;
    }
}

See Also

• MultiSelect Templates
• MultiSelect TagMode
• CheckBox Overview