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.

HorizontalVerticalNone

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.

`colorScheme`

Description

Color Schemes for Textarea are not implemented in the default theme. You can extend the theme to implement them.

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`errorBorderColor`

Description

The border color when the textarea is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type

string

`focusBorderColor`

Description

The border color when the textarea is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type

string

`isDisabled`

Description

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

Type

boolean

`isFullWidth`

Description

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

Type

boolean

`isInvalid`

Description

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

Type

boolean

`isReadOnly`

Description

If true, the form control will be readonly

Type

boolean

`isRequired`

Description

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

Type

boolean

`size`

Type

"sm" | "md" | "lg" | "xs"

Default

"md"

`variant`

Type

"outline" | "unstyled" | "filled" | "flushed"

Default

"outline"

Edit this page