Textarea

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

View sourceView theme source@chakra-ui/textarea

Import

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

Usage

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

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

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

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

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

Invalid Textarea

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

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

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

string

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

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

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

Default

"md"

variant

Type

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

Default

"outline"