Blazor DropDownList - Label & Value Pairs

DropDownList - Label & Value Pairs

Smart.DropDownList allows you to differentiate between the displayed label and the actual value of each list item.

Using ListItem

Add the DropDownList component. Set the list of options as a series of <ListItem>.
When the user selects an item, the DropDownList will return the value of the selected item:

<h3>@(string.Join(", ", selectedItems))</h3>
<DropDownList SelectionMode="ListSelectionMode.CheckBox" @bind-SelectedValues="@selectedItems">
    <ListItem Value="1">Affogato</ListItem>
    <ListItem Value="2">Americano</ListItem>
    <ListItem Value="3">Bicerin</ListItem>
    <ListItem Value="4">Breve</ListItem>
    <ListItem Value="5">Cappuccino</ListItem>
    <ListItem Value="6">Cafe Crema</ListItem>
    <ListItem Value="7">Cafe Corretto</ListItem>

    string[] selectedItems = new string[] { };

List Items

Using DataSource

Alternatively, you can set the list of options as a DataSource.

If using an Array of custom class, use the [JsonPropertyName] attribute to set which field should be treated as the label, and which as the value.

@using System.Text.Json.Serialization

<h3>@(string.Join(", ", selectedItems))</h3>
<DropDownList DataSource="countries" SelectionMode="ListSelectionMode.CheckBox" @bind-SelectedValues="@selectedItems">

    class Country
        public string Name { get; set; }

        public string Code { get; set; }

        public Country(string name, string code)
            Name = name;
            Code = code;

    string[] selectedItems = new string[] { };

    List<Country> countries = new List<Country>()
        new Country("France", "FR"),
        new Country("Germany", "DE"),
        new Country("Italy", "IT"),
        new Country("Spain", "ES"),
        new Country("Portugal", "PT"),
        new Country("United Kingdom", "GB")
Data Source