Form · Password input

Parola girişi

Parola alanı. Kullanıcı yazdığını görmek için "Göster" düğmesine basar.

CSS: kararlı
JavaScript: göster ve gizle
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Parolanız

HTML kodunu göster

<div class="kiris-alan" data-kiris="parola">
  <label class="kiris-etiket" for="parola">Parolanız</label>
  <div class="kiris-parola">
    <input class="kiris-girdi" id="parola" name="parola" type="password" autocomplete="current-password" spellcheck="false">
    <button class="kiris-button kiris-button--ikincil kiris-parola__dugme" type="button" aria-controls="parola" aria-pressed="false">Göster</button>
  </div>
</div>

Ne zaman kullanılır

Parola veya şifre isterken kullanın.
T.C. kimlik numarası için kullanmayın. O bir parola değildir.

Erişilebilirlik

"Göster" düğmesi aria-controls ile alana bağlıdır ve durumunu aria-pressed ile söyler.
Alan gösterilirken de autocomplete çalışır. Parola yöneticisi bozulmaz.
Caps Lock açıkken uyarı yalnız ekranda gösterilir, ekran okuyucu tuş durumunu zaten bildirir.

Karşılanan WCAG 2.2 ölçütleri 1.3.5 3.3.2 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FR, IE, DE.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-password-input ile başlayan sınıflar
Davranış betiği, data-kiris="parola" başlatıcısı