Select

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

API
Variants

Select comes in the variants Text, Filled and Outline. Select is generic, meaning you can use values of any type with it. See the example code how that works.



<MudSelect T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@("Cappuccino")" />
    <MudSelectItem Value="@("Cafe Latte")" />
    <MudSelectItem Value="@("Espresso")" />
</MudSelect>
<MudSelect T="double" Label="Price" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem T="double" Value="4.50"/>
    <MudSelectItem T="double" Value="4.99"/>
    <MudSelectItem T="double" Value="3.60"/>
</MudSelect>
<MudSelect T="Pizza" Label="Pizza" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@(new Pizza("Cardinale"))" />
    <MudSelectItem Value="@(new Pizza("Diavolo"))" />
    <MudSelectItem Value="@(new Pizza("Margarita"))" />
    <MudSelectItem Value="@(new Pizza("Spinaci"))" />
</MudSelect>

@code {
    public class Pizza
    {
        public Pizza(string name)
        {
            Name = name;
        }

        public readonly string Name;

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

        // Note: this is important too!
        public override int GetHashCode() => Name?.GetHashCode() ?? 0;

        // Implement this for the Pizza to display correctly in MudSelect
        public override string ToString() => Name;
    }
}
Props

Select behaves and looks a lot like a regular textfield and takes all of the textfields different form props.

Helper text

<MudSelect HelperText="Helper text" T="string" Label="With Helper" Variant="Variant.Text">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Mike Rex")" />
</MudSelect>
<MudSelect Disabled="true" T="string" Label="Disabled" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Henon Rex")" />
</MudSelect>
<MudSelect ReadOnly="true" T="string" Label="Read Only" Variant="Variant.Filled">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Benno Rex")" />
</MudSelect>
Margin

With the Margin prop you can reduce the height of the component.

<MudSelect Margin="Margin.Dense" T="string" Label="Coffee" Variant="Variant.Text">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Mike Rex")" />
</MudSelect>
<MudSelect Margin="Margin.Dense" T="string" Label="Coffee" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Henon Rex")" />
</MudSelect>
<MudSelect Margin="Margin.Dense" T="string" Label="Coffee" Variant="Variant.Filled">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Benno Rex")" />
</MudSelect>
Dense

The Dense prop set to true the select list will be displayed with dense vertical padding.

<MudSelect Dense="true" T="string" Label="Coffee" Variant="Variant.Text">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Mike Rex")" />
</MudSelect>
<MudSelect Dense="true" T="string" Label="Coffee" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Henon Rex")" />
</MudSelect>
<MudSelect Dense="true" T="string" Label="Coffee" Variant="Variant.Filled">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Triceratops")" />
    <MudSelectItem Value="@("Benno Rex")" />
</MudSelect>
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>@(stringValue ?? "Select fast-food")</MudChip>
    <MudChip Color="Color.Primary">@enumValue</MudChip>
    <MudChip 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.

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-Checked="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.

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",
    };
}
Radio
Slider
An unhandled error has occurred. Reload 🗙