This ticket is marked as "Scheduled for 3.1.0" but as we have seen the Label component was instead removed from other fields, let alone be added elsewhere, as was requested in this ticket. Please change the title of the ticket or at least state exactly what is planned for the release since the whole content is misleading.

It works a little better if you add a focused class now that Blazor supports it:

 

<span class="k-floating-label-container @focusedClass @( IsEmpty() ? "k-state-empty" : "" )" style="width:100%;" @onfocusin="FocusIn" @onfocusout="FocusOut">
    @ChildContent
    <label class="k-label">@Label</label>
</span>

@code{
    [Parameter] public string Label { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public Func<bool> IsEmpty { get; set; } = () => true;

    private string focusedClass = ""; 

    protected async Task FocusIn()
    {
        focusedClass = "k-state-focused";
    }

    protected async Task FocusOut()
    {
        focusedClass = "";
    }
}

this is pretty frustrating at least for numeric amd textbox since we use a dynamic component model and we just cant set label the same way amd then needed to replicate the css for non label supprted inputs.

in case it helps anyone... for the TelerikDropDownList (and likely others) we desired the focused behavior to be in parity with TelerikTextBox, i.e. float and change to blue on focus... the following code combines the suggestions along with one additional style which is manageable for us

this fledgling label component is trying to be agnostic but the style is specific to the dropdown so we'll have to see how well this evolves as we get into wrapping other widgets with the same general behavior

page:

<style> <!-- presumably this would go in a global stylesheet -->
    .k-floating-label-container > .k-dropdown.k-state-focused + .k-label {
        transform: translate(0, -6px) translate(-1px, -1.03125em) translate(-12.5%, -9.375%) scale(.75);
        color: blue;
    }
</style>

<FloatingLabel Label="Gender" IsEmpty="@( ()=> person.Gender == null )">
    <TelerikDropDownList @bind-Value="person.Gender" DefaultText=""
                          Data="@genders" TextField="Text" ValueField="Id"
                          Width="100%" PopupWidth="200px" PopupHeight="auto" Id="GenderDDL" />
</FloatingLabel>

 

FloatingLabel.razor component:

<span class="k-floating-label-container @( IsEmpty() ? "k-state-empty" : "" )">
    @ChildContent
    <label class="k-label">@Label</label>
</span>

@code{
    [Parameter] public string Label { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public Func<bool> IsEmpty { get; set; } = () => true;
}

We are working around this by wrapping a TelerikDropDownList in a <label> tag with a custom style; however, it would be much cleaner to have the Label property on the TelerikDropDownList control. I agree with Gilles and hope this will be implemented soon.