Textarea

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

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

Usage#

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

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

Editable Example

Controlled Textarea#

Value:

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"
      />
    </>
  )
}

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"
      />
    </>
  )
}

Editable Example

Resize behavior#

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

Horizontal

Vertical

None

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}
      />
    </>
  )
}

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}
      />
    </>
  )
}

Editable Example

Disabled Textarea#

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

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

Editable Example

Invalid Textarea#

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

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

Editable Example

Props#

The Textarea composes the Input component.

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`	Color Schemes for `Textarea` are not implemented in the default theme. You can extend the theme to implement them.	-
errorBorderColor	`string`	The border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"	-
focusBorderColor	`string`	The border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"	-
isDisabled	`boolean`	If `true`, the form control will be disabled. This has 2 side effects: - The `FormLabel` will have `data-disabled` attribute - The form element (e.g, Input) will be disabled	-
isFullWidth	`boolean`	If `true`, the textarea element will span the full width of its parent @deprecated This component defaults to 100% width, please use the props `maxWidth` or `width` to configure	-
isInvalid	`boolean`	If `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`	-
isReadOnly	`boolean`	If `true`, the form control will be readonly	-
isRequired	`boolean`	If `true`, the form control will be required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-required` set to `true`	-
size	`"sm" \| "md" \| "lg" \| "xs"`		`"md"`
variant	`"outline" \| "unstyled" \| "filled" \| "flushed"`		`"outline"`

Edit this page