MudBlazor

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.

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter">
            <MudSelectItem Value="@("Cappuccino")" />
            <MudSelectItem Value="@("Cafe Latte")" />
            <MudSelectItem Value="@("Espresso")" />
            <MudSelectItem Value="@("Irish Coffee")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="double" Label="Price" Strict="true" Variant="Variant.Outlined" Format="F2" AnchorOrigin="Origin.BottomCenter">
            <MudSelectItem T="double" Value="4.50"/>
            <MudSelectItem T="double" Value="4.99"/>
            <MudSelectItem T="double" Value="3.60"/>
            <MudSelectItem T="double" Value="21.99"/>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Pies" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
            <MudSelectItem Value="@("Apple Pie")" />
            <MudSelectItem Value="@("Blackberry Pie")" />
            <MudSelectItem Value="@("Rhubarb Pie")" />
            <MudSelectItem Value="@("Lemon Pie")" />
        </MudSelect>
    </MudItem>
</MudGrid>

Margin and Dense

With the Margin prop you can reduce the selects height and with Dense set to true the select list will be displayed with dense vertical padding.

<MudGrid>

    <MudItem xs="12" Class="d-flex">
        <MudCheckBox @bind-Checked="_margin" Label="Margin" Color="Color.Primary" />
        <MudCheckBox @bind-Checked="_dense" Label="Dense" Color="Color.Primary" />
    </MudItem>

    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Standard" Variant="Variant.Text" OffsetY="true" Margin="@(_margin==true?Margin.Dense:Margin.None)" Dense="@_dense">
            <MudSelectItem Value="@("Tyrannosaur")" />
            <MudSelectItem Value="@("Triceratops")" />
            <MudSelectItem Value="@("Oviraptor")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Standard" Variant="Variant.Outlined" OffsetY="true" Margin="@(_margin==true?Margin.Dense:Margin.None)" Dense="@_dense">
            <MudSelectItem Value="@("Tyrannosaur")" />
            <MudSelectItem Value="@("Triceratops")" />
            <MudSelectItem Value="@("Oviraptor")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Standard" Variant="Variant.Filled" OffsetY="true" Margin="@(_margin==true?Margin.Dense:Margin.None)" Dense="@_dense">
            <MudSelectItem Value="@("Tyrannosaur")" />
            <MudSelectItem Value="@("Triceratops")" />
            <MudSelectItem Value="@("Oviraptor")" />
        </MudSelect>
    </MudItem>

</MudGrid>

@code{
    bool _margin = true;
    bool _dense = true;
}

Props

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

Helper text

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="With Helper" HelperText="Helper text">
            <MudSelectItem Value="@("Cappuccino")" />
            <MudSelectItem Value="@("Cafe Latte")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="double" Label="Disabled" Strict="true" Variant="Variant.Outlined" Disabled="true">
            <MudSelectItem T="double" Value="4.50" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Read Only" Variant="Variant.Filled" ReadOnly="true">
            <MudSelectItem Value="@("Apple Pie")" />
            <MudSelectItem Value="@("Blackberry Pie")" />
        </MudSelect>
    </MudItem>
</MudGrid>

Using Select

String

Enum

CultureInfo

Selected values:

Select fast-food
Tee
Select culture

@using Microsoft.AspNetCore.Components
@using System.Globalization;

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect Label="Select fast-food" @bind-Value="stringValue" 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>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect Label="Select drink" @bind-Value="enumValue" HelperText="Enum"
                   OpenIcon="@Icons.Material.Filled.LocalDrink" AdornmentColor="Color.Secondary">
            @foreach (Drink item in Enum.GetValues(typeof(Drink)))
            {
                <MudSelectItem Value="@item">@item</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <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>
            <MudSelectItem Value="@(CultureInfo.GetCultureInfo("de-AT"))"></MudSelectItem>
            <MudSelectItem Value="@(CultureInfo.GetCultureInfo("pt-BR"))"></MudSelectItem>
            <MudSelectItem Value="@(CultureInfo.GetCultureInfo("zh-CN"))"/>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="12">
        <MudText Class="mb-n3" Typo="Typo.body2">
            Selected values: 
            <MudChip>@(stringValue ?? "Select fast-food")</MudChip>
            <MudChip Color="Color.Primary">@enumValue</MudChip>
            <MudChip Color="Color.Secondary">@(cultureValue?.DisplayName ?? "Select culture")</MudChip>
        </MudText>
    </MudItem>
</MudGrid>

@code {
    private string stringValue { get; set; }
    private Drink enumValue { get; set; }
    public enum Drink { Tee, SparklingWater, SoftDrink, Cider, Beer, Wine, Moonshine }
    private CultureInfo cultureValue { get; set; }
    private Func<CultureInfo, string> convertFunc = ci => ci?.DisplayName;
}

Multiselect

Default MultiSelection Text

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

Pick your favorite states

MudSelect.Value: "Alaska"

MudSelect.SelectedValues: HashSet<string> { "Alaska" }

<MudGrid>
    <MudItem xs="12" md="12">
        <MudSelect T="string" Label="US States" HelperText="Pick your favorite states" MultiSelection="true" @bind-Value="value" @bind-SelectedValues="options">
            @foreach (var state in states)
            {
                <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.body2">MudSelect.SelectedValues: HashSet&lt;string&gt; { @(string.Join(", ", options.Select(x=>$"\"{x}\""))) }</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 MultiSelection Text

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

