TextArea Overview

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

Basic Usage

The TextArea provides options for:

• Applying styling options by using the TextArea directive
• Implementing floating labels by using the TextBoxContainer component
• Auto-resizing

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 {}

Suggested Links

• API Reference of the TextArea Directive
• API Reference of the TextBoxContainer Component