Phone input
A country picker with flags, a dial code that cannot be edited away, and as-you-type formatting. v-model is E.164 — +32470123456 — or null while empty. Validation rules load per calling code on first interaction, so nothing downloads until the user reaches the field, and valid is undefined until they arrive.
Basic usage
+32
Value: null
—<BsPhoneInput v-model="phone" default-country="be" input-label="Phone number" @phone-change="detail = $event"/>Localized country names
Names come from Intl.DisplayNames and are collated in the viewer's language at no download cost. Switch and reopen the picker — the order changes, because an alphabetical list of English names is not alphabetical to a Dutch reader.
Restricting and pinning countries
+31
Inside an input group
Tel
+32
<!-- The group joins a whole phone input: its outer corners pair with the addon. --><BsInputGroup> <span class="addon">Tel</span> <BsPhoneInput default-country="be" /></BsInputGroup>