Textarea - Chakra Ui

Usage

jsx

import { Textarea } from "@chakra-ui/react"

jsx

<Textarea placeholder="..." />

Use the variant prop to change the appearance of the textarea.

Use the size prop to change the size of the textarea.

Pair the textarea with the Field component to add helper text.

Pair the textarea with the Field component to add error text.

Compose the textarea with the Field component to add a label, helper text, and error text.

Here's an example of how to integrate the textarea with react-hook-form.

Use the resize prop to control the resize behavior of the textarea.

To limit the maximum height (or rows) of the textarea, we recommend using the maxHeight prop and setting the value to a lh unit.

tsx

<Textarea autoresize maxH="5lh" />

Use the autoresize prop to make the textarea autoresize vertically as you type.

Here's how to access the underlying element reference

tsx

const Demo = () => {
  const ref = useRef<HTMLTextAreaElement | null>(null)
  return <Textarea ref={ref} />
}