Blazorise SelectList component

The SelectList component allows you to select a value from a list of predefined items.

To be able to use SelectList component you first need to install it.

Installation

NuGet

Install extension from NuGet.
Install-Package Blazorise.Components

Example

<SelectList TItem="MySelectModel"
            TValue="int"
            Data="@myDdlData"
            TextField="@((item)=>item.MyTextField)"
            ValueField="@((item)=>item.MyValueField)"
            SelectedValue="@selectedListValue"
            SelectedValueChanged="@MyListValueChangedHandler"
            DefaultItemText="Choose your country" />
@code{
    public class MySelectModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    static string[] Countries = { "Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City" };
    IEnumerable<MySelectModel> myDdlData = Enumerable.Range( 1, Countries.Length ).Select( x => new MySelectModel { MyTextField = Countries[x - 1], MyValueField = x } );

    int selectedListValue { get; set; } = 3;

    void MyListValueChangedHandler( int newValue )
    {
        selectedListValue = newValue;
        StateHasChanged();
    }
}

Attributes

Name Description Type Default
TItem Model data type. generic
TValue Bound value data type. generic
Data Data used for the search. IEnumerable<TItem>
TextField Selector for the display name field. Func<TItem, string>
ValueField Selector for the value field. Func<TItem, TValue>
SelectedValue Currently selected value. TValue
SelectedValueChanged Raises an event after the selected value has changed. EventCallback<TValue>
Multiple Specifies that multiple items can be selected. bool false
MaxVisibleItems Specifies how many options should be shown at once. int? null
DefaultItemText Display text of the default select item. string null
DefaultItemValue Value of the default select item. TValue default
DefaultItemDisabled If true, hides the default item. bool false
DefaultItemHidden If true, hides the default item. bool false