TextArea

A text area is a multiline text input box, with an optional character counter when there is a length limit.

Note

The HvTextArea component is built on top of the Input component, therefore many properties are shared between the components. Please refer to the Input documentation for usage, like validation or controlled state management.

Maximum length

Use the maxCharQuantity prop to limit the number of characters.

By default, the limited can be exceeded, but you can set the blockMax prop to prevent this.
The middleCountLabel allows customizing the count separator (/).

You can write past the limit

9 of 10

You can't write past the limit

9 / 10

<>
  <HvTextArea
    label="You can write past the limit"
    defaultValue="Some text"
    middleCountLabel="of"
    maxCharQuantity={10}
    rows={5}
  />
  <HvTextArea
    label="You can't write past the limit"
    defaultValue="Some text"
    maxCharQuantity={10}
    rows={5}
    blockMax
  />
</>

<>
  <HvTextArea
    label="You can write past the limit"
    defaultValue="Some text"
    middleCountLabel="of"
    maxCharQuantity={10}
    rows={5}
  />
  <HvTextArea
    label="You can't write past the limit"
    defaultValue="Some text"
    maxCharQuantity={10}
    rows={5}
    blockMax
  />
</>

Auto scroll

Enable automatic scrolling to the bottom using the autoScroll prop.
Scrolling stops when the user scrolls up and resumes when they return to the bottom.

Server logs

import { useEffect, useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(makeLogLine);


  useEffect(() => {
    const id = setInterval(() => {
      setValue((val) => `${val}\n${makeLogLine()}`);
    }, 2000);


    return () => clearInterval(id);
  }, []);


  return <HvTextArea label="Server logs" rows={6} value={value} autoScroll />;
}


function makeLogLine() {
  return `${Date.now()}: ${Math.random().toString(36).slice(2)}`;
}

import { useEffect, useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(makeLogLine);

  useEffect(() => {
    const id = setInterval(() => {
      setValue((val) => `${val}\n${makeLogLine()}`);
    }, 2000);

    return () => clearInterval(id);
  }, []);

  return <HvTextArea label="Server logs" rows={6} value={value} autoScroll />;
}

function makeLogLine() {
  return `${Date.now()}: ${Math.random().toString(36).slice(2)}`;
}

TextArea

Maximum length

Auto scroll

Related components