> ## 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 Input

> Documentation for the TextField input component, including property configuration such as placeholder hints and format validation. This is the most commonly used single-line text input in forms.

## When to Use

* Use this component for text-based information input scenarios.

## Component Example

## Component Properties

| Attribute           | Description                                                                                                                            | Type                                                                        | Default          |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------- |
| `addonAfter`        | Content appended after the input.                                                                                                      | `string`                                                                    | -                |
| `addonBefore`       | Content prepended before the input.                                                                                                    | `string`                                                                    | -                |
| `autoFocus`         | Whether to enable auto-focus.                                                                                                          | `boolean`                                                                   | `false`          |
| `autoHeight`        | Enables auto height for the multi-line input. Takes effect when **htmlType** is set to textarea.                                       | `boolean`                                                                   | `false`          |
| `behavior`          | Display state of the form component.                                                                                                   | [Behavior](/open/yida/components/interface#behavior)                        | `'NORMAL'`       |
| `hasClear`          | Whether to show the clear button.                                                                                                      | `boolean`                                                                   | `true`           |
| `hasLimitHint`      | Whether to show the character counter.                                                                                                 | `boolean`                                                                   | `false`          |
| `htmlType`          | Sets the input type. input: single-line text; textarea: multi-line text; password: password input.                                     | `'input' \| 'textarea' \| 'password'`                                       | `input`          |
| `label`             | Title of the form component.                                                                                                           | `string`                                                                    | -                |
| `labelAlign`        | Location of the form component title.                                                                                                  | `'left' \| 'top'`                                                           | `'top'`          |
| `labelColOffset`    | Sets the offset of the title. The value uses a grid system, where 1 represents 1/24.                                                   | `number`                                                                    | `0`              |
| `labelColSpan`      | Sets the width of the title. The value uses a grid system, where 1 represents 1/24.                                                    | `number`                                                                    | `4`              |
| `labelTextAlign`    | Title alignment of the form component.                                                                                                 | `'left' \| 'right'`                                                         | `'right'`        |
| `labelTipsIcon`     | Entry icon for the form component title tip. Takes effect when labelTipsTypes is set to **text** or **render**.                        | `string`                                                                    | -                |
| `labelTipsRender`   | Custom render method for the form component title tip. Takes effect when labelTipsTypes is set to **render**.                          | `(props: IComponentProps) => ReactNode`                                     | -                |
| `labelTipsText`     | Tip text for the form component title. Takes effect when labelTipsTypes is set to **text**.                                            | `string`                                                                    | -                |
| `labelTipsTypes`    | Tip type for the form component title.                                                                                                 | [LabelTipsTypes](/open/yida/components/interface#labeltipstypes)            | `'none'`         |
| `maxLength`         | Sets the maximum character count.                                                                                                      | `number`                                                                    | `200`            |
| `onChange`          | Event triggered when the input value changes.                                                                                          | `({ value: string }) => void`                                               | -                |
| `onPressEnter`      | Event triggered when the Enter key is pressed in the input.                                                                            | `() => void`                                                                | -                |
| `onScanCodeError`   | Event triggered when input scanning fails.                                                                                             | `(errorMsg: string) => void`                                                | -                |
| `onScanCodeSuccess` | Event triggered when input scanning succeeds.                                                                                          | `(text: string) => void`                                                    | -                |
| `placeholder`       | Placeholder text.                                                                                                                      | `string`                                                                    | `'Please enter'` |
| `rows`              | Height of the multi-line input. Takes effect when **htmlType** is set to textarea.                                                     | `number`                                                                    | `4`              |
| `scanCode`          | Whether to enable scan mode (supported only in the DingTalk mobile app).                                                               | [ScanCodeConfig](/open/yida/components/interface#scancodeconfig) \| boolean | `false`          |
| `size`              | Size of the form component.                                                                                                            | [Size](/open/yida/components/interface#size)                                | `'medium'`       |
| `state`             | Sets the state of the input.                                                                                                           | `'error' \| 'loading' \| 'success' \| ''`                                   | `''`             |
| `tips`              | Description of the form component, displayed below the control.                                                                        | `string`                                                                    | -                |
| `trim`              | Whether to automatically trim leading and trailing whitespace.                                                                         | `boolean`                                                                   | `false`          |
| `validation`        | Validation settings for the form component. For details, see the [form validation documentation](/open/yida/guide/concept/validation). | [Validation\[\]](/open/yida/components/interface#validation)                | `[]`             |
| `validationType`    | Validation format for the input value.                                                                                                 | `'text' \| 'mobile' \| 'email' \| 'url' \| 'chineseID' \| 'password'`       | `'text'`         |
| `value`             | Sets the default value of the input.                                                                                                   | `string`                                                                    | -                |
| `wrapperColOffset`  | Sets the offset of the form component. The value uses a grid system, where 1 represents 1/24.                                          | `number`                                                                    | `0`              |
| `wrapperColSpan`    | Sets the width of the form component. The value uses a grid system, where 1 represents 1/24.                                           | `number`                                                                    | `0`              |