Ketik 0812… atau 812…, keduanya tersimpan sebagai +62.
Nilai tersimpan: kosong
FormPhone
Kolom nomor telepon yang merapikan angka menjadi kelompok, menyimpannya dalam satu bentuk, dan bisa memilih kode negara.
Dasar
Orang menulis nomor dengan berbagai cara. Komponen ini menerima 0812…, 812…, maupun +62 812…, lalu menyimpannya sebagai +62812…. Angka 0 di depan dan kode negara yang diketik ulang dibuang otomatis.
Pilihan kode negara
Isi countries untuk mengganti kode statis dengan pilihan negara. Nomornya tidak hilang saat negara diganti: yang berubah hanya kode di depan, dan nilai tersimpan mengikuti.
Daftar bawaannya memuat 198 negara — diambil dari daftar yang sudah dipakai dashboard ERP — dengan nama Indonesia dan urut menurut nama itu. Impor phoneCountryCodes untuk seluruhnya, phoneCountryCodesSeAsia untuk Asia Tenggara saja, atau tulis sendiri daftar kode ISO-nya. Nama Inggris tetap ikut sebagai kata kunci pencarian, jadi germany menemukan Jerman dan swaziland menemukan Eswatini.
Panelnya punya tiga bagian: kolom pencarian, section Rekomendasi berisi negara yang paling sering dipakai (bawaannya Indonesia, Singapura, Malaysia), lalu Semua negara selengkapnya. Pencariannya menerima nama negara, kode ISO, maupun kode telepon — 62 dan indo sama-sama menemukan Indonesia — dan saat ada kata kunci, kedua section dilipat menjadi satu daftar hasil supaya satu negara tidak muncul dua kali.
Seluruh 198 negara, dengan pencarian di dalam panel.
Dibatasi Asia Tenggara, dengan nama negara di tombolnya.
Negara: ID · Nilai: +6281234567890
Nomor lokal dan negara lain
Matikan dial-code untuk nomor yang memang disimpan apa adanya, seperti telepon kantor. Isi dial-code lain untuk nomor luar negeri.
Disimpan apa adanya.
Kode negara lain.
Maksimal 4 digit.
Error, readonly, dan disabled
Komponen hanya merapikan tampilan; keabsahan nomor tetap divalidasi aplikasi dan ditampilkan lewat error pada FormField.
Nomor belum lengkap.
Hubungi admin untuk ubah.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| v-model | string | — | Nomor tanpa spasi. Dengan dial-code hasilnya +62812…; tanpa dial-code, angka apa adanya. |
| dial-code | string | false | '+62' | Kode negara yang ditampilkan di depan kolom dan disimpan bersama nomor. false untuk nomor lokal. Diabaikan bila countries diisi. |
| countries | (string | { code, dialCode, label?, flag? })[] | — | Mengubah kode di depan kolom menjadi pilihan negara. Kode ISO memakai daftar bawaan (198 negara); objek untuk wilayah di luar daftar. Pakai phoneCountryCodes untuk seluruhnya, atau phoneCountryCodesSeAsia untuk Asia Tenggara saja. |
| v-model:country | string | dari nilai, atau negara pertama | Kode ISO negara yang sedang dipilih. Terisi otomatis dari nilai yang masuk. |
| country-display | 'code' | 'name' | 'code' | Isi tombol pemilih: hanya kode telepon, atau nama negara sekaligus. Daftar di dalam panel selalu menampilkan nama. |
| country-label | string | 'Kode negara' | Nama aksesibel tombol pemilih sekaligus daftar negaranya. |
| recommended | string[] | ['ID', 'SG', 'MY'] | Kode ISO yang ditawarkan di section pertama panel. Kode yang tidak ada di countries dilewati; kosongkan untuk menghilangkan section itu. |
| search-placeholder | string | 'Cari negara atau kode' | Placeholder sekaligus nama aksesibel kolom pencarian. |
| recommended-label / all-countries-label | string | 'Rekomendasi' / 'Semua negara' | Judul kedua section di dalam panel. |
| no-result-label | string | 'Tidak ada negara yang cocok' | Teks saat pencarian tidak menemukan apa pun. |
| max-digits | number | 15 | Batas jumlah angka termasuk kode negara. 15 adalah batas E.164. |
| size / id / disabled / readonly / required / invalid / icon | — | — | Sama seperti FormInput, termasuk pewarisan dari FormField. |
Atribut seperti name dan placeholder diteruskan ke FormInput. type, inputmode, dan autocomplete sudah diatur untuk nomor telepon. Ref komponen menyediakan focus(), blur(), dan select().