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}"
@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.
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 indicated to the user, for example, by using the Helper feature:
Open in a
new tab
new tab
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>
`;
}