Text Area

Common Input Field Features
Automatic Height Adjustment
Character Counter
Related Components

Text Area is an input field component for multi-line text input.

Source code

text-area-basic.ts
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/text-area';
import type { TextAreaValueChangedEvent } from '@vaadin/text-area';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('text-area-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  private charLimit = 140;

  @state()
  private text = 'Great job. This is excellent!';

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-text-area
        label="Comment"
        .maxlength="${this.charLimit}"
        .value="${this.text}"
        .helperText="${`${this.text.length}/${this.charLimit}`}"
        @value-changed="${(event: TextAreaValueChangedEvent) => {
          this.text = event.detail.value;
        }}"
      ></vaadin-text-area>
      <!-- end::snippet[] -->
    `;
  }
}
TextAreaBasic.javapackage com.vaadin.demo.component.textarea;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("text-area-basic")
public class TextAreaBasic extends Div {

    public TextAreaBasic() {
        int charLimit = 140;

        // tag::snippet[]
        TextArea textArea = new TextArea();
        textArea.setLabel("Comment");
        textArea.setMaxLength(charLimit);
        textArea.setValueChangeMode(ValueChangeMode.EAGER);
        textArea.addValueChangeListener(e -> {
            e.getSource()
                    .setHelperText(e.getValue().length() + "/" + charLimit);
        });
        textArea.setValue("Great job. This is excellent!");
        add(textArea);
        // end::snippet[]
    }

}

Text Area is typically used for descriptions, comments, and other longer free-form content.

Common Input Field Features

Text Area includes all Text Field and shared input field features.

Automatic Height Adjustment

Unless set to a fixed height, Text Area adjusts its height automatically based on its content. The default and minimum height is two rows of text.

Open in a
new tab

Source code

text-area-auto-height.ts
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/text-area';
import { loremIpsum } from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('text-area-auto-height')
export class Example extends LitElement {
  static override styles = css`
    vaadin-text-area {
      width: 100%;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-text-area label="Description" value="${loremIpsum}"></vaadin-text-area>
      <!-- end::snippet[] -->
    `;
  }
}
TextAreaAutoHeight.javapackage com.vaadin.demo.component.textarea;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("text-area-auto-height")
public class TextAreaAutoHeight extends Div {

    public TextAreaAutoHeight() {
        String loremIpsum = DataService.getTemplates().getLoremIpsum();

        // tag::snippet[]
        TextArea textArea = new TextArea();
        textArea.setWidthFull();
        textArea.setLabel("Description");
        textArea.setValue(loremIpsum);
        add(textArea);
        // end::snippet[]
    }

}

Minimum and Maximum Height

The automatic resizing can be restricted to a minimum and maximum height:

Open in a
new tab

Source code

text-area-height.ts
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/text-area';
import { loremIpsum } from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('text-area-height')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <style>
        vaadin-text-area {
          width: 100%;
          min-height: 100px;
          max-height: 150px;
        }
      </style>

      <vaadin-text-area label="Description" value="${loremIpsum}"></vaadin-text-area>
      <!-- end::snippet[] -->
    `;
  }
}
TextAreaHeight.javapackage com.vaadin.demo.component.textarea;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("text-area-height")
public class TextAreaHeight extends Div {

    public TextAreaHeight() {
        String loremIpsum = DataService.getTemplates().getLoremIpsum();

        // tag::snippet[]
        TextArea textArea = new TextArea();
        textArea.setWidthFull();
        textArea.setMinHeight("100px");
        textArea.setMaxHeight("150px");
        textArea.setLabel("Description");
        textArea.setValue(loremIpsum);
        add(textArea);
        // end::snippet[]
    }

}

Character Counter

Longer free-form inputs are often capped at a certain character limit. The current character count and upper limit should be displayed to the user, for example by using the Helper feature:

Open in a
new tab

Source code

text-area-helper.ts
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/text-area';
import type { TextAreaValueChangedEvent } from '@vaadin/text-area';
import { loremIpsum } from '../../../../src/main/resources/data/templates.json';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('text-area-helper-2')
export class Example extends LitElement {
  static override styles = css`
    vaadin-text-area {
      width: 100%;
    }
  `;

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  private charLimit = 600;

  @state()
  private text = loremIpsum;

  protected override render() {
    return html`
      <vaadin-text-area
        label="Description"
        .maxlength="${this.charLimit}"
        .value="${this.text}"
        .helperText="${`${this.text.length}/${this.charLimit}`}"
        @value-changed="${(event: TextAreaValueChangedEvent) => {
          this.text = event.detail.value;
        }}"
      ></vaadin-text-area>
    `;
  }
  // end::snippet[]
}
TextAreaHelper.javapackage com.vaadin.demo.component.textarea;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;
import com.vaadin.demo.domain.DataService;

@Route("text-area-helper")
public class TextAreaHelper extends Div {

    public TextAreaHelper() {
        String loremIpsum = DataService.getTemplates().getLoremIpsum();
        int charLimit = 600;

        // tag::snippet[]
        TextArea textArea = new TextArea();
        textArea.setWidthFull();
        textArea.setLabel("Description");
        textArea.setMaxLength(charLimit);
        textArea.setValueChangeMode(ValueChangeMode.EAGER);
        textArea.addValueChangeListener(e -> {
            e.getSource()
                    .setHelperText(e.getValue().length() + "/" + charLimit);
        });
        textArea.setValue(loremIpsum);
        add(textArea);
        // end::snippet[]
    }

}

Component	Usage recommendations
Text Field	Basic single-line text input.
Rich Text Editor	Multi-line text entry with rich formatting support.

Component

Usage recommendations

Text Field

Basic single-line text input.

Rich Text Editor

Multi-line text entry with rich formatting support.

79CE0145-8514-417E-A033-6AB79E7BF86D

Documentation

Documentation

Text Area

Common Input Field Features

Automatic Height Adjustment

Minimum and Maximum Height

Character Counter

Documentation

Common Input Field Features

Automatic Height Adjustment

Minimum and Maximum Height

Character Counter

Related Components