CheckBoxList component

This article demonstrates how to use the CheckBoxList component.

Get and set the value

As all Radzen Blazor input components the CheckBoxList has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input. The TValue property should be set to the Value property type.

Data-binding

To display data in CheckBoxList component you can statically declare items in the markup and/or set collection of items (IEnumerable<>) to Data property, TextProperty to the string property name of the item in the collection and ValueProperty to the property name with unique values in the collection.

Statically declared items

<RadzenCheckBoxList @bind-Value=@values TValue="int" Change=@OnChange>
    <Items>
        <RadzenCheckBoxListItem Text="Orders" Value="1" />
        <RadzenCheckBoxListItem Text="Employees" Value="2" />
        <RadzenCheckBoxListItem Text="Customers" Value="3" />
    </Items>
</RadzenCheckBoxList>
@code {
    IEnumerable<int> values = new int[] { 1 };

    void OnChange(IEnumerable<int> value)
    {
        Console.WriteLine($"Value changed to {string.Join(", ", value)}");
    }
}

Items populated from data

<RadzenCheckBoxList Data="@data" TextProperty="Name" ValueProperty="Id" @bind-Value=@values TValue="int" Change=@OnChange />
@code {
    IEnumerable<int> values = new int[] { 1 };
    IEnumerable<MyObject> data = new MyObject[] {
        new MyObject(){ Id = 1 , Name = "Orders"}, new MyObject() { Id = 2 , Name = "Employees"}, new MyObject() { Id = 3 , Name = "Customers" } };

    void OnChange(IEnumerable<int> value)
    {
        Console.WriteLine($"Value changed to {string.Join(", ", value)}");
    }
}

Statically declared and populated from data items

<RadzenCheckBoxList Data="@data" TextProperty="Name" ValueProperty="Id" @bind-Value=@values TValue="int" Change=@OnChange>
    <Items>
        <RadzenCheckBoxListItem Text="Static item" Value="0" />
    </Items>
</RadzenCheckBoxList>
@code {
    IEnumerable<int> values = new int[] { 1 };
    
    IEnumerable<MyObject> data = new MyObject[] {
        new MyObject(){ Id = 1 , Name = "Orders"}, new MyObject() { Id = 2 , Name = "Employees"}, new MyObject() { Id = 3 , Name = "Customers" } };

    void OnChange(IEnumerable<int> value)
    {
        Console.WriteLine($"Value changed to {string.Join(", ", value)}");
    }
}

Orientation

Use Orientation property to set if CheckBoxList orientation is horizontal or vertical.

<RadzenCheckBoxList Orientation="Orientation.Vertical" ...