Select

Select fields allow users to provide information from a list of options.

Note: Blazor static rendering is not supported. See install guide for more info.

Rendered in 0 ms
Visual Playground

@using MudBlazor

<MudStack Row Class="justify-space-between mud-width-full">
    <MudStack Style="width: 300px">
        @foreach (var variant in Enum.GetValues(typeof(Variant)).Cast<Variant>())
        {
            <MudSelect @bind-Value="_value"
                       Variant="variant"
                       Label="@variant.ToString()"
                       Margin="_margin"
                       Dense="_dense"
                       Disabled="_disabled"
                       ReadOnly="_readonly"
                       Placeholder="@(_placeholder ? "Placeholder" : null)"
                       HelperText="@(_helperText ? "Helper Text" : null)"
                       HelperTextOnFocus="_helperTextOnFocus"
                       Clearable="_clearable">
                @foreach (var state in _states)
                {
                    <MudSelectItem Value="state">@state</MudSelectItem>
                }
            </MudSelect>
        }
    </MudStack>

    <MudStack>
        <MudSelect @bind-Value="_margin" Label="Margin">
            @foreach (var margin in Enum.GetValues(typeof(Margin)).Cast<Margin>())
            {
                <MudSelectItem Value="margin">@margin</MudSelectItem>
            }
        </MudSelect>

        <MudSwitch @bind-Value="_dense" Label="Dense" Color="Color.Primary" />
        <MudSwitch @bind-Value="_readonly" Label="ReadOnly" Color="Color.Primary" />
        <MudSwitch @bind-Value="_disabled" Label="Disabled" Color="Color.Primary" />
        <MudSwitch @bind-Value="_placeholder" Label="Placeholder" Color="Color.Primary" />
        <MudSwitch @bind-Value="_helperText" Label="HelperText" Color="Color.Primary" />
        <MudSwitch @bind-Value="_helperTextOnFocus" Label="HelperTextOnFocus" Color="Color.Primary" />
        <MudSwitch @bind-Value="_clearable" Label="Clearable" Color="Color.Primary" />
    </MudStack>
</MudStack>

@code {
    string _value;
    Margin _margin;
    bool _dense;
    bool _disabled;
    bool _readonly;
    bool _placeholder;
    bool _helperText;
    bool _helperTextOnFocus;
    bool _clearable;

    private string[] _states =
    {
        "Alabama", "Alaska", "Arizona", "Arkansas", "California",
        "Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
        "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas",
        "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts",
        "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana",
        "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico",
        "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma",
        "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
        "Tennessee", "Texas", "Utah", "Vermont", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming"
    };
}
Using Select

String
Enum
CultureInfo

Selected values:

Select fast-food
HotWater
Select culture
@using Microsoft.AspNetCore.Components
@using System.Globalization;

<MudSelect @bind-Value="stringValue" Label="Select fast-food" HelperText="String" Placeholder="Please Select" AdornmentIcon="@Icons.Material.Filled.Fastfood" AdornmentColor="Color.Primary">
    <MudSelectItem Value="@("Pizza")" Disabled="true">Pizza (Disabled)</MudSelectItem>
    <MudSelectItem Value="@("Burger")">Burger</MudSelectItem>
    <MudSelectItem Value="@("Hotdog")">Hot Dog</MudSelectItem>
</MudSelect>

<MudSelect @bind-Value="enumValue" Label="Select drink" HelperText="Enum" OpenIcon="@Icons.Material.Filled.LocalDrink" AdornmentColor="Color.Secondary">
    @foreach (Drink item in Enum.GetValues(typeof(Drink))) {
        <MudSelectItem Value="@item">@item</MudSelectItem>
    }
</MudSelect>

