Textarea

The Textarea component allows you to easily create multi-line text inputs.

    Theme source

Import#

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

Usage#

<Textarea placeholder="Here is a sample placeholder" />

Controlled Textarea#

function Example() {
  let [value, setValue] = React.useState('')


  let handleInputChange = e => {
    let inputValue = e.target.value
    setValue(inputValue)
  }
  return (
    <>
      <Text mb="8px">Value: {value}</Text>
      <Textarea value={value} onChange={handleInputChange} placeholder="Here is a sample placeholder" size="sm" />
    </>
  )
}

Resize behavior#

You can add resize prop to change the Textarea resize behavior.

function ResizeExample() {
  const [resize, setResize] = React.useState('horizontal')


  return (
    <>
      <RadioGroup defaultValue={resize} onChange={setResize} mb={6}>
        <Stack direction="row" spacing={5}>
          <Radio value="horizontal">Horizontal</Radio>
          <Radio value="vertical">Vertical</Radio>
          <Radio value="none">None</Radio>
        </Stack>
      </RadioGroup>


      <Textarea placeholder="Here is a sample placeholder" size="sm" resize={resize} />
    </>
  )
}

Disabled Textarea#

<Textarea isDisabled placeholder="Here is a sample placeholder" />

Invalid Textarea#

<Textarea isInvalid placeholder="Here is a sample placeholder" />
Edit this page on GitHub