MudBlazor - Blazor Component Library

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.

Note: If you use custom types as values, make sure they override Equals and GetHashCode as well as ToString. See the example below.

Coffee

Price

Pizza

<MudSelect T="string" Label="Coffee" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@("Cappuccino")" />
    <MudSelectItem Value="@("Cafe Latte")" />
    <MudSelectItem Value="@("Espresso")" />
</MudSelect>
<MudSelect T="double" Label="Price" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem T="double" Value="4.50" />
    <MudSelectItem T="double" Value="4.99" />
    <MudSelectItem T="double" Value="3.60" />
</MudSelect>
<MudSelect T="Pizza" Label="Pizza" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter">
    <MudSelectItem Value="@(new Pizza("Cardinale"))" />
    <MudSelectItem Value="@(new Pizza("Diavolo"))" />
    <MudSelectItem Value="@(new Pizza("Margarita"))" />
    <MudSelectItem Value="@(new Pizza("Spinaci"))" />
</MudSelect>

@code {
    public class Pizza
    {
        public Pizza(string name)
        {
            Name = name;
        }

        public readonly string Name;

        // Note: this is important so the MudSelect can compare pizzas
        public override bool Equals(object o)
        {
            var other = o as Pizza;
            return other?.Name == Name;
        }

        // Note: this is important too!
        public override int GetHashCode() => Name?.GetHashCode() ?? 0;

        // Implement this for the Pizza to display correctly in MudSelect
        public override string ToString() => Name;
    }
}

Props

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

With Helper

Helper text

Disabled

Read Only

<MudSelect HelperText="Helper text" T="string" Label="With Helper" Variant="Variant.Text">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Mike Rex")" />
</MudSelect>
<MudSelect Disabled="true" T="string" Label="Disabled" Variant="Variant.Outlined">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Henon Rex")" />
</MudSelect>
<MudSelect ReadOnly="true" T="string" Label="Read Only" Variant="Variant.Filled">
    <MudSelectItem Value="@("Tyrannosaur")" />
    <MudSelectItem Value="@("Benno Rex")" />
</MudSelect>

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

Select

API

Variants

Props

Using Select