Text Area
API: TypeScript / Java
Source: TypeScript / Java
Text Area is an input field component for multi-line text input.
Open in a
new tab
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.
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.
Minimum and Maximum Height
The automatic resizing can be restricted to a minimum and maximum height:
Open in a
new tab
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
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>
`;
}