MudBlazor - Blazor Component Library

Visual Playground

Text

Filled

Outlined

Margin

Dense

ReadOnly

Disabled

Placeholder

HelperText

HelperTextOnFocus

Clearable

@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"
                       Disabled="_disabled"
                       ReadOnly="_readonly"
                       Placeholder="@(_placeholder ? "Placeholder" : null)"
                       HelperText="@(_helperText ? "Helper Text" : null)"
                       HelperTextOnFocus="_helperTextOnFocus"
                       Clearable="_clearable">
                @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" />
    </MudStack>
</MudStack>

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

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

Alaska

US States

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

}

Select

API

Visual Playground

Using Select

Multiselect