OTP

OTP (One-Time Password) adalah kode verifikasi sementara yang digunakan untuk memastikan identitas pengguna dalam proses login, aktivasi, atau transaksi. Komponen ini meningkatkan keamanan dengan menghasilkan kode unik yang hanya berlaku dalam satu sesi atau jangka waktu singkat.

Penggunaan

Gunakan OTP saat pengguna perlu melakukan autentikasi tambahan tanpa harus memasukkan kata sandi berulang kali. Komponen ini umum diterapkan pada alur verifikasi nomor ponsel, transaksi keuangan, atau reset kata sandi untuk menjaga keamanan dan keandalan sistem.

Anatomi

Perilaku

Menggunakan input angka (0–9).
Memindahkan fokus otomatis ke kolom berikutnya setelah satu digit dimasukkan.
Mendukung paste OTP sekaligus untuk efisiensi pengguna.
Pada kondisi eror, tampilkan border merah dan helper text berwarna merah di bawahnya.

Jumlah Digit

Gunakan standar 4-6 digit, disesuaikan dengan tingkat keamanan sistem. Jumlah digit yang terlalu pendek dapat menurunkan keamanan, sementara terlalu panjang akan memperlambat proses input pengguna.

Error Feedback

Tampilkan pesan kesalahan dengan indikator visual (merah) dan teks yang jelas serta ringkas. Hindari penggunaan kalimat ambigu yang bisa membingungkan pengguna.

Helper Text

Gunakan helper text hanya untuk instruksi atau koreksi penting. Jangan menampilkan teks yang terlalu panjang atau berulang, pastikan fokus pada konteks, misalnya: "Kode OTP terdiri dari 6 digit angka."

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan 1 digit per field untuk menjaga keterbacaan dan konsistensi input.

❌ Dihindari

Jangan menempatkan 2 digit atau lebih dalam satu kolom input.

✅ Disarankan

Buat instruksi singkat, jelas, dan langsung ke inti.

❌ Dihindari

Hindari instruksi yang terlalu panjang atau berulang.

Penerapan

Verifikasi Nomor Ponsel

Halaman ini digunakan untuk proses verifikasi dua langkah (OTP Verification) sebagai bagian dari sistem keamanan autentikasi pengguna.

Kode OTP dikirimkan ke nomor ponsel yang telah terdaftar, lalu dimasukkan ke dalam kolom input untuk memastikan identitas pengguna sebelum melanjutkan ke tahap berikutnya.

Desain halaman ini menampilkan kombinasi antara elemen visual (ilustrasi keamanan) dan area input angka OTP yang sederhana dan mudah dibaca.

Selain itu, sistem menampilkan countdown timer untuk memberi tahu pengguna kapan mereka dapat mengirim ulang kode verifikasi.

Spesifikasi

Panduan mengenai:

Ukuran dan jarak antar kolom input angka.
Padding dalam area input untuk memastikan keterbacaan.
Warna dan gaya border sesuai status (normal, aktif, dan error).
Penempatan helper text dan label agar tetap konsisten di seluruh antarmuka.