Form Select
Default Select
<MudSelect T="Selectoption" @bind-Value="selected1" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption,System.String]" Underline="false" Class="form-control" Placeholder="Open this select menu" Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
</MudSelect>
@code {
Selectoption selected1 = new Selectoption { Name = "" };
public class Selectoption
{
public string Name { get; set; }
// Note: this is important so the select can compare Selectoption
public override bool Equals(object o) {
var other = o as Selectoption;
return other?.Name==Name;
}
// Note: this is important so the select can compare Selectoption
public override int GetHashCode() => Name.GetHashCode();
}
Func<Selectoption,string> converter = p => p?.Name;
}
Disabled Select
<MudSelect T="Selectoption" @bind-Value="selected2" Underline="false" Class="form-control rounded-pill" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption,System.String]" Disabled="true" Placeholder="Open this select menu" Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
</MudSelect>
@code {
Selectoption selected2 = new Selectoption { Name = "" };
public class Selectoption
{
public string Name { get; set; }
// Note: this is important so the select can compare Selectoption
public override bool Equals(object o) {
var other = o as Selectoption;
return other?.Name==Name;
}
// Note: this is important so the select can compare Selectoption
public override int GetHashCode() => Name.GetHashCode();
}
Func<Selectoption,string> converter = p => p?.Name;
}
Rounded Select
<MudSelect T="Selectoption" @bind-Value="selected3" Underline="false" Class="form-control rounded-pill" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption,System.String]" Placeholder="Open this select menu" Label="" Variant="Variant.Text" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FormSelect+Selectoption" />
</MudSelect>
@code {
Selectoption selected3 = new Selectoption { Name = "" };
public class Selectoption
{
public string Name { get; set; }
// Note: this is important so the select can compare Selectoption
public override bool Equals(object o) {
var other = o as Selectoption;
return other?.Name==Name;
}
// Note: this is important so the select can compare Selectoption
public override int GetHashCode() => Name.GetHashCode();
}
Func<Selectoption,string> converter = p => p?.Name;
}
Select All
1 feline has been selected
<MudSelect T="string" MultiSelection="true" PopoverClass="multi-select-list" Underline="false" Class="form-control rounded-pill tomselect" SelectAll="true" SelectAllText="Select all felines" HelperText="@felineValue" @bind-Value="felineValue" @bind-SelectedValues="selectedFelines" MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))" Label="Felines" AdornmentIcon="@Icons.Material.Filled.Search">
@foreach (var feline in felines)
{
<MudSelectItem T="string" Value="@feline">@feline</MudSelectItem>
}
</MudSelect>
@code {
private string felineValue 123 get; set; 125; = "Nothing selected";
private IEnumerable<string> selectedFelines 123 get; set; 125; = new HashSet>string>() 123 "Lion" 125;;
private string[] felines = 123 "Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger" 125;;
}
MultiSelect
<MudSelect T="string" Underline="false" PopoverClass="multi-select-list" Class="form-control form-select pa-0 border-0 tomselect" Label="States" MultiSelection="true" @bind-Value="stateValue" @bind-SelectedValues="selectedStates">
@foreach (var state in states)
{
<MudSelectItem T="string" Value="@state">@state</MudSelectItem>
}
</MudSelect>
@code {
private string stateValue 123; get; set; } = "Nothing selected";
private IEnumerable</string> selectedStates 123; get; set; } = new HashSet</string>() 123; "Andhra Pradesh" };
private string[] states =
123;
"Andhra Pradesh", "Arunachal Pradesh", "Assam", "Bihar", "Chhattisgarh",
"Goa", "Gujarat", "Haryana", "Himachal Pradesh", "Jharkhand",
"Karnataka", "Kerala", "Madhya Pradesh", "Maharashtra", "Manipur",
"Meghalaya", "Mizoram", "Nagaland", "Odisha", "Punjab",
"Rajasthan", "Sikkim", "Tamil Nadu", "Telangana", "Tripura",
"Uttar Pradesh", "Uttarakhand", "West Bengal"
};
}
Value presentation
India
<MudSelect @bind-Value="country" Underline="false" Class="form-control form-select pa-0 border-0 tomselect" Label="With render fragements" Variant="Variant.Text">
<MudSelectItem Value="@("Austria")">
<img src="../assets/images/flags/india_flag.jpg" height="14" Class="mr-1" /> India
</MudSelectItem>
<MudSelectItem Value="@("Hungary")">
<img src="../assets/images/flags/russia_flag.jpg" height="14" Class="mr-1" /> Russia
</MudSelectItem>
<MudSelectItem Value="@("Sweden")">
<img src="../assets/images/flags/italy_flag.jpg" height="14" Class="mr-1" /> Italy
</MudSelectItem>
</MudSelect>
@code {
string country="Austria";
}
Tom Select WIth Javascript:
Single Select Option groups
Multiple Select Option groups
Data-* Attributes
Email Address Only
Blazor Tom Select:
Single Tom Select
Multiple Tom Select
Passing Unique Values
Passing Through Options