phoneAuto

A phone number of any country: the mask is chosen by the code the user types. +375 — the Belarus mask, +49 — Germany, +7 701 — Kazakhstan. Along with the mask you get data for the UI: a flag, the country name, the dial code.

Signature

function phoneAuto(options?: { defaultCountry?: PhoneCountry; countries?: PhoneCountry[] }): PhoneAutoMask

interface PhoneAutoMask extends Mask {
  country(value: string): CountryInfo | undefined;
}

interface CountryInfo {
  code: PhoneCountry; // 'by'
  dial: string;       // '375'
  flag: string;       // '🇧🇾'
}

Parameters

Option	Description
`defaultCountry`	The default country. A number without `+` is local: `9991234567` → `+7 (999) 123-45-67`. An empty field shows its template and flag. Without the option the number is always typed with the country code
`countries`	Which countries to detect among. With a shared code the first one wins: `['ca', 'us']` — `+1` becomes Canada

Notes

Detection uses the longest matching code: +3 and +37 aren't a country yet, +375 is Belarus. Until the country is known, up to 15 digits are accepted (the maximum of the international E.164 standard).
+7 is Russia, but +7 6… and +7 7… are Kazakhstan (Kazakh operator codes).
To type a number of another country when the field already shows the default country, just type + — input starts over.
The unmasked value is all digits including the country code: 375291234567.
valid and isValid are true only if the number is filled by the mask of a detected country.
The national prefix is dropped: with defaultCountry: 'gb' the number 07400 123456 becomes +44 7400 123456, with 'ru' — 8 999… becomes +7 (999)….
The country list is in Ready-made masks. All 245 countries of the world — the tinyval-phone package with the same API.

Examples

A flag and the country name next to the field

vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phoneAuto, countryName } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phoneAuto({ defaultCountry: 'ru' });
const tel = ref('');
const country = computed(() => phoneMask.country(tel.value));
</script>

<template>
  <label>
    <span v-if="country">{{ country.flag }} {{ countryName(country.code, 'ru') }}</span>
    <input v-model="tel" v-mask.raw="{ mask: phoneMask, placeholder: '_' }" inputmode="tel" />
  </label>
  <!-- tel: '375291234567' -->
</template>

Your own country picker

vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { phone, phoneCountries, countryName, type PhoneCountry } from 'tinyval-mask/presets';

const countries = phoneCountries(); // [{ code: 'ru', dial: '7', flag: '🇷🇺' }, …]
const selected = ref<PhoneCountry>('ru');
const phoneMask = computed(() => phone(selected.value));
</script>

<template>
  <select v-model="selected">
    <option v-for="c in countries" :key="c.code" :value="c.code">
      {{ c.flag }} {{ countryName(c.code, 'ru') }} +{{ c.dial }}
    </option>
  </select>
  <input v-model="tel" v-mask.raw="phoneMask" />
</template>

Without UI

detectCountry('+375291234567'); // 'by'
detectCountry('77011234567');   // 'kz'
flag('de');                     // '🇩🇪'
countryName('de', 'ru');        // 'Германия'
unmask('+49 151 23456789', phoneAuto()); // '4915123456789'

Flags and names

flag(code) — a flag emoji from the country code. Windows shows two letters (RU) instead of flag emoji — if that matters, use SVG icons from tinyval-phone/flags by country.code.
countryName(code, locale) — the name in any language via the standard Intl.DisplayNames: there's no table of names in the package, so the size doesn't grow.

Your own countries and formats

phoneTable is the package's country table. phoneFrom, phoneAutoFrom, detectCountryFrom, phoneCountriesFrom work the same way but with any table: add a country or change a format. A country entry is [dial code, pattern after the code, national prefix, country sign]; the prefix and the sign are regular expressions over the digits without the country code.

import { phoneTable, phoneAutoFrom } from 'tinyval-mask/presets';

const table = {
  ...phoneTable,
  jp: ['81', '99-9999-9999', '0'],
  bs: ['1', '(999) 999-9999', '1', '242'], // +1 242… — Багамы / the Bahamas
} as const;
const tel = phoneAutoFrom(table, { defaultCountry: 'jp' });
mask('09012345678', tel); // '+81 90-1234-5678'

phoneAuto ​

Signature ​

Parameters ​

Notes ​

Examples ​

A flag and the country name next to the field ​

Your own country picker ​

Without UI ​

Flags and names ​

Your own countries and formats ​

See also ​