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

# テキスト入力フィールド

> YiDA の TextField 入力コンポーネントの詳細ガイド。プレースホルダー、フォーマットバリデーション、スキャン入力などの属性設定方法を解説し、フォームで最も頻繁に利用される一行テキスト入力の実装を支援します。

## 利用シーン

* テキスト情報の入力シーンで使用します。

## コンポーネント例

## コンポーネント属性

| 属性                  | 説明                                                                                               | タイプ                                                                            | デフォルト        |
| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------ |
| `addonAfter`        | 入力欄の後ろに追加するコンテンツ。                                                                                | `string`                                                                       | -            |
| `addonBefore`       | 入力欄の前に追加するコンテンツ。                                                                                 | `string`                                                                       | -            |
| `autoFocus`         | オートフォーカスを有効にするかどうか。                                                                              | `boolean`                                                                      | `false`      |
| `autoHeight`        | 複数行入力の高さを自動調整します。**htmlType** 属性が textarea の場合に有効です。                                             | `boolean`                                                                      | `false`      |
| `behavior`          | フォームコンポーネントの表示状態。                                                                                | [Behavior](/ja/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](/ja/open/yida/components/interface#labeltipstypes)            | `'none'`     |
| `maxLength`         | 最大文字数を設定します。                                                                                     | `number`                                                                       | `200`        |
| `onChange`          | 入力値が変更されたときに発火するイベント。                                                                            | `({ value: string }) => void`                                                  | -            |
| `onPressEnter`      | 入力欄で Enter キーが押されたときに発火するイベント。                                                                   | `() => void`                                                                   | -            |
| `onScanCodeError`   | 入力スキャンが失敗したときに発火するイベント。                                                                          | `(errorMsg: string) => void`                                                   | -            |
| `onScanCodeSuccess` | 入力スキャンが成功したときに発火するイベント。                                                                          | `(text: string) => void`                                                       | -            |
| `placeholder`       | プレースホルダーテキスト。                                                                                    | `string`                                                                       | `'入力してください'` |
| `rows`              | 複数行入力の高さ。**htmlType** 属性が textarea の場合に有効です。                                                     | `number`                                                                       | `4`          |
| `scanCode`          | スキャンモードを有効にするかどうか（DingTalk モバイルアプリのみ対応）。                                                         | [ScanCodeConfig](/ja/open/yida/components/interface#scancodeconfig) \| boolean | `false`      |
| `size`              | フォームコンポーネントのサイズ。                                                                                 | [Size](/ja/open/yida/components/interface#size)                                | `'medium'`   |
| `state`             | 入力欄の状態を設定します。                                                                                    | `'error' \| 'loading' \| 'success' \| ''`                                      | `''`         |
| `tips`              | フォームコンポーネントの説明。コントロールの下に表示されます。                                                                  | `string`                                                                       | -            |
| `trim`              | 前後の空白を自動的に削除するかどうか。                                                                              | `boolean`                                                                      | `false`      |
| `validation`        | フォームコンポーネントのバリデーション設定。詳細は [フォームバリデーションドキュメント](/ja/open/yida/guide/concept/validation) を参照してください。 | [Validation\[\]](/ja/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`          |