Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Text Area

Source: TypeScript / Java

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

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

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
<vaadin-text-area label="Description" value="${loremIpsum}"></vaadin-text-area>

Minimum and Maximum Height

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

Open in a
new tab
<style>
  vaadin-text-area {
    width: 100%;
    min-height: 100px;
    max-height: 150px;
  }
</style>

<vaadin-text-area label="Description" value="${loremIpsum}"></vaadin-text-area>

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
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>
  `;
}
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