Label Overview
The Label enables you to associate the label HTML element with the TextBox.
Basic Usage
To associate a TextBox with a Label, set the content property of the label.
Initializing the Label for the TextBox
The Label exposes a content property that sets the inner HTML of the label.
The below example shows how to create a Label from a string.
@(Html.Kendo().TextBox()
.Name("TextBox")
.Label(l => l.Content("First name"))
)
<kendo-textbox name="FirstName">
<textbox-label content="First Name" />
</kendo-textbox>
The below example shows how to create a Label from a function. The function context (available via the this keyword) will be set to the widget instance.
@(Html.Kendo().TextBox()
.Name("TextBox")
.Label(l => l.ContentHandler("labelContentHandler"))
)
<script>
function labelContentHandler() {
return "First name"
}
</script>
<kendo-textbox name="FirstName">
<textbox-label content-handler="labelContentHandler" />
</kendo-textbox>
<script>
function labelContentHandler() {
return "First Name"
}
</script>
Floating Label
The Floating Label enables you to provide a floating label functionality to the TextBox.
The following example demonstrates how to set a Floating Label for a TextBox.
@(Html.Kendo().TextBox()
.Name("TextBox")
.Label(label =>
{
label.Content("First name");
label.Floating(true);
})
)
<kendo-textbox name="FirstName">
<textbox-label content="First Name" floating="true" />
</kendo-textbox>
If set to true, the component will be wrapped in a container that will allow the floating label functionality.
Important: The value client-side method does not trigger the
focusoutevent of the input. This could affect the floating label functionality. You can overcome this behavior by manually invoking therefreshmethod of the Floating Label:$("#textbox").data("kendoTextBox").floatingLabel.refresh();