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
<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:
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
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" }
Dense
Tyrannosaur
Triceratops
Oviraptor
<MudSelect T="string" Label="Dense" Dense="true"> <MudSelectItem T="string" Value="@("Tyrannosaur")"/> <MudSelectItem T="string" Value="@("Triceratops")"/> <MudSelectItem T="string" Value="@("Oviraptor")"/> </MudSelect>
Disabled
Foo
Bar
<MudSelect T="string" Label="Disabled" Disabled="true"> <MudSelectItem T="string" Value="@("foo")">Foo</MudSelectItem> <MudSelectItem T="string" Value="@("bar")">Bar</MudSelectItem> </MudSelect>
Interactive
Text
Filled
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.
Afghanistan
Australia
Austria
Afghanistan
Andorra
Australia
Austria
Afghanistan
Australia
Andorra
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.
Cardinale
Diavolo
Margarita
Spinaci
Nothing selected yet.