Blazorise SelectList component

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

To use the SelectList component, install the Blazorise.Components package first.

Installation

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

NuGet

Install extension from NuGet.

dotnet add package Blazorise.Components

Imports

In your main _Imports.razor add:

@using Blazorise.Components

Examples

Basic Example

<SelectList TItem="MyCountryModel"
            TValue="int"
            Data="@IndexedCountries"
            TextField="@((item)=>item.Name)"
            ValueField="@((item)=>item.Id)"
            @bind-Value="@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;
}

Multiple selection

Just like with a regular <Select> component, add the Multiple parameter to allow more than one option to be selected. Also, bind the Value parameter.

<SelectList TItem="MyFruitModel"
            TValue="IReadOnlyList<int>"
            Data="@IndexedFruits"
            TextField="@((item)=>item.Name)"
            ValueField="@((item)=>item.Id)"
            Multiple
            @bind-Value="@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

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<SelectList />