ADefault
Siap menerima input.
Components · Forms
Advanced Form Components
Input enhancement compact untuk verifikasi dan angka terformat.
Theme Demo · Advanced Forms
Input enhancement yang tetap ringan dan aksesibel
Semua komponen memakai input native sebagai fondasi, token PA DEV, dan progressive enhancement Vanilla JavaScript.
Verification input
OTP Input
Enam digit terpisah dengan auto-advance, paste, dan navigasi Backspace.
Focus
Focus ring berada pada wrapper.
Filled
Nilai telah terisi.
Disabled
Tidak dapat diubah.
Readonly
Nilai hanya dapat dibaca.
Error
Nilai perlu diperiksa.
Success
Nilai sudah valid.
Loading
Sedang memproses nilai.
Secure numeric input
PIN Input
Input PIN ringkas dengan digit tersamarkan dan keyboard numerik.
Default
Siap menerima input.
Focus
Focus ring berada pada wrapper.
Filled
Nilai telah terisi.
Disabled
Tidak dapat diubah.
Readonly
Nilai hanya dapat dibaca.
Error
Nilai perlu diperiksa.
Success
Nilai sudah valid.
Loading
Sedang memproses nilai.
Localized money
Currency Input
Format Rupiah id-ID tanpa mengubah nilai mentah saat pengguna mengetik.
Default
Rp
Siap menerima input.
Focus
Rp
Focus ring berada pada wrapper.
Filled
Rp
Nilai telah terisi.
Disabled
Rp
Tidak dapat diubah.
Readonly
Rp
Nilai hanya dapat dibaca.
Error
Rp
Nilai perlu diperiksa.
Success
Rp
Nilai sudah valid.
Loading
Rp
Sedang memproses nilai.
Localized number
Number Formatter
Pemisah ribuan dan desimal lokal dengan parsing yang deterministik.
Default
Siap menerima input.
Focus
Focus ring berada pada wrapper.
Filled
Nilai telah terisi.
Disabled
Tidak dapat diubah.
Readonly
Nilai hanya dapat dibaca.
Error
Nilai perlu diperiksa.
Success
Nilai sudah valid.
Loading
Sedang memproses nilai.
Bounded numeric input
Percentage Input
Nilai persentase compact dengan suffix tetap dan batas 0–100.
Default
%
Siap menerima input.
Focus
%
Focus ring berada pada wrapper.
Filled
%
Nilai telah terisi.
Disabled
%
Tidak dapat diubah.
Readonly
%
Nilai hanya dapat dibaca.
Error
%
Nilai perlu diperiksa.
Success
%
Nilai sudah valid.
Loading
%
Sedang memproses nilai.
Batch A · Bounded numeric control
Number Stepper
Kontrol angka keyboard-friendly dengan batas minimum, maksimum, step, dan state disabled/error.
Interactive
0–99Gunakan tombol atau ArrowUp / ArrowDown.
Step & Decimal
Step 0,1 · maksimum 1.
Error
Nilai harus berada antara 1 dan 10.
Disabled
Nilai dikunci oleh konfigurasi.
Batch C · Dynamic field collection
Repeater / Dynamic Field
Tambah, hapus, dan renumber field collection tanpa dependency tambahan; struktur name siap dipakai backend.
Project metadata
Setiap baris dapat ditambah atau dihapus. Coba tombol Add field.
Batch C · Progressive form flow
Form Wizard
Wizard tiga langkah dengan state current/complete, validasi native, tombol Back/Next, dan submit state.
Batch B · Suggested value
Autocomplete
Combobox pencarian single-value dengan saran terfilter dan selection yang dapat dibersihkan.
Interactive
Tidak ada kota yang cocok.
Gunakan ArrowDown, Enter, atau klik saran.
Empty / No result
Tidak ada kota yang cocok.
Disabled / Readonly
Validation / Loading
Pilih kota yang tersedia.
Batch B · People reference
Mention Input
Masukkan @mention sebagai chip dengan dropdown identitas yang compact.
Interactive
Tidak ada hasil ditemukan.
Mention terpilih dapat dihapus satu per satu.
Empty / No result
Tidak ada hasil ditemukan.
Disabled / Readonly
@reza
@sinta
Validation / Loading
Referensi tidak aktif.
@dimas
Batch B · Structured values
Token Input
Kelola token email atau identifier dengan validasi ringan dan saran.
Interactive
Tidak ada token yang cocok.
Enter menambahkan token baru atau saran aktif.
Empty / No result
Tidak ada token yang cocok.
Disabled / Readonly
dev@padev.id
qa@padev.id
Validation / Loading
Format token tidak valid.
design@padev.id