Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Textarea

Used to enter multiple lines of text.

SourceStorybookRecipe

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.

Max 500 characters.
Max 500 characters.

Error Text

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

Field is required
Field is required

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.

A short description of yourself

Resize

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

Autoresize

Here's an example of how to integrate the react-textarea-autosize package to make the textarea autoresize.

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'md'
'lg' | 'md' | 'sm' | 'xs'

The size of the component

variant 'outline'
'outline' | 'filled' | 'flushed'

The variant of the component

Previous

Tag

Next

Timeline