---
title: TextArea 文本框
group:
  title: 输入
  path: /TextArea
  order: 1
---

# TextArea 多行输入框

通用多行输入组件，支持附件上传边框，语音输入，边框能力


## 示例
<code src="../../examples/TextArea"></code>

## Props
| 属性           | 类型                             | 默认值      | 说明                                                      |
| -------------- | -------------------------------- | ----------- | --------------------------------------------------------- |
| allowFunction | `false \| FunctionProps`         | `true`      | 功能列表（联网搜索、深度思考等）                          |
| allowAudio     | `boolean \| AudioInputBaseProps` | `false`     | 是否允许音频输入，可以为布尔值或 AudioInputBaseProps 对象 |
| allowAffix     | `false \| AffixProps`            | `false`     | 是否允许附件上传                                          |
| loading        | `boolean`                        | `false`     | 加载状态（搜索模式下有效）                                |
| bordered       | `boolean`                        | `false`     | 是否带边框                                                |
| suffix         | `React.ReactNode`                | `undefined` | 额外自定义后置元素                                        |
| search         | `boolean`                        | `false`     | 搜索模式                                                  |
| onSearch       | `(value: string) => void`        | `-`         | 搜索回调，返回文本内容                                    |
| onPauseLoading | `() => void`                     | `-`         | 暂停加载回调，用于在搜索模式下暂停加载状态                |


**更多属性参考 Ant Design Mobile TextArea 组件**

### FunctionProps
```ts
type FunctionConfig = {
  /**
   * 功能名称
   */
  name: string;
  /**
   * 是否禁用
   */
  disabled?: boolean;
  /**
   * 功能文本
   */
  text: string;
  /**
   * 功能图标
   */
  icon?: keyof typeof Icons | React.ReactElement;
};

interface FunctionProps {
  /**
   * 功能列表
   * @type { boolean | FunctionConfig[] }
   * @default true
   */
  functions?: boolean | FunctionConfig[];
  /**
   * 功能变化回调
   * @param { Partial<Record<string, boolean>> } value 功能值
   */
  onChange?: (value: Partial<Record<string, boolean>>) => void;
}
```
**默认功能项是`联网搜索`和`深度思考`**

### AffixProps
```ts
type AffixType = 'camera' | 'gallery' | 'file';

interface AffixProps {
  /**
   * 附件列表
   * @type { File[] }
   * @default undefined
   * @description 附件列表，包含附件、音频等，可根据file.type区分
   */
  value?: File[];
  /**
   * 附件类型
   * @type { AffixType[] | boolean }
   * @default true
   */
  affix?: AffixType[] | boolean;
  /**
   * 附件容器
   * @type { HTMLElement | string }
   * @default undefined
   * @description 附件容器，用于指定附件列表的渲染位置。可以是 DOM 元素、CSS 选择器字符串，或为空时渲染在父元素中
   */
  affixContainer?: HTMLElement | string;
  /**
   * 文件预览容器
   * @type { HTMLElement | string }
   * @default undefined
   * @description 文件预览容器，用于指定文件预览列表的渲染位置。可以是 DOM 元素、CSS 选择器字符串，或为空时渲染在父元素中
   */
  previewContainer?: HTMLElement | string;
  /**
   * 文件变化回调
   * @description 文件变化回调，返回附件列表
   * @param { File[] } files 附件列表
   * @returns { void }
   */
  onChange?: (files: File[]) => void;
  /**
   * 文件预览回调
   * @description 点击非图片文件时触发，可用于调起系统查看文件页面
   * @param { File } file 文件对象
   * @returns { void }
   */
  onFilePreview?: (file: File) => void;
}

```

## 语音输入配置 AudioInputBaseProps,同Input