<MudSelect Placeholder="Select culture" @bind-Value="cultureValue" HelperText="CultureInfo" ToStringFunc="@convertFunc" CloseIcon="@Icons.Material.Filled.Flag" AdornmentColor="Color.Tertiary">
    <MudSelectItem Value="@(CultureInfo.GetCultureInfo("en-US"))" />
    <MudSelectItem Value="@(CultureInfo.GetCultureInfo("de-AT"))" />
    <MudSelectItem Value="@(CultureInfo.GetCultureInfo("pt-BR"))" />
    <MudSelectItem Value="@(CultureInfo.GetCultureInfo("zh-CN"))" />
</MudSelect>

<div class="d-flex mud-width-full align-center mt-8">
    <MudText Typo="Typo.subtitle1" Class="mr-2">Selected values: </MudText>
    <MudChip T="string">@(stringValue ?? "Select fast-food")</MudChip>
    <MudChip T="string" Color="Color.Primary">@enumValue</MudChip>
    <MudChip T="string" Color="Color.Secondary">@(cultureValue?.DisplayName ?? "Select culture")</MudChip>
</div>

@code {
    private string stringValue { get; set; }
    private Drink enumValue { get; set; } = Drink.HotWater;
    public enum Drink { Tea, SparklingWater, SoftDrink, Cider, Beer, Wine, Moonshine, Wodka, Cola, GreeTea, FruitJuice, Lemonade, HotWater, SpringWater, IceWater, }
    private CultureInfo cultureValue { get; set; }
    private Func<CultureInfo, string> convertFunc = ci => ci?.DisplayName;
}
Multiselect

If you set MultiSelection="true", you can select multiple values. The selected options are returned as concatenated comma-delimited string via Value and as a HashSet<string> via SelectedValues. The delimited string can be modified with the Delimiter parameter.

Alaska

Value:

"

Alaska

"

SelectedValues: HashSet<string>

{

"Alaska"

}

<MudSelect T="string" Label="US States" MultiSelection="true" @bind-Value="value" @bind-SelectedValues="options">
    @foreach (var state in states)
    {
        <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
    }
</MudSelect>

<MudGrid Class="mt-6 px-4">
    <MudItem xs="6">
        <MudText Typo="Typo.subtitle2">Value:</MudText>
        <MudText Typo="Typo.subtitle2">"</MudText>
        <MudText Typo="Typo.body2" Class="pl-4">@value</MudText>
        <MudText Typo="Typo.subtitle2">"</MudText>
    </MudItem>
    <MudItem xs="6">
        <MudText Typo="Typo.subtitle2">SelectedValues: HashSet&lt;string&gt;</MudText>
        <MudText Typo="Typo.subtitle2">{</MudText>
        <MudText Typo="Typo.body2" Class="pl-4">@(string.Join(", ", options.Select(x=>$"\"{x}\"")))</MudText>
        <MudText Typo="Typo.subtitle2">}</MudText>
    </MudItem>
</MudGrid>

@code {

    private string value { get; set; } = "Nothing selected";
    private IEnumerable<string> options { get; set; } = new HashSet<string>() { "Alaska" };

    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

}
Customized Selection Text

If you set MultiSelection="true", you can select multiple values. By defining the MultiSelectionTextFunc method, the returned selection can be fully customized.

Value:

"

1 state has been selected

"

SelectedValues: HashSet<string>

{

"Alaska"

}

@using System.Linq

<MudSelect MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))" MultiSelection="true" @bind-Value="value" @bind-SelectedValues="options" T="string" Label="US States" AdornmentIcon="@Icons.Material.Filled.Search" AnchorOrigin="Origin.BottomCenter">
    @foreach (var state in states)
    {
        <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
    }
</MudSelect>

<MudSwitch @bind-Value="multiselectionTextChoice" Class="mud-width-full" Color="Color.Primary">MultiSelection Text choice</MudSwitch>  

