Docs

Text Area

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

const charLimit = 140;
const [text, setText] = useState("Great job. This is excellent!");

return (
  <TextArea
    label="Comment"
    maxlength={charLimit}
    value={text}
    onValueChanged={({ detail: { value } }) => setText(value)}
    helperText={`${text.length}/${charLimit}`}
  ></TextArea>
);

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.

Minimum and Maximum Height

The automatic resizing can be restricted to a minimum and maximum height by using CSS min-height and max-height.

Important

You can find more information in the corresponding article on vaadin.com.