TextBox Overview

The TextBox enables you to style and provide a floating label functionality to input elements.

Basic Usage

The TextBox provides options for:

Styling input Elements

The following example demonstrates the TextBox directive in action.

@Component({
    selector: 'my-app',
    template: `
        <input kendoTextBox />
    `
})
class AppComponent {
}

Implementing Floating Labels

The TextBoxContainer component is deprecated and will no longer be supported. We advise using the FloatingLabel component instead.

The TextBoxContainer component supports both Template and Reactive Forms and can contain either:

  • Kendo input components and directives such as kendoTextBox, kendo-combobox, kendo-datepicker, etc., or
  • Form-bound input components.

The following example demonstrates the TextBoxContainer component in action.

@Component({
    selector: 'my-app',
    template: `
      <kendo-textbox-container floatingLabel="First name">
        <input kendoTextBox />
      </kendo-textbox-container>

      <kendo-textbox-container floatingLabel="Age">
        <kendo-numerictextbox [(ngModel)]="model" [min]="0" required>
        </kendo-numerictextbox>
      </kendo-textbox-container>
    `
})
class AppComponent {
    public model;
}

In this article