All Components

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 supports both Template and Reactive Forms and can contain either:

  • Inputs with the kendoTextBox directive, 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