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

# Input TextField

> Pelajari cara mengonfigurasi komponen input TextField di YiDA — mulai dari placeholder, validasi format, hingga pemindaian kode. Panduan lengkap untuk komponen input teks satu baris yang paling umum digunakan dalam formulir.

## Kapan digunakan

* Gunakan untuk skenario input informasi berbasis teks.

## Contoh komponen

## Properti komponen

| Atribut             | Deskripsi                                                                                                                                 | Tipe                                                                           | Default              |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------------------- |
| `addonAfter`        | Konten yang ditambahkan setelah input.                                                                                                    | `string`                                                                       | -                    |
| `addonBefore`       | Konten yang ditambahkan sebelum input.                                                                                                    | `string`                                                                       | -                    |
| `autoFocus`         | Apakah fokus otomatis diaktifkan.                                                                                                         | `boolean`                                                                      | `false`              |
| `autoHeight`        | Tinggi otomatis untuk input multi-baris. Berlaku saat properti **htmlType** bernilai textarea.                                            | `boolean`                                                                      | `false`              |
| `behavior`          | Status tampilan komponen formulir.                                                                                                        | [Behavior](/id/open/yida/components/interface#behavior)                        | `'NORMAL'`           |
| `hasClear`          | Apakah tombol hapus ditampilkan.                                                                                                          | `boolean`                                                                      | `true`               |
| `hasLimitHint`      | Apakah penghitung karakter ditampilkan.                                                                                                   | `boolean`                                                                      | `false`              |
| `htmlType`          | Menentukan tipe input. input: teks satu baris; textarea: teks multi-baris; password: kata sandi.                                          | `'input' \| 'textarea' \| 'password'`                                          | `input`              |
| `label`             | Judul komponen formulir.                                                                                                                  | `string`                                                                       | -                    |
| `labelAlign`        | Lokasi judul komponen formulir.                                                                                                           | `'left' \| 'top'`                                                              | `'top'`              |
| `labelColOffset`    | Mengatur offset judul. Nilainya berupa nilai kisi, di mana 1 mewakili 1/24.                                                               | `number`                                                                       | `0`                  |
| `labelColSpan`      | Mengatur lebar judul. Nilainya berupa nilai kisi, di mana 1 mewakili 1/24.                                                                | `number`                                                                       | `4`                  |
| `labelTextAlign`    | Perataan judul komponen formulir.                                                                                                         | `'left' \| 'right'`                                                            | `'right'`            |
| `labelTipsIcon`     | Ikon entri untuk tips judul komponen formulir. Berlaku saat labelTipsTypes diatur ke **text** atau **render**.                            | `string`                                                                       | -                    |
| `labelTipsRender`   | Metode render kustom untuk tips judul komponen formulir. Berlaku saat labelTipsTypes diatur ke **render**.                                | `(props: IComponentProps) => ReactNode`                                        | -                    |
| `labelTipsText`     | Teks tips untuk judul komponen formulir. Berlaku saat labelTipsTypes diatur ke **text**.                                                  | `string`                                                                       | -                    |
| `labelTipsTypes`    | Pengaturan tipe tips untuk judul komponen formulir.                                                                                       | [LabelTipsTypes](/id/open/yida/components/interface#labeltipstypes)            | `'none'`             |
| `maxLength`         | Mengatur jumlah karakter maksimum.                                                                                                        | `number`                                                                       | `200`                |
| `onChange`          | Peristiwa yang dipicu saat nilai input berubah.                                                                                           | `({ value: string }) => void`                                                  | -                    |
| `onPressEnter`      | Peristiwa yang dipicu saat tombol Enter ditekan pada input.                                                                               | `() => void`                                                                   | -                    |
| `onScanCodeError`   | Peristiwa yang dipicu saat pemindaian input gagal.                                                                                        | `(errorMsg: string) => void`                                                   | -                    |
| `onScanCodeSuccess` | Peristiwa yang dipicu saat pemindaian input berhasil.                                                                                     | `(text: string) => void`                                                       | -                    |
| `placeholder`       | Teks placeholder.                                                                                                                         | `string`                                                                       | `'Silakan masukkan'` |
| `rows`              | Tinggi input multi-baris. Berlaku saat properti **htmlType** bernilai textarea.                                                           | `number`                                                                       | `4`                  |
| `scanCode`          | Apakah mode pemindaian diaktifkan (hanya didukung di aplikasi mobile DingTalk).                                                           | [ScanCodeConfig](/id/open/yida/components/interface#scancodeconfig) \| boolean | `false`              |
| `size`              | Ukuran komponen formulir.                                                                                                                 | [Size](/id/open/yida/components/interface#size)                                | `'medium'`           |
| `state`             | Mengatur status input.                                                                                                                    | `'error' \| 'loading' \| 'success' \| ''`                                      | `''`                 |
| `tips`              | Deskripsi komponen formulir, ditampilkan di bawah kontrol.                                                                                | `string`                                                                       | -                    |
| `trim`              | Apakah spasi di awal dan akhir dipangkas secara otomatis.                                                                                 | `boolean`                                                                      | `false`              |
| `validation`        | Pengaturan validasi formulir untuk komponen. Untuk detail, lihat [dokumentasi validasi formulir](/id/open/yida/guide/concept/validation). | [Validation\[\]](/id/open/yida/components/interface#validation)                | `[]`                 |
| `validationType`    | Format input.                                                                                                                             | `'text' \| 'mobile' \| 'email' \| 'url' \| 'chineseID' \| 'password'`          | `'text'`             |
| `value`             | Mengatur nilai default input.                                                                                                             | `string`                                                                       | -                    |
| `wrapperColOffset`  | Mengatur offset komponen formulir. Nilainya berupa nilai kisi, di mana 1 mewakili 1/24.                                                   | `number`                                                                       | `0`                  |
| `wrapperColSpan`    | Mengatur lebar komponen formulir. Nilainya berupa nilai kisi, di mana 1 mewakili 1/24.                                                    | `number`                                                                       | `0`                  |