TextArea

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

Source Code

uikit-react-core

SummaryProject summary

0 / 50

label

description

required

resizable

readOnly

disabled

<HvTextArea label="Summary" description="Project summary" required rows="5" maxCharQuantity="50" />

<HvTextArea label="Summary" description="Project summary" required rows="5" maxCharQuantity="50" />

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

The maxCharQuantity prop can be used to limit the number of allowed 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

Use the autoScroll prop to automatically scroll to bottom. Auto-scroll stops once the user scrolls up, and resumes once the user scrolls back 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)}`;
}

HvInput

Tag

TextArea

Maximum length

Auto scroll

Related components