New to Telerik UI for Blazor? Download free 30-day trial

Floating Label Validation

The Blazor FloatingLabel integrates with form validation of compatible Telerik components. When a form field is invalid, the floating label will change color to suggest user action.

Floating Label Integration with Forms and Validation

@using System.ComponentModel.DataAnnotations

@if (ValidSubmit)
    <p>The form was submitted successfully.</p>
    <EditForm Model="@TestUser"
        <DataAnnotationsValidator />
        <TelerikValidationSummary />

            <TelerikFloatingLabel Text="Username *">
                <TelerikTextBox @bind-Value="@TestUser.Username" />

            <TelerikFloatingLabel Text="Password *">
                <TelerikTextBox @bind-Value="@TestUser.Password" Password="true" />

            <TelerikButton ButtonType="@ButtonType.Submit">Submit</TelerikButton>

@code {
    User TestUser { get; set; } = new User();

    bool ValidSubmit { get; set; }

    async void HandleValidSubmit()
        ValidSubmit = true;

        await Task.Delay(2000);

        ValidSubmit = false;
        TestUser = new User();


    public class User
        [Display(Name = "Username")]
        [Required(ErrorMessage = "Username is required")]
        public string Username { get; set; }

        [Display(Name = "Password")]
        [MinLength(8, ErrorMessage = "Password should be at least 8 characters")]
        [Required(ErrorMessage = "Password is required")]
        public string Password { get; set; }

See Also

In this article