Select

Visual Playground

Text

Filled

Outlined

Margin

Dense

ReadOnly

Disabled

Placeholder

HelperText

HelperTextOnFocus

Clearable

FitContent

Modal

@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"
                       FitContent="_fitContent"
                       Disabled="_disabled"
                       ReadOnly="_readonly"
                       Placeholder="@(_placeholder ? "Placeholder" : null)"
                       HelperText="@(_helperText ? "Helper Text" : null)"
                       HelperTextOnFocus="_helperTextOnFocus"
                       Clearable="_clearable"
                       Modal="_modal">
                @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" />
        <MudSwitch @bind-Value="_fitContent" Label="FitContent" Color="Color.Primary" />
        <MudSwitch @bind-Value="_modal" Label="Modal" Color="Color.Primary" />
    </MudStack>
</MudStack>

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

    private readonly 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

Select fast-food

String

Select drink

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 MudObservableCollection<string> via SelectedValues. The delimited string can be modified with the Delimiter parameter.

US States

Value:

"

Alaska

"

SelectedValues: IReadOnlyCollection<string>

{

"Alaska"

}

<MudSelect Values=_states Label="US States" MultiSelection="true" @bind-Value="_value" @bind-SelectedValues="_options">
</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: IReadOnlyCollection&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 = "Nothing selected";
    private MudObservableCollection<string> _options = ["Alaska"];
    private readonly 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"
    ];
}

API

Visual Playground

Using Select

Multiselect