\n ![\"Preview](\"https://i.imgur.com/etN0Y5C.gif\")
\n
\n\n\n# Documentation\n### Dependencies\n- [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) for parsing and validating numbers\n- [vue-country-flag-next](https://www.npmjs.com/package/vue-country-flag-next) for country flag icons\n\n### Countries\nAll countries are represent by their [alfa2 code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2). List of all countries is taken from [`getCountries()`](https://gitlab.com/catamphetamine/libphonenumber-js/-/blob/master/README.md#getcountries-string).\n\n\n## Props\n| Name | Type | Required | Default | Description |\n| -------------------- | --------------- | -------- | --------- | ----------------------------------------------------------------------------------------------------------------- |\n| modelValue | String | + | - | Not formatted international number, e.g. `+7701123456` |\n| defaultCountry | String | - | `US` | Country that selected by default |\n| countryList | Array | - | All | Available countries in dropdown options list |\n| strictness | String | - | `FULL` | Validation strictness. One of `['NONE', 'LENGTH', 'FULL', 'CUSTOM']` (details below) |\n| locales | [String, Array] | - | `[]` | Locales to use for country names in dropdown list. First parameter of [Intl.DisplayNames constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames#parameters) |\n| getDropdownItemLabel | Function | - | In descr. | Returns label for specific country in dropdown. Default: (_code, callingCode, name) => `${name} +${callingCode} ` |\n| dropdownProps | Object | - | - | Props passed to QBtnDropdown |\n| search | Boolean | - | `false` | Toggles searchbar for countries in dropdown |\n\n...and props available for [`QInput`](https://quasar.dev/vue-components/input#qinput-api).\n\n\n## Exposed values\n```ts\n{\n validationStatus: string | undefined // Error code if in error state\n country: string | undefined\n callingCode: string | undefined // e.g. '7' for KZ\n nationalNumber: string | undefined\n}\n```\n\n### Possible values for `validationStatus`\n- These two errors only occur when country is not set yet (e.g. on initial parse):\n - `INVALID_COUNTRY` - when value passed to input is non-international number or has unknown calling code\n - `NOT_A_NUMBER` - when value passed to input is not a phone number (empty or contains invalid characters e.g. letters)\n\n- Other errors:\n - `TOO_SHORT` - when value is too short\n - `INVALID` - when value is not valid\n - `ANOTHER_COUNTRY` - when country in dropdown differs from parsed\n\n\n## Validation\n`QTelInput` validates value depending on the `strictness`:\n- **NONE** - no validation and highlighting at all\n- **LENGTH** - validate only length\n- **FULL** - validate length and number itself\n- **CUSTOM** - custom validation\n\n> Note: `QTelInput` has error state, but doesn't show error message.\n> You can get error code from `validationStatus` and set corresponding error message with `errorMessage` `QInput` prop.\n\n### Custom validation\nWith `strictness=\"CUSTOM\"` you can pass your own validation function `validateFn`:\n```js\n\n