Zenko
Patterns/Form & Validation Patterns

Form & Validation Patterns

● Ready Web Nuxt 4 + Mobile React Native

Pola integrasi formulir lengkap dengan validasi data real-time, penanganan pesan error, custom selects, date-time picker, dan umpan balik status pengiriman.

Prinsip Formulir Zenko

  • Label di Atas (Top-Aligned): Label selalu berada di atas input untuk mempercepat pemindaian visual di layar mobile dan web.
  • Pesan Error Spesifik: Berikan alasan jelas mengapa input salah (misalnya "Format email harus mengandung @"), bukan pesan generik seperti "Terjadi kesalahan".
  • Autofocus Cerdas: Pada layar login atau OTP, arahkan kursor otomatis ke bidang input pertama.
  • Validasi saat submit, bukan saat mengetik: Tampilkan pesan error setelah pengguna mencoba mengirim formulir, supaya tidak terasa menghakimi saat pengguna baru mulai mengetik.

Lihat contoh komposisi

Formulir pendaftaran try out yang menggabungkan Text field, Select, Date & time picker, Checkbox, Switch, dan Button — satu contoh utuh yang menerapkan keempat prinsip di atas sekaligus.

Formulir Pendaftaran Try Out Akbar 2026

Lengkapi identitas diri untuk pencatatan skor pada Leaderboard Nasional BKN.