# Label Overview

The Label enables you to associate the label HTML element with the NumericTextBox.

* [Demo page for the NumericTextBox Floating Label](https://demos.telerik.com/aspnet-core/numerictextbox/floating-label)

* [Demo page for the NumericTextBox TagHelper](https://demos.telerik.com/aspnet-core/numerictextbox/tag-helper)

## Basic Usage

To associate a NumericTextBox with a Label, set the `content` property of the `label`.

## Initializing the Label for NumericTextBox

The Label exposes a `content` property that sets the inner HTML of the label.

The below example demonstrates how to create a Label from a string.

```Razor HtmlHelper
    @(Html.Kendo().NumericTextBox()
        .Name("NumericTextBox")
        .Label(l => l.Content("Price"))
    )
```

```Razor TagHelper
    <kendo-numerictextbox name="Price">
        <numerictextbox-label content="Price" />
    </kendo-numerictextbox>
```

The below example demonstrates how to create a Label from a function. The function context (available via the `this` keyword) will be set to the widget instance.

```Razor HtmlHelper
    @(Html.Kendo().NumericTextBox()
            .Name("NumericTextBox")
            .Label(l => l.ContentHandler("labelContentHandler"))
    )
    <script>
        function labelContentHandler() {
            return "Price"
        }
    </script>
```

```Razor TagHelper
    <kendo-numerictextbox name="Price">
        <numerictextbox-label content-handler="labelContentHandler" />
    </kendo-numerictextbox>
    <script>
        function labelContentHandler() {
            return "Price"
        }
    </script>
```

## Floating Label

The Floating Label enables you to provide a floating label functionality to the NumericTextBox.

The following example demonstrates how to set a Floating Label for a NumericTextBox.

```Razor HtmlHelper
    @(Html.Kendo().NumericTextBox()
           .Name("NumericTextBox")
           .Label(label =>
           {
               label.Content("Price");
               label.Floating(true);
           })
    )
```

```Razor TagHelper
    <kendo-numerictextbox name="Price">
        <numerictextbox-label content="Price" floating="true" />
    </kendo-numerictextbox
```

If set to `true`, the component will be wrapped in a container that will allow the floating label functionality.

> **Important:** The [value](https://docs.telerik.com/kendo-ui/api/ui/numerictextbox/methods/value) client-side method **does not trigger** the `focusout` event of the input.

This could affect the floating label functionality.
You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#numerictextbox").data("kendoNumericTextBox").floatingLabel.refresh();`

## See Also

* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/numerictextbox)
* [Using the API of the NumericTextBox HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/numerictextbox/api)