TextInput

Ne zaman kullanılır

TextInput, kısa ve serbest bir değer için kullanılır: ad, e-posta, posta kodu, arama metni.

Ne zaman kullanılmaz

• Çok satırlı metin için: Açıklama ve not alanlarında Textarea kullanın.
• Sınırlı seçenekler için: Değer birkaç seçenekten biriyse Select ya da RadioGroup kullanın.
• Tarih için: DatePicker kullanın.

Anatomi

Alan etiketi

Yardım veya açıklama metni burada yer alır

123

1. Etiketalanın ne istediğini söyler; girdiye bağlıdır ve her zaman görünür.
2. Girdikenarlık, arka plan ve köşe yarıçapı; yüksekliği seçilen boyuttan gelir.
3. Yardım ya da hata metnibiçimi veya hatayı anlatır; hata olduğunda yardım metninin altına eklenir.

Davranış

• Etikete tıklamak girdiye odaklanır.
• Klavyeyle odaklanınca kenarlık odak rengine geçer ve 2 px odak halkası çizilir; geçiş 110 ms sürer.
• error verildiğinde kenarlık tehlike rengine geçer ve hata metni görünür. Hata metni, error kaldırılana kadar görünür.
• Devre dışı alan odak almaz; imleç düzenlenemeyeceğini gösterir.

Klavye, odak, kontrast ve ekran okuyucu ayrıntıları için Erişilebilirlik sekmesine bakın.

Yönergeler

Etiket her zaman görünür olsun

Yer tutucu metin, kullanıcı yazmaya başlayınca kaybolur; ne girdiğini kontrol ederken etikete bakamaz. Yer tutucuyu etiketin yerine kullanmayın.

E-posta

YapınEtiket alanın üstünde, yazarken de görünüyor.

YapmayınEtiket olarak yer tutucu: yazmaya başlayınca ne istendiği kayboluyor.

Hata metni nasıl düzeltileceğini söylesin

“Geçersiz değer” kullanıcıya ne yapacağını söylemez. Beklenen biçimi ya da eksik olanı yazın.

Posta kodu

Posta kodu 5 haneli olmalı.

YapınNe eksik ve nasıl düzeltileceği belli.

Posta kodu

Geçersiz değer.

YapmayınGenel hata kullanıcıyı tahmine zorluyor.

Biçimi önceden söyleyin

Kullanıcı hatayı göndermeden önce önlemeli. Belirli bir biçim bekleniyorsa yardım metninde yazın.

Posta kodu

5 haneli posta kodu.

YapınBeklenen uzunluk yardım metninde.

Posta kodu

YapmayınBiçim yalnızca hata çıkınca öğreniliyor.

Alan genişliği beklenen değere uysun

Genişlik, kullanıcıya ne kadar uzun bir değer beklendiğini anlatır. Posta kodu için tam genişlikte bir alan yanlış ipucu verir.

Posta kodu

YapınKısa değer için kısa alan.

Posta kodu

YapmayınBeş haneli değer için tam genişlikte alan.

İçerik

• Etiket: Kısa bir isim öbeği, cümle düzeninde, iki nokta üst üste olmadan: “Posta kodu”.
• Yardım metni: Bir cümle. Biçimi ya da değerin nereden bulunacağını söyler.
• Hata metni: Neyin yanlış olduğunu ve nasıl düzeltileceğini söyler; suçlamaz. “Hatalı giriş yaptınız” yerine “Posta kodu 5 haneli olmalı”.
• Yer tutucu: Gerekmedikçe kullanmayın. Kullanırsanız örnek değer verin, talimat değil.

Türkçe	İngilizce
E-posta	Email
Posta kodu	Postal code
Ad soyad	Full name
Posta kodu 5 haneli olmalı.	A postal code has 5 digits.
Bu alan zorunlu.	This field is required.

Platformlar

• Masaüstü: Orta boy. Formlar tek sütundur; alanlar beklenen değere göre daralabilir.
• Mobil: Büyük boy ve tam genişlik. Etiket alanın üstünde kalır; yan yana alan dizmeyin.

İlgili bileşenler

• Button: Formun gönderme işlemi. Aynı formda alanla aynı boyda kullanın.
• Badge: Bir kaydın durumunu gösterir; alanın geçerli ya da geçersiz olduğunu göstermek için kullanılmaz.