<MudGrid Class="mt-3 px-4">
    <MudItem xs="6">
        <MudText Typo="Typo.subtitle2">Value:</MudText>
        <MudText Typo="Typo.subtitle2">"</MudText>
        <MudText Typo="Typo.body2" Class="pl-4">@value</MudText>
        <MudText Typo="Typo.subtitle2">"</MudText>
    </MudItem>
    <MudItem xs="6">
        <MudText Typo="Typo.subtitle2">SelectedValues: HashSet&lt;string&gt;</MudText>
        <MudText Typo="Typo.subtitle2">{</MudText>
        <MudText Typo="Typo.body2" Class="pl-4">@(string.Join(", ", options.Select(x=>$"\"{x}\"")))</MudText>
        <MudText Typo="Typo.subtitle2">}</MudText>
    </MudItem>
</MudGrid>

@code {
    private bool multiselectionTextChoice;
    private string value { get; set; } = "Nothing selected";
    private IEnumerable<string> options { get; set; } = new HashSet<string>() { "Alaska" };

    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };

    private string GetMultiSelectionText(List<string> selectedValues)
    {
        if (multiselectionTextChoice)
        {
            return $"Selected state{(selectedValues.Count > 1 ? "s" : "")}: {string.Join(", ", selectedValues.Select(x => x))}";
        }
        else
        {
            return $"{selectedValues.Count} state{(selectedValues.Count > 1 ? "s have":" has")} been selected";
        }
    }
}
Select All

If you set SelectAll="true", you can display a 'Select all' option to select or deselect all items. It is added at the top of the list of items. The text for this option can be customized by the SelectAllText parameter.

1 feline has been selected
@using System.Linq


<MudSelect T="string" MultiSelection="true" SelectAll="true" SelectAllText="Select all felines" HelperText="@value" @bind-Value="value" @bind-SelectedValues="options" MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))" Label="Felines" AdornmentIcon="@Icons.Material.Filled.Search">
    @foreach (var feline in felines)
    {
        <MudSelectItem T="string" Value="@feline">@feline</MudSelectItem>
    }
</MudSelect>

@code { 
    private string value { get; set; } = "Nothing selected";
    private IEnumerable<string> options { get; set; } = new HashSet<string>() { "Lion" };

    private string[] felines =
    {
        "Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger"
    };

    private string GetMultiSelectionText(List<string> selectedValues)
    {
        return $"{selectedValues.Count} feline{(selectedValues.Count > 1 ? "s have" : " has")} been selected";
    }
}
Value presentation

Select uses the render fragments you specify for the items to display the selected value (if any). If you don't specify render fragments, the value will be displayed as text. Also, if you have render fragments but the value that has been set is not in the list, it will also be displayed as text. 

<MudSelect @bind-Value="country" Label="With render fragements" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Austria")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Flag_of_Austria.svg" height="14" class="mr-1" /> Austria
    </MudSelectItem>
    <MudSelectItem Value="@("Hungary")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Hungary.png" height="14" class="mr-1" /> Hungary
    </MudSelectItem>
    <MudSelectItem Value="@("Sweden")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Flag_of_Sweden_fixed.svg" height="14" class="mr-1" /> Sweden
    </MudSelectItem>
</MudSelect>

<MudSelect @bind-Value="country" Label="Without render fragements" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Austria")" />
    <MudSelectItem Value="@("Hungary")" />
    <MudSelectItem Value="@("Sweden")" />
</MudSelect>

<MudSelect @bind-Value="country" Label="Austria not representable" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Germany")">
        <img src="https://upload.wikimedia.org/wikipedia/en/b/ba/Flag_of_Germany.svg" height="14" class="mr-1" /> Germany
    </MudSelectItem>
    <MudSelectItem Value="@("Hungary")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Flag_of_Hungary.png" height="14" class="mr-1" /> Hungary
    </MudSelectItem>
    <MudSelectItem Value="@("Sweden")">
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Flag_of_Sweden_fixed.svg" height="14" class="mr-1" /> Sweden
    </MudSelectItem>
</MudSelect>

@code {
    string country="Austria";
}
Custom converter

Select has a built-in DefaultConverter which converts the values from any primitive type to string for presentation of the selected value. You can customize that converter as described under Converters. Here, we use ToStringFunc to convert objects of type Pizza to their string representation. Note how the <MudSelectItem> uses that string representation if you don't specify a render fragment.

