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

Examples

Basic Example

<SelectList TItem="MyCountryModel"
            TValue="int"
            Data="@IndexedCountries"
            TextField="@((item)=>item.Name)"
            ValueField="@((item)=>item.Id)"
            @bind-SelectedValue="@selectedListValue"
            DefaultItemText="Choose your country" />

@code {
    public class MyCountryModel
    {
        public int Id { get; set; }
        public string Name { 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" };
    static IEnumerable<MyCountryModel> IndexedCountries = Enumerable.Range( 1, Countries.Length ).Select( x => new MyCountryModel { Name = Countries[x - 1], Id = x } );

    int selectedListValue { get; set; } = 3;
}

With Multiple Selections

Just like with a regular <Select> component, add the Multiple parameter to allow more than one option to be selected. Also, bind the SelectedValues parameter. 
<SelectList TItem="MyFruitModel"
            TValue="int"
            Data="@IndexedFruits"
            TextField="@((item)=>item.Name)"
            ValueField="@((item)=>item.Id)"
            Multiple
            @bind-SelectedValues="@selectedListValues"
            DefaultItemText="Choose your fruit" />

@code {
    public class MyFruitModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    static string[] Fruits = { "Avocado", "Banana", "Blackberries", "Blueberries", "Cherries", "Cranberries", "Lemon", "Mango", "Orange", "Pineapple", "Watermelon" };
    static IEnumerable<MyFruitModel> IndexedFruits = Enumerable.Range( 1, Fruits.Length ).Select( x => new MyFruitModel { Name = Fruits[x - 1], Id = x } );

    IReadOnlyList<int> selectedListValues { get; set; }
}

API

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>
ItemDisabled Selector for disabling list items. Func<TItem, bool>
SelectedValue Currently selected value. TValue
SelectedValues Selected item value when in multi edit mode. IReadOnlyList<TValue> default
SelectedValueChanged Raises an event after the selected value has changed. EventCallback<TValue>
SelectedValuesChanged Occurs when the selected items value has changed (only when Multiple). EventCallback<IReadOnlyList<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
On this page