blazor-docs/knowledge-base/inputs-floating-label.md

title	description	type	page_title	slug	position	tags	res_type
Add Floating Label to Telerik Inputs	How to add floating label in the Telerik Inputs.	how-to	Floating Label in Telerik Inputs	inputs-kb-floating-label			kb

Environment

Product	AutoComplete for Blazor, ComboBox for Blazor DatePicker for Blazor DateTimePicker for Blazor DropDownList for Blazor MaskedTextBox for Blazor, NumericTextBox for Blazor, TextBox for Blazor, TimePicker for Blazor
Version	3.0.0 and 3.0.1

Description

I would like to show a floating label for Telerik Inputs. The label should be displayed like a placeholder when the component is empty, and should animate to top label position of the input when focused.

Solution

important UI for Blazor 3.1.0 includes a standalone [FloatingLabel component]({%slug floatinglabel-overview%}). Use that instead.

The following code snippet shows how to add a floating label to TextBox, MaskedTextBox, TextArea, DatePicker, and DropDownList components. The example uses plain HTML elements and CSS styles that are included in the Telerik UI for Blazor theme. The styles transform the <label> element to a floating label.

caption Implement a floating label with static HTML

<div style="width: 400px;">
    <span class="k-floating-label-container @TextBoxEmptyClass">
        <TelerikTextBox Id="textbox" @bind-Value="@TextBoxValue"></TelerikTextBox>
        <label for="textbox" class="k-label">TextBox</label>
    </span>
    <br/><br/>
    <span class="k-floating-label-container @MaskedTextBoxEmptyClass">
        <TelerikMaskedTextBox Mask="###.###" Id="maskedtextbox" PlaceHolder=" " MaskOnFocus="true" @bind-Value="@MaskedTextBoxValue"></TelerikMaskedTextBox>
        <label for="maskedtextbox" class="k-label">MaskedTextBox</label>
    </span>
    <br/><br/>
    <span class="k-floating-label-container @TextAreaEmptyClass">
        <TelerikTextArea Id="textarea" @bind-Value="@TextAreaValue"></TelerikTextArea>
        <label for="textarea" class="k-label">TextArea</label>
    </span>
    <br/><br/>
    <span class="k-floating-label-container @DatePickerEmptyClass">
        <!-- Add empty space as Placeholder to show empty datepicker by default -->
        <TelerikDatePicker Id="datepicker" @bind-Value="@DatePickerValue" Placeholder=" "></TelerikDatePicker>
        <label for="datepicker" class="k-label">DatePicker</label>
    </span>
    <br/><br/>
    <span class="k-floating-label-container @DropDownListEmptyClass">
        <TelerikDropDownList Id="ddl" @bind-Value="@DropDownListValue" Data="@DropDownListData"></TelerikDropDownList>
        <label for="ddl" class="k-label">DropDownList</label>
    </span>
</div>

@code {
    public const string emptyClass = "k-state-empty";

    public string TextBoxValue { get; set; }
    public string TextBoxEmptyClass => string.IsNullOrEmpty(TextBoxValue) ? emptyClass : string.Empty;

    public string MaskedTextBoxValue { get; set; }
    public string MaskedTextBoxEmptyClass => string.IsNullOrEmpty(MaskedTextBoxValue) ? emptyClass : string.Empty;

    public string TextAreaValue { get; set; }
    public string TextAreaEmptyClass => string.IsNullOrEmpty(TextAreaValue) ? emptyClass : string.Empty;

    public DateTime? DatePickerValue { get; set; }
    public string DatePickerEmptyClass => DatePickerValue == null ? emptyClass : string.Empty;

    public string DropDownListValue { get; set; }
    public string DropDownListEmptyClass => string.IsNullOrEmpty(DropDownListValue) ? emptyClass : string.Empty;
    public List<string> DropDownListData { get; set; } = new List<string>() { "one", "two", "three" };
}