Pizza: Diavolo
<MudText Typo="Typo.h6" Class="mud-width-full">@(pizza == null ? "Nothing selected." : $"Pizza: {pizza.Name}")</MudText>

<MudSelect T="Pizza" @bind-Value="pizza" ToStringFunc="@converter" Label="Select your pizza" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" Clearable>
    <MudSelectItem Value="@(new Pizza() { Name="Cardinale"})" />
    <MudSelectItem Value="@(new Pizza() { Name="Diavolo"})" />
    <MudSelectItem Value="@(new Pizza() { Name="Margarita"})" />
    <MudSelectItem Value="@(new Pizza() { Name="Spinaci"})" />
</MudSelect>

@code {
    Pizza pizza = new Pizza { Name = "Diavolo" };

    public class Pizza
    {
        public string Name { get; set; }

        // Note: this is important so the select can compare pizzas
        public override bool Equals(object o) {
            var other = o as Pizza;
            return other?.Name==Name;
        }

        // Note: this is important so the select can compare pizzas
        public override int GetHashCode() => Name.GetHashCode();
    }

    Func<Pizza,string> converter = p => p?.Name;
}
Numeric collection

When using the properties Required=true and Clearable=true in combination with a numeric collection, it is required that the items of the collection are of a nullable numeric type such as int? or double? in order for the Required property to behave as expected. 

<MudSelect T="double" Label="Price (Datatype: double)" Clearable="true" Required="true">
    @foreach (var price in prices)
    {
    <MudSelectItem Value="@price" />
    }
</MudSelect>

<MudSelect T="double?" Label="Price (Datatype: double?)" Clearable="true" Required="true">
    @foreach (double? price in prices)
    {
    <MudSelectItem Value="@price" />
    }
</MudSelect>

@code
{
    private double[] prices = { 4.50, 4.99, 3.60, 21.99 };
}
Placement

The component uses MudPopover to place it's list of items. It can be controlled with AnchorOrigin and TransformOrigin To change where the popover should start from you only need to change the AnchorOrigin. Read more on popover's page.

<MudSelect T="string" Label="Search" AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

<MudSelect T="string" Label="Open Warnings" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterCenter" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.OpenWith" Adornment="Adornment.Start" AdornmentColor="Color.Warning">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

<MudSelect T="string" Label="Check Code" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopRight" Variant="Variant.Outlined" AdornmentIcon="@Icons.Material.Filled.Code" CloseIcon="@Icons.Material.Filled.SouthWest" Adornment="Adornment.Start" AdornmentColor="Color.Dark">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>
Keyboard Navigation

MudSelect accepts keys to keyboard navigation.


Space key to toggle dropdown open/close

Escape or Alt+ArrowUp keys to close dropdown

Enter or NumpadEnter or Alt+ArrowDown keys to open dropdown

ArrowUp key to select/navigate previous item

ArrowDown key to select/navigate next item

Home key to select/navigate first item

End key to select/navigate last item

Enter or NumpadEnter keys to select item (MultiSelect only)

Ctrl+A key to toggle select all/clear all items (MultiSelect only)

Printable Characters to set the first item in the list whose text starts with that character. Press again to select the next item with the same status.


*Disabled items cannot be selected by keys.

Alaska
Pick your favorite states with keys
<MudSelect T="string" Label="Select Coffee With Keys" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@("Cappuccino")" />
    <MudSelectItem Value="@("Cafe Latte")" />
    <MudSelectItem Value="@("Espresso")" />
    <MudSelectItem Value="@("Irish Coffee")" />
</MudSelect>

<MudSelect T="string" Label="US States" HelperText="Pick your favorite states with keys" MultiSelection="true" @bind-Value="value" @bind-SelectedValues="options">
    @foreach (var state in states)
    {
        <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
    }
</MudSelect>

@code {

    private string value { get; set; } = "Nothing selected";
    private IEnumerable<string> options { get; set; } = new List<string>() { "Alaska" };

    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };
}
An unhandled error has occurred. Reload 🗙