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

The SelectList extension is part of the Blazorise.Components NuGet package.

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`