Select - MudBlazor

Variants

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

Coffee

Price

Pies

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect T="string" Label="Coffee">
            <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">
            <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">
            <MudSelectItem Value="@("Apple Pie")" />
            <MudSelectItem Value="@("Blackberry Pie")" />
            <MudSelectItem Value="@("Rhubarb Pie")" />
            <MudSelectItem Value="@("Lemon Pie")" />
        </MudSelect>
    </MudItem>
</MudGrid>

Usage

Select fast-food

String

Select drink

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

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

Alaska

US States

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 HashSet<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",
    };

}

Dense

<MudSelect T="string" Label="Dense" Dense="true">
    <MudSelectItem T="string" Value="@("Tyrannosaur")"/>
    <MudSelectItem T="string" Value="@("Triceratops")"/>
    <MudSelectItem T="string" Value="@("Oviraptor")"/>
</MudSelect>

Disabled

<MudSelect T="string" Label="Disabled" Disabled="true">
    <MudSelectItem T="string" Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem T="string" Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

Interactive

Variants

<MudGrid>
    <MudItem xs="12" md="3">
        <MudForm>
            <MudSwitch T="bool" CheckedChanged="@OnPositionChange" Color="Color.Primary" Label="Open Top" />
            <MudSwitch @bind-Checked="@OffsetY" Color="Color.Secondary" Label="Offset Y" />
            <MudSwitch @bind-Checked="@Dense" Color="Color.Primary" Label="Dense" />
        </MudForm>
    </MudItem>
    <MudItem xs="12" md="1" />
    <MudItem xs="12" md="4">
        <MudSelect T="string" Label="Variants" Variant="@_variant" Direction="@_direction" Dense="@Dense" OffsetY="@OffsetY" ValueChanged="OnSelectedValue">
            <MudSelectItem T="string" Value="@("text")">Text</MudSelectItem>
            <MudSelectItem T="string" Value="@("filled")">Filled</MudSelectItem>
            <MudSelectItem T="string" Value="@("outlined")">Outlined</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="12" md="4" />
</MudGrid>

@code {

    public bool OpenTop { get; set; }
    public bool OffsetY { get; set; } = true;
    public bool Dense { get; set; } = true;

    public string variant { get; set; }

    public Direction _direction {get; set;}
    public Variant _variant { get; set; } = Variant.Filled;

    protected void OnPositionChange()
    {
        OpenTop = !OpenTop;

        if (OpenTop)
        {
            _direction = Direction.Top;
        }
        else
        {
            _direction = Direction.Bottom;
        }
    }

    private void OnSelectedValue(string value)
    {
        if(value == "text")
        {
            _variant = Variant.Text;
        }
        if (value == "filled")
        {
            _variant = Variant.Filled;
        }
        if (value == "outlined")
        {
            _variant = Variant.Outlined;
        }
    }
}

Value presentation

Select uses the render fragements 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.

With render fragements

Without render fragements

Austria not representable

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect @bind-Value="@country" Label="With render fragements" Variant="Variant.Outlined" OffsetY="true">
            <MudSelectItem Value="@("Afghanistan")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Afghanistan.svg" height="14" class="mr-1"/> Afghanistan
            </MudSelectItem>
            <MudSelectItem Value="@("Australia")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg" height="14" class="mr-1" /> Australia
            </MudSelectItem>
            <MudSelectItem Value="@("Austria")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Flag_of_Austria.svg" height="14" class="mr-1" /> Austria
            </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="@("Afghanistan")" />
            <MudSelectItem Value="@("Andorra")" />
            <MudSelectItem Value="@("Australia")" />
            <MudSelectItem Value="@("Austria")" />
        </MudSelect>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudSelect @bind-Value="@country" Label="Austria not representable" Variant="Variant.Outlined" OffsetY="true">
            <MudSelectItem Value="@("Afghanistan")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Afghanistan.svg" height="14" class="mr-1" /> Afghanistan
            </MudSelectItem>
            <MudSelectItem Value="@("Australia")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_Australia_%28converted%29.svg" height="14" class="mr-1" /> Australia
            </MudSelectItem>
            <MudSelectItem Value="@("Andorra")">
                <img src="https://upload.wikimedia.org/wikipedia/commons/1/19/Flag_of_Andorra.svg" height="14" class="mr-1" /> Andorra
            </MudSelectItem>
        </MudSelect>
    </MudItem>

</MudGrid>

@code {
    string country="Austria";

   
}

Select with 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 fragement.

Select your pizza

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" OffsetY="true">
            <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;
}