Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Text Area

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

Open in a
new tab
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);

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
TextArea textArea = new TextArea();
textArea.setWidthFull();
textArea.setLabel("Description");
textArea.setValue(loremIpsum);
add(textArea);

Minimum and Maximum Height

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

Open in a
new tab
TextArea textArea = new TextArea();
textArea.setWidthFull();
textArea.setMinHeight("100px");
textArea.setMaxHeight("150px");
textArea.setLabel("Description");
textArea.setValue(loremIpsum);
add(textArea);

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
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);
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