# Association

You can apply a floating label functionality to Kendo UI for Angular or other Angular components, or HTML input elements by wrapping them within a `<kendo-floatinglabel>` element.

## Kendo UI for Angular Inputs

To associate the FloatingLabel with a Kendo UI for Angular input components like TextBox, NumericTextBox, MaskedTextBox and etc., wrap the component inside the FloatingLabel. If you use the MaskedTextBox, set its [`maskOnFocus`](https://www.telerik.com/kendo-angular-ui-develop/components/inputs/api/maskedtextboxcomponent#maskonfocus) option to `true`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/labels/floatinglabel/association/inputs/source.txt)

## Kendo UI for Angular Date Inputs

To associate the FloatingLabel with a Kendo UI for Angular date input component, set the `placeholder` option of the DateInput, DatePicker, or DateTimePicker to an empty string, and wrap the component within a FloatingLabel.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/labels/floatinglabel/association/dateinputs/source.txt)

## Kendo UI for Angular Dropdowns

To associate the FloatingLabel with a Kendo UI for Angular DropDowns component, place the desired DropDown component within a FloatingLabel.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/labels/floatinglabel/association/dropdowns/source.txt)

## HTML Input Elements

To provide the floating label functionality to regular HTML `input` elements, apply the `kendoTextBox` directive to the `input` and wrap the component within a FloatingLabel.

```html
<kendo-floatinglabel text="Enter First Name">
   <input [(ngModel)]="firstName" kendoTextBox name="firstName" />
</kendo-floatinglabel>
```

The following example demonstrates how to enable the floating label functionality to an `<input />` element.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/labels/floatinglabel/association/html-elements/source.txt)

## Suggested Links

* [API Reference of the FloatingLabel](https://www.telerik.com/kendo-angular-ui-develop/components/labels/api/floatinglabelcomponent)