Input kata laluan
Input yang menyembunyikan kata laluan yang dimasukkan oleh pengguna dengan selamat, memastikan privasi. Ia biasanya termasuk pilihan untuk menukar keterlihatan kata laluan.
- Label Ruangan Kata Laluan.
- Placeholder Asal: “Masukkan kata laluan”.
- Ikon Tunjuk/Sorok:
- Ikon Mata Tunjuk: Paparkan kata laluan.
- Ikon Mata Sorok: Sorokkan kata laluan.
Ruangan Pencetus Ikon Tunjuk/Sorok
- Tingkatkan ruangan pencetus untuk menyesuaikan ketinggian ruangan input secara seimbang, memberikan ruang yang mencukupi untuk pengguna mengklik ikon Tunjuk/Sorok.
- Jika kata laluan disorok, paparkan tooltip dengan teks "Tunjuk kata laluan" apabila pengguna meletakkan tetikus di atas ruangan pencetus.
- Jika kata laluan dipaparkan, paparkan tooltip dengan teks "Sorok kata laluan" apabila pengguna meletakkan tetikus di atas ruangan pencetus.
Keadaan (State)
- Asal: Kata laluan disorok.
- Asal Berfokus: Pengguna mengklik atau menggunakan papan kekunci untuk memasuki ruangan kata laluan, menunjukkan bahawa ia aktif dan sedia untuk menerima input.
- Terisi (Filled): Kata laluan dimasukkan, menandakan ruangan tersebut mengandungi input. 3a. Ikon Mata Tunjuk: Klik untuk memaparkan kata laluan.
- Terisi (Kata Laluan Dipaparkan): Kata laluan ditunjukkan kepada pengguna. 4a. Ikon Mata Sorok: Klik untuk menyembunyikan kata laluan.
- Ralat: Paparkan garis besar berwarna merah (otl-danger-300) dan teks ralat apabila input kata laluan kosong.
- Ralat Berfokus: Pengguna mengklik atau menggunakan papan kekunci untuk memasuki ruangan kata laluan yang dalam keadaan ralat, menunjukkan bahawa ia sedia untuk menerima input.
Saiz
Setiap saiz direka untuk memenuhi keperluan borang yang berbeza, memastikan keterbacaan dan pengalaman pengguna yang optimum.
