Textarea

Usage

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

<Textarea placeholder="..." />

Examples

Variants

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

Sizes

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

Helper Text

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

Error Text

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

Field

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

Hook Form

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

Resize

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.

<Textarea autoresize maxH="5lh" />

Autoresize

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

Ref

Here's how to access the underlying element reference

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

Props