> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# TextField 输入框

> TextField 输入框组件文档，介绍占位提示、格式校验等属性配置，是表单中最常用的单行文字录入组件。

## 何时使用

* 用于文字类信息输入场景；

## 组件示例

<iframe src="https://www.aliwork.com/developer/text-field-v2?isRenderNav=false" width="100%" height="480" frameBorder="0" />

## 组件属性

| 属性                  | 说明                                                              | 类型                                                                             | 默认值        |
| ------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------- |
| `addonAfter`        | 输入框后附加内容                                                        | `string`                                                                       | -          |
| `addonBefore`       | 输入框前附加内容                                                        | `string`                                                                       | -          |
| `autoFocus`         | 是否开启自动聚焦                                                        | `boolean`                                                                      | `false`    |
| `autoHeight`        | 多行输入框自动高度，当 **htmlType** 属性为 textarea 时生效                       | `boolean`                                                                      | `false`    |
| `behavior`          | 表单组件显示状态                                                        | [Behavior](/zh/open/yida/components/interface#behavior)                        | `'NORMAL'` |
| `hasClear`          | 是否显示清除按钮                                                        | `boolean`                                                                      | `true`     |
| `hasLimitHint`      | 是否显示计数器                                                         | `boolean`                                                                      | `false`    |
| `htmlType`          | 设置输入框的类型，input：单行文案、 textarea：多行文案、 password：密码                 | `'input' \| 'textarea' \| 'password'`                                          | `input`    |
| `label`             | 表单组件标题                                                          | `string`                                                                       | -          |
| `labelAlign`        | 表单组件标题的位置                                                       | `'left' \| 'top'`                                                              | `'top'`    |
| `labelColOffset`    | 设置标题的偏移位置，配置值为栅格值，1代表1/24                                       | `number`                                                                       | `0`        |
| `labelColSpan`      | 设置标题的占位宽度，配置值为栅格值，1代表1/24                                       | `number`                                                                       | `4`        |
| `labelTextAlign`    | 表单组件的标题对齐方式                                                     | `'left' \| 'right'`                                                            | `'right'`  |
| `labelTipsIcon`     | 表单组件标题提示信息入口图标，当labelTipsTypes取值为 **text** 或 **render** 时生效     | `string`                                                                       | -          |
| `labelTipsRender`   | 表单组件标题提示信息自定义渲染方法，当labelTipsTypes取值为 **render** 时生效             | `(props: IComponentProps) => ReactNode`                                        | -          |
| `labelTipsText`     | 表单组件标题提示文本信息，当labelTipsTypes取值为 **text** 时生效                    | `string`                                                                       | -          |
| `labelTipsTypes`    | 表单组件标题提示信息类型设置                                                  | [LabelTipsTypes](/zh/open/yida/components/interface#labelTipsTypes)            | `'none'`   |
| `maxLength`         | 设置字数上限                                                          | `number`                                                                       | `200`      |
| `onChange`          | 输入框组件值发生改变时触发的事件                                                | `({ value: string }) => void`                                                  | -          |
| `onPressEnter`      | 输入框按下回车键时触发的事件                                                  | `() => void`                                                                   | -          |
| `onScanCodeError`   | 输入框扫码失败后触发的事件                                                   | `(errorMsg: string) => void`                                                   | -          |
| `onScanCodeSuccess` | 输入框扫码成功后触发的事件                                                   | `(text: string) => void`                                                       | -          |
| `placeholder`       | 占位提示                                                            | `string`                                                                       | `'请输入'`    |
| `rows`              | 多行输入框高度，当 **htmlType** 属性为 textarea 时生效                         | `number`                                                                       | `4`        |
| `scanCode`          | 是否启用扫码模式（仅钉钉手机端内支持）                                             | [ScanCodeConfig](/zh/open/yida/components/interface#scancodeconfig) \| boolean | `false`    |
| `size`              | 表单组件尺寸                                                          | [Size](/zh/open/yida/components/interface#size)                                | `'medium'` |
| `state`             | 设置输入框state状态                                                    | `'error' \| 'loading' \| 'success' \| ''`                                      | `''`       |
| `tips`              | 表单组件描述信息，展示在控件下方                                                | `string`                                                                       | -          |
| `trim`              | 是否自动去除头尾空字符                                                     | `boolean`                                                                      | `false`    |
| `validation`        | 表单组件校验设置，具体使用详见[表单校验文档](/zh/open/yida/guide/concept/validation) | [Validation\[\]](/zh/open/yida/components/interface#validation)                | `[]`       |
| `validationType`    | 输入框的格式                                                          | `'text' \| 'mobile' \| 'email' \| 'url' \| 'chineseID' \| 'password'`          | `'text'`   |
| `value`             | 设置输入框默认值                                                        | `string`                                                                       | -          |
| `wrapperColOffset`  | 设置表单组件的偏移位置，设置值为栅格值，1代表1/24                                     | `number`                                                                       | `0`        |
| `wrapperColSpan`    | 设置表单组件的占位宽度，设置值为栅格值，1代表1/24                                     | `number`                                                                       | `0`        |