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>