Text Input

Text Input merupakan area bagi pengguna untuk memasukkan teks, seperti nama lengkap, nomor telepon, dan alamat.

Penggunaan

Gunakan Text Input sebagai area bagi pengguna untuk memasukkan informasi berbentuk teks, seperti nama lengkap, nomor telepon, atau alamat.

Komponen ini tersedia dalam dua varian: Text Field untuk input teks pendek dan Text Area untuk input teks panjang seperti alamat atau deskripsi.

Pastikan penggunaan Text Input sesuai dengan kebutuhan data yang memerlukan pengetikan manual dari pengguna.

Text Field & Text Area

Text Field untuk input teks pendek seperti nama, email, atau nomor identitas. Komponen ini cocok digunakan pada form pendaftaran, login, atau pengaturan profil.

Text Area untuk input teks panjang seperti alamat atau deskripsi.

Anatomi

Kategori

Text Field

Gunakan Text Field untuk menampung input teks pendek.

Komponen ini memiliki tujuh kondisi tampilan, yaitu Default, Hover, Focus, Warning, Error, Success, dan Disabled.

Text Area

Gunakan Text Area untuk menampung input teks panjang, seperti alamat, deskripsi, atau catatan tambahan. Komponen ini memiliki tujuh kondisi tampilan, yaitu Default, Hover, Focus, Warning, Error, Success, dan Disabled.

Ukuran

Text Field

Text field memiliki beberapa ukuran untuk memfasilitasi berbagai kebutuhan. Terdapat empat ukuran text field, yaitu Extra Large (56px), Large (48px), Medium (44px), dan Small (40px).

Text Area

Text area memiliki berbagai ukuran untuk memfasilitas berbagai kebutuhan. Terdapat empat ukuran text area, yaitu Extra Large (180px), Large (164px), Medium (148px), dan Small (132px).

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan text area ketika pengguna perlu menulis kalimat panjang, paragraf, atau deskripsi yang memerlukan konteks lebih luas.

❌ Dihindari

Jangan gunakan text area untuk input pendek seperti alamat email, nomor telepon, atau satu kata. Untuk data singkat, gunakan text field agar tampilan lebih ringkas dan efisien.

Spesifikasi