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>
);
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. |