Pick your favorite states

MudSelect.Value: "1 state has been selected"

MudSelect.SelectedValues: HashSet<string> { "Alaska" }

@using System.Linq

<MudGrid>
    <MudItem xs="12" md="12">
        <MudSelect T="string" Label="US States" HelperText="Pick your favorite states"
         MultiSelection="true" AnchorOrigin="Origin.BottomCenter"
         @bind-Value="value" @bind-SelectedValues="options" AdornmentIcon="@Icons.Material.Filled.Search"
         MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))">
            @foreach (var state in states)
            {
                <MudSelectItem T="string" Value="@state">@state</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.body2">MudSelect.SelectedValues: HashSet&lt;string&gt; { @(string.Join(", ", options.Select(x=>$"\"{x}\""))) }</MudText>
    </MudItem>
</MudGrid>
<MudSwitch @bind-Checked="multiselectionTextChoice" Color="Color.Primary">MultiSelection Text choice</MudSwitch>

@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.

Pick your favorite feline

MudSelect.Value: "1 feline has been selected"

@using System.Linq

<MudGrid>
    <MudItem xs="12" md="12">
        <MudSelect T="string" Label="Felines" HelperText="Pick your favorite feline"
                   MultiSelection="true" OffsetY="true" DelimitedStringSeparator="^" SelectAll="true" SelectAllText="Select all felines"
                   @bind-Value="value" @bind-SelectedValues="options" AdornmentIcon="@Icons.Material.Filled.Search"
                   MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))">
            @foreach (var feline in felines)
            {
                <MudSelectItem T="string" Value="@feline">@feline</MudSelectItem>
            }
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="6">
        <MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
    </MudItem>
</MudGrid>

@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. 

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect @bind-Value="@country" Label="With render fragements" Variant="Variant.Outlined" OffsetY="true">
            <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>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect @bind-Value="@country" Label="Without render fragements" Variant="Variant.Outlined" OffsetY="true">
            <MudSelectItem Value="@("Austria")" />
            <MudSelectItem Value="@("Hungary")" />
            <MudSelectItem Value="@("Sweden")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect @bind-Value="@country" Label="Austria not representable" Variant="Variant.Outlined" OffsetY="true">
            <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>
    </MudItem>

</MudGrid>

@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.

Nothing selected yet.

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="Pizza" @bind-Value="@pizza" Label="Select your pizza" Variant="Variant.Outlined" ToStringFunc="@converter" AnchorOrigin="Origin.BottomCenter">
            <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>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        @if(pizza==null) {
            <MudText Class="mt-5">Nothing selected yet.</MudText>
        }        
        else {
            <MudText Class="mt-5">Pizza: @pizza.Name</MudText>
        }
    </MudItem>    
</MudGrid>

@code {
    Pizza pizza;

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

    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. 

<MudGrid>
    <MudItem xs="12" sm="6" md="6">
        <MudSelect T="double" Label="Price (Datatype: double)" Clearable="true" Required="true">
            @foreach (var price in prices)
            {
            <MudSelectItem Value="@price" />
            }
        </MudSelect>
    </MudItem>

    <MudItem xs="12" sm="6" md="6">
        <MudSelect T="double?" Label="Price (Datatype: double?)" Clearable="true" Required="true">
            @foreach (double? price in prices)
            {
            <MudSelectItem Value="@price" />
            }
        </MudSelect>
    </MudItem>
</MudGrid>

@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.

<MudGrid>
    <MudItem xs="12" sm="6" md="2">
        <MudSelect T="string" Label="Search" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary">
            <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
            <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="6">
        <MudSelect T="string" Label="Open Warnings" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterCenter" AdornmentIcon="@Icons.Material.Filled.OpenWith" Adornment="Adornment.Start" AdornmentColor="Color.Warning">
            <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
            <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Check Code" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopRight" 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>
    </MudItem>
</MudGrid>

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

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <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>
    </MudItem>
    <MudItem xs="12" md="12">
        <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>
    </MudItem>
</MudGrid>

@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 error has occurred. This application may no longer respond until reloaded. Reload 🗙