All Components

TextArea Overview

The TextArea enables you to style and provide a floating label functionality to textarea elements.

Basic Usage

The TextArea provides options for:

Styling textarea Elements

The following example demonstrates the TextArea directive in action.

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

Implementing Floating Labels

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

  • textarea elements with the kendoTextArea directive, or
  • Form-bound textarea elements.

The following example demonstrates the TextBoxContainer component in action.

@Component({
    selector: 'my-app',
    template: `
      <kendo-textbox-container floatingLabel="First name">
        <textarea kendoTextArea></textarea>
      </kendo-textbox-container>
    `
})
class AppComponent {
}

Auto-Resizing

To automatically adjust the height of a TextArea as the user types, set its autoSize property to true.
The auto-resizing functionality also works when the TextArea is bound to a component property that is dynamically updated.

@Component({
    selector: 'my-app',
    template: `
        <textarea kendoTextArea [autoSize]="true"></textarea>
    `
})
class AppComponent {}
In this article