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 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:

• 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