---
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
---
```tsx
```
## Usage
```tsx
import { Textarea } from "@yamada-ui/react"
```
```tsx
import { Textarea } from "@/components/ui"
```
```tsx
import { Textarea } from "@workspaces/ui"
```
```tsx
```
### Change Variants
```tsx
{(variant) => (
)}
```
### Change Size
```tsx preview
{(size) => (
)}
```
### Change Color Scheme
```tsx
{(colorScheme) => (
)}
```
### Disable
To disable the input, set `disabled` to `true`.
```tsx
{(variant) => (
)}
```
### Read-Only
To read-only, set `readOnly` to `true`.
```tsx
{(variant) => (
)}
```
### Invalid
To set invalid state, set `invalid` to `true`.
```tsx
{(variant) => (
)}
```
### Change Border Color
To change the border color, set a color to `focusBorderColor` or `errorBorderColor`.
```tsx
```
### Customize Placeholder
To change the placeholder color, set `_placeholder` to the props.
```tsx
```
### Change Resize Behavior
To change the resize behavior, set `resize` to one of `"block"`, `"horizontal"`, `"vertical"`, or `"none"`.
```tsx
{(resize) => (
)}
```
### Use Auto-resize
To enable auto-resizing, set `autosize` to `true`.
```tsx
```
### Control Resize
```tsx
const resizeRef = useRef<() => void>(null)
const onResize = () => {
resizeRef.current?.()
}
return (
)
```
## 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | The border color when the input is invalid. |
| `focusBorderColor` | - | `"-moz-initial" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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
Currently, this section is being updated due to the migration of v2.