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

ListBox Templates

The ListBox features templates that allow you to customize the component rendering and styling. This article describes all available templates and explains how to use them.

Item Template

The ListBox ItemTemplate enables you to change the default HTML output and CSS styling of the data items.

The <ItemTemplate> tag is a Blazor RenderFragment. It exposes a context variable that is the current data item object and you can access its properties directly without casting.

No Data Template

The ListBox shows the NoDataTemplate when there are no items in the component Data.


The following example shows how to place a Button inside the NoDataTemplate, which adds new items to the ListBox. Another option for such functionality is to use a custom toolbar button.

Always Rebind() the ListBox after making programmatic changes to its Data.

Using ListBox templates

@* Add and remove ListBox items to see the item template and no-data template. *@

<TelerikListBox @ref="@ListBoxRef"
                OnRemove="@( (ListBoxRemoveEventArgs<Person> args) => OnListBoxRemove(args) )"
            <ListBoxToolBarRemoveTool />
        <TelerikSvgIcon Icon="@context.Icon" />
        @context.FirstName <strong>@context.LastName</strong>
            No items?..<br />
            <TelerikButton OnClick="@AddItems">Add Some</TelerikButton>

@code {
    private TelerikListBox<Person> ListBoxRef { get; set; } = null!;

    private List<Person> ListBoxData { get; set; } = new List<Person>();

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

    private void OnListBoxRemove(ListBoxRemoveEventArgs<Person> args)
        foreach (var item in args.Items)


    private void AddItems()
        ListBoxData.Add(new Person()
            Id = 1,
            FirstName = "Celestine",
            LastName = "Riny",
            Icon = SvgIcon.User
        ListBoxData.Add(new Person()
            Id = 2,
            FirstName = "Liraz",
            LastName = "Sri",
            Icon = SvgIcon.Reddit
        ListBoxData.Add(new Person()
            Id = 3,
            FirstName = "Minh",
            LastName = "Sam",
            Icon = SvgIcon.Accessibility


    public class Person
        public int Id { get; set; }
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
        public ISvgIcon Icon { get; set; } = SvgIcon.User;

Next Steps

See Also

In this article