# 文本区域

捕获多行用户输入。

```jsx
<TextArea placeholder="回复评论…" />
```

## [API 参考](#api-参考)

该组件基于 `textarea` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop      | Type                                                         | Default          |
| --------- | ------------------------------------------------------------ | ---------------- |
| `size`    | `Responsive<"1" \| "2" \| "3">`                              | `"2"`            |
| `variant` | `"classic" \| "surface" \| "soft"`                           | `"surface"`      |
| `resize`  | `Responsive<"none" \| "vertical" \| "horizontal" \| "both">` | No default value |
| `color`   | `enum`                                                       | No default value |
| `radius`  | `"none" \| "small" \| "medium" \| "large" \| "full"`         | No default value |

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制大小。

```jsx
<Flex direction="column" gap="3">
  <Box maxWidth="200px">
    <TextArea size="1" placeholder="回复评论…" />
  </Box>

  <Box maxWidth="250px">
    <TextArea size="2" placeholder="回复评论…" />
  </Box>

  <Box maxWidth="300px">
    <TextArea size="3" placeholder="回复评论…" />
  </Box>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制视觉风格。

```jsx
<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea variant="surface" placeholder="回复评论…" />

  <TextArea variant="classic" placeholder="回复评论…" />

  <TextArea variant="soft" placeholder="回复评论…" />
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea color="blue" variant="soft" placeholder="回复评论…" />

  <TextArea color="green" variant="soft" placeholder="回复评论…" />

  <TextArea color="red" variant="soft" placeholder="回复评论…" />
</Flex>
```

### [半径](#半径)

使用 `radius` 属性分配特定的半径值。

```jsx
<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea radius="none" placeholder="搜索文档…" />

  <TextArea radius="large" placeholder="搜索文档…" />

  <TextArea radius="full" placeholder="搜索文档…" />
</Flex>
```

### [大小调整](#大小调整)

使用 `resize` 属性启用一个或两个轴上的大小调整。

```jsx
<Flex direction="column" gap="3" maxWidth="250px">
  <TextArea resize="none" placeholder="搜索文档…" />

  <TextArea resize="vertical" placeholder="搜索文档…" />

  <TextArea resize="horizontal" placeholder="搜索文档…" />

  <TextArea resize="both" placeholder="搜索文档…" />
</Flex>
```

<!--$-->

<!--/$-->