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

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

TextAreaAutoHeight.javapackage com.vaadin.demo.component.textarea;

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

@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

TextAreaHeight.javapackage com.vaadin.demo.component.textarea;

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

@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 indicated to the user, for example, by using the Helper feature:

Open in a
new tab

Source code

TextAreaHelper.javapackage com.vaadin.demo.component.textarea;

import com.vaadin.demo.domain.DataService;
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-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.

9846D297-9B45-45FB-A0A1-1774F74596E1

Docs

Docs

Text Area

Common Input Field Features

Automatic Height Adjustment

Minimum and Maximum Height

Character Counter

Docs

Common Input Field Features

Automatic Height Adjustment

Minimum and Maximum Height

Character Counter

Related Components