MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Select

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

See Select API for parameter documentation.

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.

Cappuccino

Cafe Latte

Espresso

Irish Coffee

4.50

4.99

3.60

21.99

Apple Pie

Blackberry Pie

Rhubarb Pie

Lemon Pie

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

String

Pizza (Disabled)

Burger

Hot Dog

Enum

Tee

SparklingWater

SoftDrink

Cider

Beer

Wine

Moonshine

CultureInfo

English (United States)

German (Austria)

Portuguese (Brazil)

Chinese (Simplified, China)

Selected values:

Select fast-food
Tee
Select culture

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@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"
                   OffsetY="true" 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"
                   OffsetY="true" 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"
                   OffsetY="true" 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.

Alaska

Pick your favorite 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

MudSelect.Value: "Alaska"

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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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",
    };

}

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

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

MudSelect.Value: "1 state has been selected"

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

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using System.Linq

<MudGrid>
    <MudItem xs="12" md="12">
        <MudSelect T="string" Label="US States" HelperText="Pick your favorite states"
         MultiSelection="true" OffsetY="true"
         @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 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",
    };

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

Dense

Tyrannosaur

Triceratops

Oviraptor

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSelect T="string" Label="Dense" Dense="true"
           AdornmentIcon="@Icons.Material.Filled.Search">
    <MudSelectItem Value="@("Tyrannosaur")"/>
    <MudSelectItem Value="@("Triceratops")"/>
    <MudSelectItem Value="@("Oviraptor")"/>
</MudSelect>

Disabled

Foo

Bar

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSelect T="string" Label="Disabled" Disabled="true"
           AdornmentIcon="@Icons.Material.Filled.SearchOff" AdornmentColor="Color.Primary">
    <MudSelectItem Value="@("foo")">Foo</MudSelectItem>
    <MudSelectItem Value="@("bar")">Bar</MudSelectItem>
</MudSelect>

Interactive

Text

Filled

Outlined

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 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.

Afghanistan

Australia

Austria

Afghanistan

Andorra

Australia

Austria

Afghanistan

Australia

Andorra

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 fragment.

Cardinale

Diavolo

Margarita

Spinaci

Nothing selected yet.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