---
title: Textarea
description: "`Textarea` is a component used to obtain multi-line text input."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/textarea/textarea.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/textarea
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-textarea--basic
---

# Textarea

`Textarea` is a component used to obtain multi-line text input.

```tsx
<Textarea placeholder="Placeholder" />
```

## Usage

```tsx
import { Textarea } from "@yamada-ui/react"
```

```tsx
import { Textarea } from "@/components/ui"
```

```tsx
import { Textarea } from "@workspaces/ui"
```

```tsx
<Textarea />
```

### Change Variants

```tsx
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### Change Size

```tsx preview
<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size) => (
      <Textarea key={size} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Textarea
        key={colorScheme}
        colorScheme={colorScheme}
        placeholder={toTitleCase(colorScheme)}
      />
    )}
  </For>
</VStack>
```

### Disable

To disable the input, set `disabled` to `true`.

```tsx
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        disabled
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>
```

### Read-Only

To read-only, set `readOnly` to `true`.

```tsx
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        readOnly
      />
    )}
  </For>
</VStack>
```

### Invalid

To set invalid state, set `invalid` to `true`.

```tsx
<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant) => (
      <Textarea
        key={variant}
        variant={variant}
        placeholder={toTitleCase(variant)}
        invalid
      />
    )}
  </For>
</VStack>
```

### Change Border Color

To change the border color, set a color to `focusBorderColor` or `errorBorderColor`.

```tsx
<VStack>
  <Textarea focusBorderColor="green.500" placeholder="Custom border color" />
  <Textarea
    errorBorderColor="orange.500"
    invalid
    placeholder="Custom border color"
  />
</VStack>
```

### Customize Placeholder

To change the placeholder color, set `_placeholder` to the props.

```tsx
<Textarea
  placeholder="Custom placeholder"
  _placeholder={{ color: "green.500" }}
/>
```

### Change Resize Behavior

To change the resize behavior, set `resize` to one of `"block"`, `"horizontal"`, `"vertical"`, or `"none"`.

```tsx
<VStack>
  <For each={["block", "horizontal", "vertical", "none"]}>
    {(resize) => (
      <Textarea
        key={resize}
        placeholder={toTitleCase(resize)}
        resize={resize}
      />
    )}
  </For>
</VStack>
```

### Use Auto-resize

To enable auto-resizing, set `autosize` to `true`.

```tsx
<Textarea autosize placeholder="Autosize" />
```

### Control Resize

```tsx
const resizeRef = useRef<() => void>(null)
const onResize = () => {
  resizeRef.current?.()
}

return (
  <VStack>
    <Textarea placeholder="Use resize" resizeRef={resizeRef} />
    <Button alignSelf="flex-end" onClick={onResize}>
      Resize
    </Button>
  </VStack>
)
```

## Props

| Prop               | Default     | Type                                                                                                                                                                        | Description                                                 |
| ------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `as`               | -           | `As`                                                                                                                                                                        | The HTML element to render.                                 |
| `asChild`          | -           | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child.                  |
| `css`              | -           | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                                             |
| `colorScheme`      | -           | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                                 |
| `size`             | `"md"`      | `"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"`                                                                                                                             | The size of the component.                                  |
| `variant`          | `"outline"` | `"filled" \| "flushed" \| "outline" \| "plain"`                                                                                                                             | The variant of the component.                               |
| `autosize`         | -           | `boolean`                                                                                                                                                                   | If `true`, the Textarea height auto-adjusts to text height. |
| `errorBorderColor` | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is invalid.                 |
| `focusBorderColor` | -           | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The border color when the input is focused.                 |
| `invalid`          | `false`     | `boolean`                                                                                                                                                                   | If `true`, the field will be invalid.                       |
| `maxRows`          | `Infinity`  | `number`                                                                                                                                                                    | Autosize up to maxRows rows.                                |
| `minRows`          | `2`         | `number`                                                                                                                                                                    | Autosize up to minRows rows.                                |
| `resizeRef`        | -           | `ForwardedRef<() => void>`                                                                                                                                                  | Ref to a resize function.                                   |

## Accessibility

If you are not using `Field.Root`, set `aria-label` or `aria-labelledby` to `Textarea`.

```tsx
<Textarea aria-label="Comments" />
```

```tsx
<VStack gap="sm">
  <Text as="h3" id="label">
    Comments
  </Text>

  <Textarea aria-labelledby="label" />
</VStack>
```

### ARIA Roles and Attributes

| Element                | Roles and Attributes | Usage                                                                                                                                                            |
| ---------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `textarea.ui-textarea` | `aria-invalid`       | Sets to `"true"` if `invalid` is set.                                                                                                                            |
|                        | `aria-disabled`      | Sets to `"true"` if `disabled` is set.                                                                                                                           |
|                        | `aria-describedby`   | If `Textarea` is within a `Field.Root` and `Field.Root` has an `errorMessage`, `helperMessage`, or a `Field.ErrorMessage`, `Field.HelperMessage`, sets its `id`. |
|                        | `aria-readonly`      | Sets to `"true"` if `readOnly` is set.                                                                                                                           |
|                        | `aria-required`      | Sets to `"true"` if `required` is set.                                                                                                                           |

## Similar Components

- [Editable](https://yamada-ui.com/docs/components/editable.md): `Editable` is a component used to obtain inline editable text input.
- [Input](https://yamada-ui.com/docs/components/input.md): `Input` is a component used to obtain text input from the user.
- [NumberInput](https://yamada-ui.com/docs/components/number-input.md): `NumberInput` is a component used to obtain numeric input from the user.
- [PasswordInput](https://yamada-ui.com/docs/components/password-input.md): `PasswordInput` is a component that allows users to input passwords with a visibility toggle.
- [PinInput](https://yamada-ui.com/docs/components/pin-input.md): `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
- [FileInput](https://yamada-ui.com/docs/components/file-input.md): `FileInput` is a component used for users to select files.
- [Autocomplete](https://yamada-ui.com/docs/components/autocomplete.md): `Autocomplete` is a component used to display suggestions in response to user text input.
- [Checkbox](https://yamada-ui.com/docs/components/checkbox.md): `Checkbox` is a component used for allowing users to select multiple values from multiple options.

## Uses Components & Hooks

- [Input](https://yamada-ui.com/docs/components/input.md): `Input` is a component used to obtain text input from the user.
- [Field](https://yamada-ui.com/docs/components/field.md): `Field` is a component used to group form elements with label, helper message, error message, etc.