Phone Number Input Component Demo
Phone input component with country code selector and flag-icons
This component was built with assistance fromAntigravity AI
Basic Usage
Defaults to Taiwan (+886) country code
+886
美國 / 加拿大 +1
英國 +44
阿富汗 +93
阿根廷 +54
奧地利 +43
澳大利亞 +61
巴林 +973
孟加拉 +880
比利時 +32
不丹 +975
玻利維亞 +591
巴西 +55
柬埔寨 +855
喀麥隆 +237
中國 +86
安圭拉 +1264
安地瓜 +1268
阿魯巴 +297
百慕達 +1441
多明尼加 +1767
格瑞那達 +1473
聖盧西亞 +1758
哥倫比亞 +57
新加坡 +ˊ65
剛果共和國 +243
瑞士 +41
德國 +49
丹麥 +45
埃及 +20
西班牙 +34
薩爾瓦多 +503
芬蘭 +358
斐濟 +679
法國 +33
喬治亞 +995
迦納 +233
希臘 +30
瓜地馬拉 +502
蓋亞那 / 葉門 +967
海地 +509
宏都拉斯 +504
香港 +852
印度 +91
冰島 +354
印尼 +62
伊拉克 +964
愛爾蘭 +353
義大利 +39
牙買加 +1876
約旦 +962
哈薩克 / 俄羅斯 +7
肯亞 +254
日本 +81
韓國 +82
科威特 +965
盧森堡 +352
澳門 +853
馬其頓 +389
馬達加斯加 +261
馬來西亞 +60
馬爾地夫 +960
墨西哥 +52
摩洛哥 +212
挪威 +47
諾魯 +674
紐西蘭 +64
尼加拉瓜 +505
奈及利亞 +234
巴基斯坦 +92
巴拿馬 +507
巴布亞紐幾內亞 +675
葡萄牙 +351
巴拉圭 +595
羅馬尼亞 +40
盧旺達 +250
沙烏地阿拉伯 +966
敘利亞 +381
塞席爾 +248
斯里蘭卡 +94
新加坡 +65
蘇丹 +249
瑞典 +46
泰國 +66
台灣 +886
湯加群島 +676
土耳其 +90
烏干達 +256
烏克蘭 +380
阿拉伯聯合大公國 +971
烏拉圭 +598
烏茲別克 +998
委內瑞拉 +58
荷蘭 +31
Output Value:
(Not entered yet)Custom Default Country Code
Set default country code to United States (+1)
+886
美國 / 加拿大 +1
英國 +44
阿富汗 +93
阿根廷 +54
奧地利 +43
澳大利亞 +61
巴林 +973
孟加拉 +880
比利時 +32
不丹 +975
玻利維亞 +591
巴西 +55
柬埔寨 +855
喀麥隆 +237
中國 +86
安圭拉 +1264
安地瓜 +1268
阿魯巴 +297
百慕達 +1441
多明尼加 +1767
格瑞那達 +1473
聖盧西亞 +1758
哥倫比亞 +57
新加坡 +ˊ65
剛果共和國 +243
瑞士 +41
德國 +49
丹麥 +45
埃及 +20
西班牙 +34
薩爾瓦多 +503
芬蘭 +358
斐濟 +679
法國 +33
喬治亞 +995
迦納 +233
希臘 +30
瓜地馬拉 +502
蓋亞那 / 葉門 +967
海地 +509
宏都拉斯 +504
香港 +852
印度 +91
冰島 +354
印尼 +62
伊拉克 +964
愛爾蘭 +353
義大利 +39
牙買加 +1876
約旦 +962
哈薩克 / 俄羅斯 +7
肯亞 +254
日本 +81
韓國 +82
科威特 +965
盧森堡 +352
澳門 +853
馬其頓 +389
馬達加斯加 +261
馬來西亞 +60
馬爾地夫 +960
墨西哥 +52
摩洛哥 +212
挪威 +47
諾魯 +674
紐西蘭 +64
尼加拉瓜 +505
奈及利亞 +234
巴基斯坦 +92
巴拿馬 +507
巴布亞紐幾內亞 +675
葡萄牙 +351
巴拉圭 +595
羅馬尼亞 +40
盧旺達 +250
沙烏地阿拉伯 +966
敘利亞 +381
塞席爾 +248
斯里蘭卡 +94
新加坡 +65
蘇丹 +249
瑞典 +46
泰國 +66
台灣 +886
湯加群島 +676
土耳其 +90
烏干達 +256
烏克蘭 +380
阿拉伯聯合大公國 +971
烏拉圭 +598
烏茲別克 +998
委內瑞拉 +58
荷蘭 +31
Output Value:
(Not entered yet)Return Full Object
Use return-object prop to retrieve comprehensive phone number info
+886
美國 / 加拿大 +1
英國 +44
阿富汗 +93
阿根廷 +54
奧地利 +43
澳大利亞 +61
巴林 +973
孟加拉 +880
比利時 +32
不丹 +975
玻利維亞 +591
巴西 +55
柬埔寨 +855
喀麥隆 +237
中國 +86
安圭拉 +1264
安地瓜 +1268
阿魯巴 +297
百慕達 +1441
多明尼加 +1767
格瑞那達 +1473
聖盧西亞 +1758
哥倫比亞 +57
新加坡 +ˊ65
剛果共和國 +243
瑞士 +41
德國 +49
丹麥 +45
埃及 +20
西班牙 +34
薩爾瓦多 +503
芬蘭 +358
斐濟 +679
法國 +33
喬治亞 +995
迦納 +233
希臘 +30
瓜地馬拉 +502
蓋亞那 / 葉門 +967
海地 +509
宏都拉斯 +504
香港 +852
印度 +91
冰島 +354
印尼 +62
伊拉克 +964
愛爾蘭 +353
義大利 +39
牙買加 +1876
約旦 +962
哈薩克 / 俄羅斯 +7
肯亞 +254
日本 +81
韓國 +82
科威特 +965
盧森堡 +352
澳門 +853
馬其頓 +389
馬達加斯加 +261
馬來西亞 +60
馬爾地夫 +960
墨西哥 +52
摩洛哥 +212
挪威 +47
諾魯 +674
紐西蘭 +64
尼加拉瓜 +505
奈及利亞 +234
巴基斯坦 +92
巴拿馬 +507
巴布亞紐幾內亞 +675
葡萄牙 +351
巴拉圭 +595
羅馬尼亞 +40
盧旺達 +250
沙烏地阿拉伯 +966
敘利亞 +381
塞席爾 +248
斯里蘭卡 +94
新加坡 +65
蘇丹 +249
瑞典 +46
泰國 +66
台灣 +886
湯加群島 +676
土耳其 +90
烏干達 +256
烏克蘭 +380
阿拉伯聯合大公國 +971
烏拉圭 +598
烏茲別克 +998
委內瑞拉 +58
荷蘭 +31
Output Object:
null
Custom Dropdown Width
Adjust the width of country code selector dropdown
+886
美國 / 加拿大 +1
英國 +44
阿富汗 +93
阿根廷 +54
奧地利 +43
澳大利亞 +61
巴林 +973
孟加拉 +880
比利時 +32
不丹 +975
玻利維亞 +591
巴西 +55
柬埔寨 +855
喀麥隆 +237
中國 +86
安圭拉 +1264
安地瓜 +1268
阿魯巴 +297
百慕達 +1441
多明尼加 +1767
格瑞那達 +1473
聖盧西亞 +1758
哥倫比亞 +57
新加坡 +ˊ65
剛果共和國 +243
瑞士 +41
德國 +49
丹麥 +45
埃及 +20
西班牙 +34
薩爾瓦多 +503
芬蘭 +358
斐濟 +679
法國 +33
喬治亞 +995
迦納 +233
希臘 +30
瓜地馬拉 +502
蓋亞那 / 葉門 +967
海地 +509
宏都拉斯 +504
香港 +852
印度 +91
冰島 +354
印尼 +62
伊拉克 +964
愛爾蘭 +353
義大利 +39
牙買加 +1876
約旦 +962
哈薩克 / 俄羅斯 +7
肯亞 +254
日本 +81
韓國 +82
科威特 +965
盧森堡 +352
澳門 +853
馬其頓 +389
馬達加斯加 +261
馬來西亞 +60
馬爾地夫 +960
墨西哥 +52
摩洛哥 +212
挪威 +47
諾魯 +674
紐西蘭 +64
尼加拉瓜 +505
奈及利亞 +234
巴基斯坦 +92
巴拿馬 +507
巴布亞紐幾內亞 +675
葡萄牙 +351
巴拉圭 +595
羅馬尼亞 +40
盧旺達 +250
沙烏地阿拉伯 +966
敘利亞 +381
塞席爾 +248
斯里蘭卡 +94
新加坡 +65
蘇丹 +249
瑞典 +46
泰國 +66
台灣 +886
湯加群島 +676
土耳其 +90
烏干達 +256
烏克蘭 +380
阿拉伯聯合大公國 +971
烏拉圭 +598
烏茲別克 +998
委內瑞拉 +58
荷蘭 +31
Output Value:
(Not entered yet)Form Integration Demo
Using phone number input inside a form
API Documentation
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
modelValue | String | Object | '' | v-model binding value |
defaultCountryCode | String | 'TW' | Default country code (ISO 3166-1 alpha-2) |
placeholder | String | 'Please enter phone number' | Input placeholder |
optionListWidth | String | Number | '280px' | Dropdown list width |
returnObject | Boolean | false | Whether to return full object |
Events
| Event Name | Parameters | Description |
|---|---|---|
update:modelValue | value: String | Object | Triggered when value changes |
change | value: String | Object | Triggered when value changes |
focus | - | Triggered when input gains focus |
blur | - | Triggered when input loses focus |
Return Object Format (when returnObject is true)
{
countryCode: 'TW', // 國家代碼
countryName: '台灣', // 國家名稱
phoneCode: '886', // 電話國碼
phoneNumber: '912345678', // 電話號碼
fullNumber: '+886912345678' // 完整電話號碼
}