Phone Number Input

import { WuiPhoneNumberInput } from "@wui/wui-vue/lib/phone-number-input";

Description

<wui-phone-number-inpute> is a standalone input component to help the user enter a phone number and validate it according to the country.

Informations

This component uses <WuiCountrySelect> and <WuiFormInput> under the hood.

Important: for a better compatibility with all differents countries, use default-phone-number prop to set and update the phone number and default-country-code to update the country code. Updating the phone number and country code is no longer available when you change the value (v-model).

• default-phoner-number: Use to set the init phone number (Ex: "2015550123")
• default-country-code: Use to set the init country code (Ex: "US")
• value (v-model) is the result of both (Ex: "+12015550123")

Features list

• Auto-detect country calling code with phone number provided
• You can set preferred-countries, ignored-countries or have only-countries
• Multi options to getting country code : By default the component get the country code via the browser (disable it with no-use-browser-locale) or you can use fetch-country to get the country code via https://ip2c.org/s (network needed) - you can use default-country-code option instead to set one
• Phone number formatting while typing
• You can search your country in list (open countries list & type your country name (feature of <wui-form-select> inside <wui-country-select>))
• Keyboard accessibility (Arrow down, Arrow up: Countries list navigation - Escape: Close countries list) (feature of <wui-form-select> inside <wui-country-select>)
• Phone number example for each country in placeholder/label
• Auto focus phone number input after selecting country
• You can disable the flags - no-flags props

Keyboard accessibility

Keyboard functionality is completely inherited from the <wui-form-select> component.

Example

<template>
  <wui-form-group>
    <wui-phone-number
      v-model="value"
      @update="handleUpdatePhoneNumber"
      default-country-code="DE"
      default-phone-number="030577015550"
    />
    <p class="m-t-15">Value: { value }</p>
    Object:<br />
    <pre class="m-t-15"><code>{ phoneNumberObject }</code></pre>
  </wui-form-group>
</template>

<script>
  export default {
    data() {
      return {
        value: "",
        phoneNumberObject: {},
      };
    },
    methods: {
      handleUpdatePhoneNumber(phoneNumberObject) {
        this.phoneNumberObject = phoneNumberObject;
      },
    },
  };
</script>

<!-- wui-phone-number-input.vue -->

Component reference

<wui-phone-number-input>

Component aliases

<wui-phone-number-input> can also be used via the following aliases:

• <wui-phone-number>

Properties

Slots

Events

Importing individual components

You can import individual components into your project via the following named exports:

Example

import { WuiPhoneNumberInput } from "@wui/wui-vue/lib/phone-number-input";
Vue.component("wui-phone-number-input", WuiPhoneNumberInput);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Example

import { PhoneNumberPlugin } from "@wui/wui-vue/lib/phone-number-input";
Vue.use(PhoneNumberPlugin);