Components / Labels

FloatingLabel Overview

The FloatingLabel enables you to provide a floating label functionality to input elements.

Basic Usage

The FloatingLabel provides the floating label functionality in an input element.

Implementing Floating Labels

The FloatingLabel component supports both Template and Reactive Forms and can contain Kendo UI for Angular Input components such as kendo-combobox and kendo-numerictextbox,
or HTML Input elements with the kendoTextBox directive applied.

Using with Kendo UI for Angular Inputs

Wrap the component with within a FloatingLabel component. When using the MaskedTextBox component, set its maskOnFocus option to true.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
     <kendo-floatinglabel text="Enter Age">
        <kendo-numerictextbox [(ngModel)]="age" name="age"></kendo-numerictextbox>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="Enter Phone Number">
      <kendo-maskedtextbox [mask]="mask" [maskOnFocus]="true" [(ngModel)]="maskedText" name="maskedText"></kendo-maskedtextbox>
      </kendo-floatinglabel>
    `
})
export class AppComponent {
    public age: number;
    public maskedText: string;
    public mask = '(999) 000-00-00-00';
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { FloatingLabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, InputsModule, FloatingLabelModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Using with HTML Input elements

To provide the floating label functionality to regular HTML Input elements, wrap an Input element with the kendoTextBox directive applied within a FloatingLabel component.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
     <kendo-floatinglabel text="Enter First Name">
        <input [(ngModel)]="firstName" kendoTextBox name="firstName" />
      </kendo-floatinglabel>
      <kendo-floatinglabel text="Enter Last Name">
          <input [(ngModel)]="lastName" kendoTextBox name="lastName" />
      </kendo-floatinglabel>
    `
})
export class AppComponent {
    public firstName: string;
    public lastName: string;
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TextBoxModule } from '@progress/kendo-angular-inputs';
import { FloatingLabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, TextBoxModule, FloatingLabelModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Using with Kendo UI for Angular Date Inputs

Set the Kendo UI for Angular DateInput, DatePicker, or DateTimePicker placeholder option to an empty string, and wrap the component within a FloatingLabel.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
     <kendo-floatinglabel text="Enter date">
        <kendo-datepicker [(ngModel)]="date" placeholder="" name="date">
        </kendo-datepicker>
    </kendo-floatinglabel>
    <kendo-floatinglabel text="Enter date">
        <kendo-dateinput [(ngModel)]="date" placeholder="" name="date">
        </kendo-dateinput>
    </kendo-floatinglabel>
    <kendo-floatinglabel text="Enter date">
        <kendo-datetimepicker [(ngModel)]="date" placeholder="" name="date">
        </kendo-datetimepicker>
    </kendo-floatinglabel>
    `
})
export class AppComponent {
    public date: Date;
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { FloatingLabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, DateInputsModule, FloatingLabelModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Using with Kendo UI for Angular Dropdowns

Place an element from the Kendo UI for Angular DropDowns package within a FloatingLabel.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
     <kendo-floatinglabel text="Select value">
        <kendo-autocomplete [(ngModel)]="autoCompleteValue" [data]="data">
        </kendo-autocomplete>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="Select value">
        <kendo-combobox [(ngModel)]="comboBoxValue" [data]="data">
        </kendo-combobox>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="Select value">
        <kendo-dropdownlist [(ngModel)]="dropDownValue" [data]="data">
        </kendo-dropdownlist>
      </kendo-floatinglabel>
      <kendo-floatinglabel text="Select value(s)">
        <kendo-multiselect [(ngModel)]="multiSelectValue" [data]="data">
        </kendo-multiselect>
      </kendo-floatinglabel>
    `
})
export class AppComponent {
    public data: string[] = ['foo', 'bar', 'baz'];
    public comboBoxValue: string;
    public dropDownValue: string;
    public autoCompleteValue: string;
    public multiSelectValue: string[] = [];
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { FloatingLabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, DropDownsModule, FloatingLabelModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article