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

<vaadin-text-area
  label="Comment"
  .maxlength="${this.charLimit}"
  .value="${this.text}"
  @value-changed="${(e: CustomEvent) => (this.text = e.detail.value)}"
  .helperText="${`${this.text.length}/${this.charLimit}`}"
></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.

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

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

private charLimit = 600;

@state()
private text = loremIpsum;

static get styles() {
  return css`
    vaadin-text-area {
      width: 100%;
    }
  `;
}

render() {
  return html`
    <vaadin-text-area
      label="Description"
      .maxlength="${this.charLimit}"
      .value="${this.text}"
      @value-changed="${(e: CustomEvent) => (this.text = e.detail.value)}"
      .helperText="${`${this.text.length}/${this.charLimit}`}"
    >
    </vaadin-text-area>
  `;
}
ComponentUsage recommendations

Text Field

Basic single-line text input.

Rich Text Editor

Multi-line text entry with rich formatting support.