Text Field

Anatomi

Jenis dan variasi

Text field

Input sederhana yang digunakan untuk memasukkan teks singkat, seperti nama, email, atau kata sandi.

Text field with label

Input sederhana yang digunakan untuk memasukkan teks singkat, seperti nama, email, atau kata sandi dengan judul di bagian atasnya.

Text area

Input yang dirancang untuk memasukkan teks panjang, seperti komentar, deskripsi, atau pesan.

Text area with label

Input yang dirancang untuk memasukkan teks panjang, seperti komentar, deskripsi, atau pesan dengan judul di bagian atasnya.

States

Terdapat 4 states untuk Text field, yaitu Default, Focused, Disabled, dan Error. Berikut contoh gambar dan penjelasannya:

Default

Tampilan awal Text Field saat belum ada interaksi. Memiliki label atau placeholder, dengan border warna abu-abu.

Focused

Tampilan saat pengguna sedang mengetik atau berinteraksi dengan Text Field. Border berwarna biru, dan fokus kursor terlihat di dalam Text Field.

Disabled

Text Field dinonaktifkan dan tidak bisa diisi oleh pengguna. Tampilan lebih redup (warna abu-abu) dan tidak interaktif.

Error

Menunjukkan ada kesalahan dalam input pengguna. Border atau pesan kesalahan berwarna merah, sering disertai teks bantuan untuk memperbaiki kesalahan.

Behaviors

Penggunaan Text Field dan Text Area

Gunakan Text Field jika data yang dimasukkan singkat dan spesifik seperti nama depan, alamat email, atau kata sandi. Gunakan Text Area jika data lebih panjang atau memungkinkan pengguna untuk menulis secara detail seperti umpan balik pengguna, deskripsi tugas atau proyek, atau catatan tambahan.

Warna teks pada Text Field

Text Field yang sudah diisi akan berwarna hitam.

Responsif

Desktop

• Tinggi text field sekitar 44-48px
• Jarak baris antar field sebesar min. 24px
• Jarak antar kolom field sekitar 24-32px

Ukuran Input

• Input Pendek (Short Input)80px - 140px.
• Input Sedang (Medium Input) 280px - 400px.
• Input Panjang (Long Input)450px - 600px atau lebar penuh sesuai container.

Ukurant text field menyesuaikan dengan kebutuhan, jika membuat text field dengan 2 kolom pastikan jarak antar kolom adalah 24-32px, lebar text field di keduanya dapat menyesuaikan

Mobile

Lebar penuh (full width)

• Text field biasanya menggunakan 100% lebar layar untuk meminimalisir kesalahan input.
• Margin layar cukup (16–24px).

Penempatan vertikal

• Ditumpuk ke bawah (stacked) dengan jarak antar field ±8–16px.

Ukuran touch target Tinggi minimal 44px (Apple) / 48dp (Material Design) agar mudah disentuh.

Text Area

Desktop

Lebar (width)

• Biasanya mengikuti lebar form atau container.
• Direkomendasikan 40–80 karakter (atau setara dengan 300–600px) agar teks mudah dibaca tanpa terlalu melebar.
• Jangan terlalu sempit karena membuat teks terpotong, dan jangan terlalu lebar karena membuat mata sulit mengikuti baris.

Tinggi (height)

• Default umumnya sekitar 100-150px.
• Untuk kolom panjang (misalnya komentar atau deskripsi), bisa mulai dari 4–6 baris.
• Text area resizable (supaya user bisa memperbesar sesuai kebutuhan).

Mobile

• Pada layar kecil (mobile), text area biasanya 100% width dari kontainer.
• Tinggi default umumnya sekitar 100-150px.
• Tinggi text area Tinggi bisa otomatis menyesuaikan (auto-grow) saat user mengetik lebih banyak baris.

Panduan penulisan

Mempertimbangkan area Text Field yang kecil, maka pastikan untuk:

Menulis dengan ringkas dan jelas

Baik untuk label, Text Field, maupun Text Area, pastikan untuk menulis dengan lugas.

Menggunakan call to action atau kalimat tanya

Jika perlu memberikan petunjuk pengisian Text Field, pertimbangkan gunakan kata kerja/call to action atau pertanyaan sehingga pengguna tahu apa yang harus diisi.

Menggunakan peringatan

Jika informasi yang perlu diisi bersifat sensitif, Text Field dapat menampilkan peringatan sehingga pengguna lebih berhati-hati dalam mengisi.

Menggunakan Tooltip

Jika area Text Field sangat terbatas dan tidak memungkinkan menggunakan Text Area, maka gunakan Tooltip sebagai ekstensi area informasi.

Jika pengisian pada Text Field salah, maka help text akan memunculkan error message agar pengguna memperbaiki informasi. Secara umum, ada beberapa cara untuk menulis error message pada help text:

Menampilkan informasi yang tidak diperbolehkan untuk diisi

Pengguna dapat terhindar dari kesalahan yang lain jika mencoba mengisi kembali.

Menampilkan kesalahan yang telah dilakukan/diisi oleh pengguna

Pengguna dapat mengidentifikasi kesalahan sehingga tidak mengisi informasi yang salah untuk kedua kali.

Menampilkan peringatan/petunjuk teknis pengisian informasi

Pengguna dapat lebih berhati-hati dalam mengisi informasi.