Floating labels
Basic Examples
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
</div>
<div Class="mb-3">
<MudTextField @bind-Value="Password" Label="Password" Variant="Variant.Outlined" InputType="Password" />
</div>
@code {
private string Password { get; set; }
bool isShow;
InputType PasswordInput = InputType.Password;
string PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
void ButtonTestclick()
{
@if (isShow)
{
isShow = false;
PasswordInputIcon = Icons.Material.Filled.VisibilityOff;
PasswordInput = InputType.Password;
}
else {
isShow = true;
PasswordInputIcon = Icons.Material.Filled.Visibility;
PasswordInput = InputType.Text;
}
}
}
Readonly plain text
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="Outlined" Variant="Variant.Outlined"></MudTextField>
</div>
<div Class="mb-3">
<MudTextField @bind-Value="Password" Label="Password" Variant="Variant.Outlined" InputType="Password" />
</div>
@code {
public string ReadOnly1 { get; set; } = " ";
public string ReadOnly2 { get; set; } = "name@example.com";
}
Floating Labels With Pre Defined Values
Invalid input
<div Class="mb-3">
<MudTextField T="string" Text="mdo@example.com" Underline="false" Class="form-control" Label="Input with value"></MudTextField>
</div>
<div Class="mb-3">
<MudTextField T="string" Text="mdo@example.com" Underline="false" Label="" Class="form-control mud-border-error is-invalid" HelperText="Invalid input"></MudTextField>
</div>
Textareas
<div Class="mb-3">
<MudTextField T="string" Class="form-control" Variant="Variant.Text" Label="Description" Lines="2" Placeholder=""/>
</div>
<div Class="mb-3">
<MudTextField T="string" Class="form-control" Variant="Variant.Text" Label="Disabled" Disabled="true" Lines="2" Placeholder=""/>
</div>
Floating Labels In Select
<MudSelect T="Selectoption" @bind-Value="selected1" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption,System.String]" Underline="false" Class="form-control" Placeholder="Open this select menu" Label="Works with selects" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+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;
}
Floating Labels With Layouts
<MudTextField T="string" Text="mdo@example.com" Class="form-control" Label="Email address" Typo="Typo.input" Variant="Variant.Outlined"></MudTextField>
<MudSelect T="Selectoption" @bind-Value="selected2" ToStringFunc="System.Func`2[BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption,System.String]" Underline="false" Class="form-control" Placeholder="Open this select menu" Label="Works with selects" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" Clearable>
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+Selectoption" />
<MudSelectItem Value="BuildingMaterials.Portal.Components.Pages.Forms.FloatingLabels+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;
}
Floating Label Colors
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="primary" Variant="Variant.Outlined" Class="form-floating mud-border-primary floating-primary"></MudTextField>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="secondary" Variant="Variant.Outlined" Class="form-floating floating-secondary"></MudTextField>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="warning" Variant="Variant.Outlined" Class="form-floating floating-warning"></MudTextField>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="Info" Variant="Variant.Outlined" Class="form-floating floating-info"></MudTextField>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="success" Variant="Variant.Outlined" Class="form-floating floating-success"></MudTextField>
</div>
</MudItem>
<MudItem xs="12" md="6" lg="4">
<div Class="mb-3">
<MudTextField @bind-Value="TextValue" Label="danger" Variant="Variant.Outlined" Color="form-floating floating-danger"></MudTextField>
</div>
</MudItem>

