OTP

Autofill one-time-code, tempel 6 digit

UX-20
Slicing hidup

Verifikasi nomor

Tempel 123456 untuk melihat galat, 246810 untuk sukses. Backspace mundur, panah kiri/kanan pindah kotak.

Masukkan kode

Dikirim lewat SMS ke +62 812-3456-7890. Kode demo 246810.

Tempel kode 6 digit, atau ketik; kotak pindah sendiri.

Bukti SOP

Diukur QA 30 Okt 2026, 23.55 WIB

A · Motion

Kode salah menggoyang baris lewat pegas .bouncy, bukan keyframe

B · UX-20

#15 autocomplete one-time-code · #16 angka tabular · #13 kotak 44

C · Slicing hidup

Tempel 6 digit, pindah otomatis, Backspace mundur, memeriksa, salah, berhasil

D · Antisipasi

Kirim ulang dengan hitung mundur; salah memberi pesan dan kotak dikosongkan untuk coba lagi

E · Rapi ukuran tetap

Kotak 44, jarak 8, radius 8, teks 20 tabular

Ukuran

Ukuran kotak44
--spacing-44QA 6/6 lulus
Tinggi kotak44
--spacing-44QA 6/6 lulus
Jarak antar kotak8px
--spacing-8QA 6/6 lulus
Radius kotak8px
--radius-8QA 6/6 lulus
Ukuran digit20px
--text-20QA 6/6 lulus
Angka tabulartabular-nums
tabular-numsQA 6/6 lulus
Autofill OTPone-time-code
autocomplete=one-time-codeQA 6/6 lulus

Antisipasi

Kode bisa ditempel sekaligus; salah ketik bisa dihapus mundur; kode tidak datang bisa dikirim ulang setelah hitung mundur; salah kode dikosongkan dan fokus kembali ke kotak pertama.

UX-20 yang dilewati

#3 command menu, #20 safe triangle, #10 sheet, #12 predictive back: tidak ada menu/sheet
#8 BlurHash, #9 view transitions: tidak ada gambar/perpindahan halaman