PasswordInput

Ne zaman kullanılır

PasswordInput giriş, şifre değiştirme ve kayıt formlarında şifre içindir. Yeni şifre oluştururken koşulları ve gücü gösterir.

Ne zaman kullanılmaz

• Tek kullanımlık kod için: OtpInput kullanın.
• Bir kez gösterilen gizli anahtar ya da maskeli değer için: MaskedValue kullanın.

Anatomi

Yeni şifre* zorunlu

• En az 12 karakter, karşılanmadı
• Bir büyük harf, karşılandı
• Bir rakam, karşılandı

Şifre gücü: orta

AçıkKoyu

Kodu kopyala

import { PasswordInput } from '@bigbang/ui';

const rules = [
  { id: 'length', label: 'En az 12 karakter', test: (value: string) => value.length >= 12 },
  { id: 'upper', label: 'Bir büyük harf', test: (value: string) => /[A-ZÇĞİÖŞÜ]/.test(value) },
  { id: 'digit', label: 'Bir rakam', test: (value: string) => /\d/.test(value) },
];

export default function NewPassword() {
  return <PasswordInput className="max-w-sm" label="Yeni şifre" autoComplete="new-password" rules={rules} showStrength defaultValue="Örnek1" required />;
}

1. Etiket: Alanın adı.
2. Kutu ve göz düğmesi: Düğme kutunun sonunda, 24, 28 ya da 32 px.
3. Büyük harf uyarısı: Büyük harf kilidi açıkken alanın altında belirir.
4. Koşul listesi: Her koşulun yanında durum ikonu; ekran okuyucu “karşılandı” ya da “karşılanmadı” okur.
5. Güç çubuğu: Üç parça ve metin düzeyi (zayıf, orta, güçlü).

Davranış

• Göz düğmesi type değerini password ile text arasında değiştirir; odak düğmede kalır.
• Yapıştırma ve parola yöneticileri hiçbir zaman engellenmez; autoComplete zorunludur.
• Yazım denetimi ve otomatik büyük harf kapalıdır.
• Koşul ilerlemesi kullanıcı yazmayı bıraktıktan yaklaşık 800 ms sonra bir kez duyurulur.
• Büyük harf kilidi uyarısı odak ayrılınca kaybolur.

Yönergeler

• Girişte current-password, kayıt ve değiştirmede new-password verin.
• Koşulları önceden gösterin; kullanıcı hata almadan önce neyin gerektiğini bilsin.
• Güç çubuğunu tek başına engel olarak kullanmayın; zorunluluk koşullarla anlatılır.
• Şifre tekrar alanı yerine göz düğmesine güvenin; tekrar alanı hata riskini artırır.

İçerik

• Koşullar kısa ad öbekleridir: “En az 12 karakter”, “Bir rakam”.
• Hata metni neyin eksik olduğunu söyler.

Türkçe	İngilizce
Şifreyi göster	Show password
Büyük harf kilidi açık	Caps Lock is on
{met} / {total} koşul karşılandı	{met} of {total} requirements met
Şifre gücü: zayıf / orta / güçlü	Password strength: weak / fair / strong

İlgili bileşenler

• TextInput: Düz metin alanı.
• OtpInput: Tek kullanımlık kod.
• Meter: Bir ölçünün düzeyi.