Blazor Floating Label Overview

The Blazor FloatingLabel component provides additional features and improved user experience, compared to the standard HTML label. The floating label displays on top of empty non-focused components and moves above them on focus.

Benefits

The Telerik FloatingLabel enhances HTML label functionality in the following ways:

• built-in animations
• integration with form validation
• integration with the placeholder attribute
• association with non-form elements - for example, the TelerikDropDownList component renders as a <span>

Creating Blazor FloatingLabel

1. Use the TelerikFloatingLabel tag.
2. Set the Text parameter of the floating label.
3. Place a compatible Telerik component inside the floating label.
4. Set an Id to the Telerik component. The Id value will automatically render as a for attribute for the <label> element.

How to use a Floating Label

<TelerikFloatingLabel Text="Your Name">
    <TelerikTextBox Id="name" @bind-Value="@Name" />
</TelerikFloatingLabel>

@code {
    string Name { get; set; }
}

Compatibility

The FloatingLabel integrates with focusable Telerik Blazor components:

• AutoComplete
• ComboBox
• DateInput
• DatePicker
• DateTimePicker
• DropDownList
• MaskedTextBox
• MultiSelect
• NumericTextBox
• TextArea
• TextBox
• TimePicker

The FloatingLabel does not support third-party components and generic HTML inputs.

Forms and Validation

The FloatingLabel can change its styles, based on validation state. See Validation for details and example.

Placeholder Behavior

Labels and placeholders serve similar purpose for the user experience.

If a Telerik component has both a Placeholder and a floating label, the behavior is:

• When the floating label is over the component, then the placeholder is not rendered.
• When the floating label is outside the component and the focused component has no value, the placeholder is visible.

Integration with Prefix Adornment

When using the PrefixTemplate for a component wrapped in a FloatingLabel, the label will overlap the prefix.

To ensure both the FloatingLabel and the prefix content are properly displayed, move the label with CSS:

<style>
    .custom-label-class .k-floating-label {
        margin-left: 30px;
    }
</style>

<TelerikFloatingLabel Class="custom-label-class" Text="Enter email">
    <TelerikTextBox @bind-Value="@TextValue"
                    Width="300px">
        <TextBoxPrefixTemplate>
            <TelerikSvgIcon Icon="@SvgIcon.Envelop" />
        </TextBoxPrefixTemplate>
    </TelerikTextBox>
</TelerikFloatingLabel>

@code{
    public string TextValue { get; set; }
}

FloatingLabel Parameters

The following table lists the FloatingLabel parameters. Also check the FloatingLabel API Reference for a full list of properties, methods and events.

Attribute	Type	Description
Class	string	Renders additional CSS class to the span.k-floating-label-container element, which holds the <label> child element. Use Class to apply custom styles or override the theme.
Id	string	Renders an id attribute to the label.k-label element. To improve accessibility, set the same string as floating label Id and AriaLabelledBy value of the associated Telerik component.

Next Steps

• Review Floating Label integration with form validation

See Also

• Live Floating Label Demos
• Floating Label API Reference