### Run Website Locally

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/README.md

After building, change to the dist/ directory and start a web server to view the site locally. You may need to install http-server globally first.

```bash
cd site/
npm run build
cd dist/
http-server
```

--------------------------------

### Install Dependencies

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/README.md

Run this command in the root of the intl-tel-input project to install necessary dependencies.

```bash
npm install
```

--------------------------------

### Install React Component

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/react_component.md

Install the React component package using npm.

```sh
npm install @intl-tel-input/react
```

--------------------------------

### Get Example Phone Number

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Retrieve an example phone number for a given country, number type, and format. Returns an empty string if no example is available.

```javascript
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "INTERNATIONAL"); // "+44 7400 123456"
```

```javascript
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "NATIONAL"); // "07400 123456"
```

```javascript
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "E164"); // "+447400123456"
```

--------------------------------

### Install intl-tel-input using npm

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vanilla_javascript.md

Install the intl-tel-input package using npm. This is the first step when using a bundler.

```bash
npm install intl-tel-input
```

--------------------------------

### Install Angular Component

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Install the Angular component package using npm.

```sh
npm install @intl-tel-input/angular
```

--------------------------------

### Install the intl-tel-input Vue package

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vue_component.md

Use npm to install the Vue component package.

```sh
npm install @intl-tel-input/vue
```

--------------------------------

### Install Intl Tel Input Svelte Package

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/svelte_component.md

Install the Svelte component package using npm.

```sh
npm install @intl-tel-input/svelte
```

--------------------------------

### utils.getExampleNumber

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Retrieves an example phone number for a given country, number type, and format. It returns an empty string if no example is available for the specified criteria.

```APIDOC
## utils.getExampleNumber

### Description
Get an example number for the given country and [`NumberType`](/docs/types#numbertype), in the given [`NumberFormat`](/docs/types#numberformat). Returns an empty string if no example exists.

### Method Signature
`(iso2: string | undefined, numberType: NumberType, format: NumberFormat) => string`

### Parameters
* **iso2** (string | undefined) - The ISO 3166-1 alpha-2 country code (e.g., "us", "gb").
* **numberType** (NumberType) - The type of number to get an example for (e.g., "MOBILE", "FIXED_LINE").
* **format** (NumberFormat) - The desired format for the example number (e.g., "INTERNATIONAL", "NATIONAL", "E164").

### Request Example
```js
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "INTERNATIONAL"); // "+44 7400 123456"
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "NATIONAL"); // "07400 123456"
intlTelInput.utils.getExampleNumber("gb", "MOBILE", "E164"); // "+447400123456"
```
```

--------------------------------

### Basic Vue Component Setup

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vue_component.md

Import the component and its styles, then use it in your template. The utils script is loaded separately via dynamic import.

```html
<script setup>
  import IntlTelInput from "@intl-tel-input/vue";
  import "intl-tel-input/styles";
</script>

<template>
  <IntlTelInput
    initial-country="us"
    :load-utils="() => import('intl-tel-input/utils')"
  />
</template>
```

--------------------------------

### Vanilla JavaScript Initialization

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/playground_content.html

Example of initializing intl-tel-input with custom options in vanilla JavaScript.

```javascript
const input = document.querySelector('#phone');
window.intlTelInput(input, {
  // options here
});
```

--------------------------------

### Vue Component Initialization

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/playground_content.html

Example of initializing intl-tel-input within a Vue component.

```javascript
<template>
  <vue-tel-input
    v-model="phone"
    class="my-class"
    @input="onInput"
  ></vue-tel-input>
</template>

<script>
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';

export default {
  components: { VueTelInput },
  data() {
    return {
      phone: '',
    };
  },
  methods: {
    onInput(formattedNumber, dialCode, isValid) {
      console.log(formattedNumber, dialCode, isValid);
    },
  },
};
</script>
```

--------------------------------

### Basic Angular Component Setup

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Integrate the IntlTelInput component into an Angular module, importing necessary modules and defining the template with initial country and utility script loading.

```ts
import IntlTelInput from "@intl-tel-input/angular";
import "intl-tel-input/styles";

@Component({
  imports: [IntlTelInput],
  template: `<intl-tel-input initialCountry="us" [loadUtils]="loadUtils" />`,
})
export class PhoneInputComponent {
  loadUtils = () => import("intl-tel-input/utils");
}
```

--------------------------------

### React Component Initialization

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/playground_content.html

Example of initializing intl-tel-input within a React component.

```javascript
import IntlTelInput from 'react-intl-tel-input';
import 'react-intl-tel-input/dist/main.css';

function App() {
  return (
    <IntlTelInput
      containerClassName="intl-tel-input"
      // props here
    />
  );
}
```

--------------------------------

### Angular Component Initialization

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/playground_content.html

Example of initializing intl-tel-input within an Angular component.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '< போலவே-tel-input [(ngModel)]="telInputModel"></ போலவே-tel-input>',
})
export class AppComponent {
  telInputModel: any;
}
```

--------------------------------

### Svelte Component Initialization

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/playground_content.html

Example of initializing intl-tel-input within a Svelte component.

```javascript
import intlTelInput from 'intl-tel-input';

let node;

$: if (node) {
  intlTelInput(node, {
    // options
  });
}
```

--------------------------------

### Get Extension

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Get the extension from the current number. Requires the utils script to be loaded.

```javascript
const extension = iti.getExtension();
```

--------------------------------

### Get Instance from Input Element

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Access an existing intl-tel-input instance by providing the associated HTML input element. This is useful for re-interacting with a previously initialized plugin, for example, to call methods like isValidNumber.

```javascript
const input = document.querySelector('#phone');
const iti = intlTelInput.getInstance(input);
iti.isValidNumber(); // etc
```

--------------------------------

### Handle Strict Reject Reason

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/react_component.md

Provides an example of how to handle the onStrictReject prop to display user-facing messages based on the rejection reason.

```js
if (reason === "max-length") msg = "Maximum length reached for this country";
else if (source === "paste") msg = "Stripped invalid characters from pasted text";
else msg = `Character not allowed: "${rejectedInput}"`;
```

--------------------------------

### General Dark Mode Styling

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/theming.md

This example shows general dark mode styling for body and input elements, which should be in place before applying the library's specific dark mode styles.

```css
@media (prefers-color-scheme: dark) {
  body, input {
    color: #dee2e6;
    background-color: #212529;
  }
  input {
    border-color: #495057;
  }
  input::placeholder {
    color: #666;
  }
}
```

--------------------------------

### Set Placeholder Number Policy

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

Configure how the input's placeholder is set with an example number. Options include 'POLITE', 'AGGRESSIVE', and 'OFF'. Requires the utils script.

```javascript
"POLITE"
```

--------------------------------

### Custom Placeholder Function

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

Use a function to dynamically set the placeholder text based on the example number and selected country. Guards against null selectedCountry.

```javascript
(exampleNumber, selectedCountry) => exampleNumber
  ? exampleNumber.replace(/\d/g, "X")
  : "Enter number"
```

--------------------------------

### Initialize and Configure intl-tel-input

Source: https://github.com/jackocnr/intl-tel-input/blob/master/demo/index.html

Initializes the intl-tel-input plugin with various configuration options for input validation and country selection. This setup is crucial for enabling advanced features like custom placeholders and hidden input fields.

```javascript
const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");

const iti = window.intlTelInput(input, {
  // allowedNumberTypes: ["TOLL_FREE"],
  // allowNumberExtensions: true,
  // allowPhonewords: true,
  // containerClass: "test",
  // countryNameLocale: "ru",
  // countryOrder: ["jp", "kr"],
  // countrySearch: false,
  // countrySelectorMode: "OFF", // "OFF" / "DROPDOWN" / "FULLSCREEN" / "AUTO"
  // customPlaceholder: (exampleNumber, selectedCountry) => exampleNumber ? exampleNumber.replace(/\d/g, "X") : "Enter number",
  // dropdownParent: document.body,
  // excludeCountries: ["us"],
  // formatAsYouType: false,
  // hiddenInputs: () => ({ phone: "phone_full", country: "country_iso2" }),
  // initialCountry: "us",
  // initialCountryLookup: async () => {
  //   const res = await fetch("https://ipapi.co/json");
  //   const data = await res.json();
  //   return data.country_iso2;
  // },
  // loadUtils: () => import("/packages/core/dist/js/utils.js"), // leading slash (and http-server) required for this to work in chrome
  // matchDropdownWidth: false,
  // numberDisplayFormat: "INTERNATIONAL", // "E164" / "INTERNATIONAL" / "NATIONAL"
  // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
  // placeholderNumberPolicy: "OFF",
  // placeholderNumberType: "MOBILE",
  searchInputClass: "form-control",
  // separateDialCode: true,
  // showFlags: false,
  // strictMode: true,
  // strictRejectAnimation: true,
  // uiTranslations: { searchPlaceholder: "Custom search" },
});

window.iti = iti; // useful for testing
```

--------------------------------

### Set Initial Country by ISO2 Code

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

Set the default selected country using its ISO2 code. If not set and no lookup is performed, the input starts in a neutral state.

```javascript
initialCountry: "de"
```

--------------------------------

### Access Instance Methods via ViewChild

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Shows how to get a reference to the component's instance methods like setSelectedCountry using a ViewChild reference and getInstance().

```typescript
// Example usage within a component:
// this.ref.getInstance().setSelectedCountry(...);
```

--------------------------------

### Bind Native Input Events in Angular

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Example of binding directly to common native DOM events like blur, focus, keydown, keyup, and paste using Angular's event binding syntax.

```html
<intl-tel-input
  (blur)="handleBlur($event)"
  (focus)="handleFocus($event)"
  (keydown)="handleKeyDown($event)"
  (paste)="handlePaste($event)"
/>
```

--------------------------------

### Initialize intl-tel-input with specific country

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-narrow.html

Initializes the intl-tel-input plugin on a given input element. Use this to set a default country for the input, which can be useful for pre-filling or guiding user input.

```javascript
const input = document.querySelector('#phone'); // Longest English country name: "Saint Vincent and the Grenadines" window.iti = window.intlTelInput(input, {
  initialCountry: "vc"
});
```

--------------------------------

### Apply Dark Mode Styles

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/theming.md

Override CSS variables within a media query to apply dark mode styles. This example targets common variables for borders, backgrounds, icons, and hover states.

```css
@media (prefers-color-scheme: dark) {
  :root {
    --iti-border-color: #495057;
    --iti-country-selector-bg: #212529;
    --iti-icon-color: #dee2e6;
    --iti-hover-color: #30363d;
  }
}
```

--------------------------------

### Set Placeholder Number Type - setPlaceholderNumberType

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Changes the `placeholderNumberType` option. It is recommended to use 'MOBILE', 'FIXED_LINE', or 'FIXED_LINE_OR_MOBILE' as these have example numbers for every country. You can also pass a constant object for plain JavaScript usage.

```javascript
iti.setPlaceholderNumberType("FIXED_LINE");
```

```javascript
iti.setPlaceholderNumberType(intlTelInput.NUMBER_TYPE.FIXED_LINE)
```

--------------------------------

### Get All Countries Data

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Retrieve the complete list of countries supported by the library. This data can be used to build custom country selectors or to modify country information before initializing the core library. Each country entry conforms to the Country type definition.

```javascript
const countries = intlTelInput.getAllCountries();
```

--------------------------------

### Build Website

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/README.md

Navigate to the site/ directory and run this command to build the website.

```bash
npm run build
```

--------------------------------

### Initialize intl-tel-input with a bundler

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vanilla_javascript.md

Import the library and its styles, then initialize it on an input element. The utils script is loaded separately via dynamic import for lazy loading.

```javascript
import intlTelInput from "intl-tel-input";
import "intl-tel-input/styles";

const input = document.querySelector("#phone");
intlTelInput(input, {
  loadUtils: () => import("intl-tel-input/utils"),
});
```

--------------------------------

### Get Selected Country

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Get the currently selected Country, or else null if no country is currently selected.

```javascript
const country = iti.getSelectedCountry();
```

--------------------------------

### Get Number Type

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Get the NumberType (fixed-line/mobile/toll-free, etc) of the current number, or null if it can't be determined. Requires the utils script to be loaded.

```javascript
const numberType = iti.getNumberType();
if (numberType === "MOBILE" || numberType === "FIXED_LINE_OR_MOBILE") {
    // is (or could be) a mobile number
}
```

--------------------------------

### Get Validation Error

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Get more information about an invalid number. Returns a ValidationError string, or null if it can't be determined. Requires the utils script to be loaded.

```javascript
iti.getValidationError();
```

--------------------------------

### Get Number

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Get the current number in the given NumberFormat (defaults to "E164"). Requires the utils script to be loaded. This method expects a valid number and should only be used after validation.

```javascript
const number = iti.getNumber(); // defaults to "E164" e.g. "+17024181234"
// or
const number = iti.getNumber("INTERNATIONAL"); // e.g. "+1 702-418-1234"
```

--------------------------------

### Initialize intl-tel-input with script tag

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vanilla_javascript.md

Include the intl-tel-input JavaScript file from a CDN and initialize it on an input element. The utils script is also loaded from the CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/intlTelInput.min.js"></script>
<script>
  const input = document.querySelector("#phone");
  window.intlTelInput(input, {
    loadUtils: () => import("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/utils.js"),
  });
</script>
```

--------------------------------

### Highlight All Code Blocks

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/shared/common_body_end.html

Initializes syntax highlighting for all code blocks on the page using highlight.js.

```javascript
hljs.highlightAll();
```

--------------------------------

### Get Phone Number Extension

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Extracts the extension from a given phone number. Returns an empty string if no extension is found.

```javascript
intlTelInput.utils.getExtension("(702) 555-5555 ext. 1234", "us"); // "1234"
```

--------------------------------

### Watch for Changes

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/README.md

While developing, run this command in the site/ directory to automatically re-build the website when source files are edited.

```bash
npm run watch
```

--------------------------------

### Get Phone Number Type

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Determines the type of a phone number (e.g., fixed-line, mobile). Returns null if the type cannot be determined.

```javascript
intlTelInput.utils.getNumberType("7024181234", "us"); // "FIXED_LINE_OR_MOBILE"
```

--------------------------------

### Initialize PostHog Analytics in Production

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/shared/common_head_end_prod.html

Initializes PostHog analytics with a specific API key and host. This script is executed only if `window.__IS_EUROPE` is defined and false. Ensure the `__IS_EUROPE` variable is correctly set in your environment.

```javascript
const initPostHog = typeof window.__IS_EUROPE === "boolean" && !window.__IS_EUROPE;
if (initPostHog) {
  !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init ir nr qi rr ar Ze er capture calculateEventProperties dr register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty cr hr createPersonProfile setInternalOrTestUser pr Xe gr opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing lr debug At vr getPageViewId captureTraceFeedback captureTraceMetric Je".split(" "),n=0;n<o.length;n++)g(u,o[n])};e._i.push([i,s,a])}(document,window.posthog||[]);
 posthog.init('phc_ousZGP4WHTH1bs6BrGhZEyj91cUq1cK8bEBSyxTWNsa', { api_host: 'https://eu.i.posthog.com', defaults: '2026-01-30' });
}
```

--------------------------------

### Initialize intl-tel-input with Options

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/static/screenshot-separate.html

Initializes the intl-tel-input plugin on a specified input element. Configure initial country and search input class.

```javascript
const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "gb",
  searchInputClass: "form-control",
});
```

--------------------------------

### Get User-Facing Error Message

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/best_practices.md

Maps validation error codes to user-friendly messages. Requires the intl-tel-input library and the utils module.

```javascript
const getErrorMessage = (number, errorCode) => {
  if (!number) return "Please enter a number";
  const { VALIDATION_ERROR } = intlTelInput;
  switch (errorCode) {
    case VALIDATION_ERROR.INVALID_COUNTRY_CODE: return "Invalid dial code";
    case VALIDATION_ERROR.TOO_SHORT: return "Too short";
    case VALIDATION_ERROR.TOO_LONG: return "Too long";
    default: return "Invalid number";
  }
};
```

--------------------------------

### Initialize intl-tel-input with Dark Theme Options

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/static/screenshot-dark.html

Use this snippet to initialize the intl-tel-input plugin. It configures the dropdown to always be open and sets a specific class for the search input, suitable for dark themes.

```javascript
const input = document.querySelector("#phone");
window.intlTelInput(input, {
  dropdownAlwaysOpen: true,
  searchInputClass: "form-control",
});
```

--------------------------------

### Initialize Algolia DocSearch

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/shared/common_body_end.html

Configures and initializes Algolia DocSearch for site search functionality. Ensure the container, appId, indexName, and apiKey are correctly set.

```javascript
docsearch({
  container: "#docsearch",
  appId: "30NQZ1MMUC",
  indexName: "ITI Site",
  apiKey: "36bc251934d6bbefeb56f187686f4810",
});
```

--------------------------------

### setPlaceholderNumberType

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Changes the `placeholderNumberType` option. Valid values are defined in `NumberType`. It is recommended to use 'MOBILE', 'FIXED_LINE', or 'FIXED_LINE_OR_MOBILE' as these have example numbers for every country.

```APIDOC
## setPlaceholderNumberType

### Description
Changes the [`placeholderNumberType`](/docs/options#placeholdernumbertype) option.

### Method Signature
`(type: NumberType) => void`

### Parameters
- **type** (NumberType) - The type of number to use for the placeholder (e.g., "MOBILE", "FIXED_LINE"). Constants like `intlTelInput.NUMBER_TYPE.FIXED_LINE` can also be used.

### Usage Example
```js
iti.setPlaceholderNumberType("FIXED_LINE");
// Or using constants:
iti.setPlaceholderNumberType(intlTelInput.NUMBER_TYPE.FIXED_LINE);
```

### Related Types
- [`NumberType`](/docs/types#numbertype)
- [`Constant objects`](/docs/types#constant-objects)
```

--------------------------------

### Using Intl-tel-input with Initial Country Option

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Configure the initial country for the phone input component by passing the 'initialCountry' option as a direct input.

```html
<intl-tel-input initialCountry="us" />
```

--------------------------------

### Initialize intl-tel-input with Fullscreen Mode

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-country-selector-mode-fullscreen.html

Initializes the intl-tel-input plugin on an input element, enabling the fullscreen country selector mode. Ensure the HTML input element with the ID 'phone' exists.

```javascript
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input, {
  countrySelectorMode: "FULLSCREEN"
});
```

--------------------------------

### Get Phone Number Validation Error

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Provides detailed information about why a phone number is invalid. Returns a ValidationError string or null if the number is valid or the error cannot be determined.

```javascript
intlTelInput.utils.getValidationError("702", "us"); // "TOO_SHORT"
```

--------------------------------

### Initialize intl-tel-input with matchDropdownWidth: false

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-match-dropdown-width-false.html

Initializes the intl-tel-input plugin on a given input element. Set matchDropdownWidth to false to prevent the dropdown from matching the input's width.

```javascript
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input, {
  matchDropdownWidth: false
});
```

--------------------------------

### Initialize intl-tel-input

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-bottom.html

Instantiate the intl-tel-input plugin on a given input element. Ensure the input element exists in the DOM before calling this function.

```javascript
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input);
```

--------------------------------

### Theme Detection and Dynamic Update

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/static/screenshot-mobile.html

Detects the user's system color scheme preference (light or dark) and applies it to the document's theme. It also sets up an event listener to update the theme dynamically if the user changes their system settings while the page is open.

```javascript
const setTheme = () => {
  const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  document.documentElement.setAttribute('data-bs-theme', theme);
};

// Run on load
setTheme();

// Update dynamically if the user changes system settings while on your page
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setTheme);
```

--------------------------------

### Initialize intl-tel-input with Mobile Options

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/static/screenshot-mobile.html

Initializes the intl-tel-input plugin on a given input element. Configured for mobile with fullscreen country selector and custom search input class.

```javascript
const input = document.querySelector("#phone");
window.intlTelInput(input, {
  countrySelectorMode: "FULLSCREEN",
  searchInputClass: "form-control",
});
```

--------------------------------

### getInstance

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Retrieves an existing instance of the intl-tel-input plugin associated with a given input element. This is useful for interacting with an already initialized plugin.

```APIDOC
## getInstance

### Description
After initialising the core library, you can always access the instance again using this method, by just passing in the relevant input element.

### Method Signature
`(input: HTMLInputElement) => Iti | null`

### Example
```js
const input = document.querySelector('#phone');
const iti = intlTelInput.getInstance(input);
iti.isValidNumber(); // etc
```
```

--------------------------------

### Await Utils Script Loading

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Methods that require the utils script will throw if called before it has finished loading. Always await iti.promise first.

```javascript
await iti.promise;
const number = iti.getNumber();
```

--------------------------------

### Basic React Component Usage

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/react_component.md

Import and use the IntlTelInput component in your React application. The utils script is loaded separately via dynamic import.

```jsx
import IntlTelInput from "@intl-tel-input/react";
import "intl-tel-input/styles";

const PhoneInput = () => (
  <IntlTelInput
    initialCountry="us"
    loadUtils={() => import("intl-tel-input/utils")}
  />
);
```

--------------------------------

### Get National Significant Number

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/utils.md

Extracts the national significant number (NSN) by stripping any international dial code and national prefix from the given phone number and ISO2 country code. Returns an empty string if parsing fails.

```javascript
intlTelInput.utils.getCoreNumber("+1 702-418-1234", "us"); // "7024181234"
```

--------------------------------

### Lazy Load Utils Script from a URL

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

Load the intl-tel-input utils module from a specified URL, such as a CDN or a self-hosted version of utils.js. This method is useful when not using a bundler or when you need to control the source of the utils script. The script is loaded asynchronously after the window's load event.

```javascript
() => import("https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/js/utils.js"),
```

--------------------------------

### Add intl-tel-input CSS via script tag

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vanilla_javascript.md

Include the intl-tel-input CSS file from a CDN when not using a bundler.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@29.1.2/dist/css/intlTelInput.css">
```

--------------------------------

### Lazy Load Utils Script with a Bundler

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

This function demonstrates how to lazily load the intl-tel-input utils module using dynamic import, suitable for modern bundlers like Webpack or Vite. The module is fetched only when needed, typically after the page has finished loading to avoid blocking the initial render.

```javascript
() => import("intl-tel-input/utils")
```

--------------------------------

### attachUtils

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

An alternative to the `loadUtils` option, this method allows you to load the utils.js script at your time of choosing. It returns a Promise that resolves when the script has finished loading.

```APIDOC
## attachUtils

### Description
An alternative to the [`loadUtils`](/docs/options#loadutils) option (which loads the utils.js script at initialisation time), this method allows you to load the utils at your time of choosing. See [Loading The Utils Script](/docs/utils#loading-the-utils-script) for more information. A [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object is returned so you can `await` it to know when it's finished.

> [!NOTE]
> This method should only be called once per page - it will return `null` if utils have already been loaded, or are in the process of being loaded.

### Method Signature
`(source: () => Promise<unknown>) => Promise<unknown> | null`

### Example
```js
const loadUtils = () => import("/dist/js/utils.js");
await intlTelInput.attachUtils(loadUtils);
// you can now call methods that use utils
```
```

--------------------------------

### Initialize intl-tel-input with RTL and Arabic locale

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-rtl.html

Initializes the intl-tel-input plugin with Arabic translations and sets the initial country to Saudi Arabia, configured for Arabic locale display. This is useful for applications targeting Arabic-speaking regions.

```javascript
import ar from "/packages/core/dist/js/locale/ar.js";
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input, {
  uiTranslations: ar,
  initialCountry: "sa",
  countryNameLocale: "ar"
});
```

--------------------------------

### Attach Utils Script Dynamically

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/methods.md

Use this method to load the utils.js script at a chosen time, offering an alternative to the loadUtils option. It returns a Promise that resolves when the script is loaded, allowing you to await its completion. This method should only be called once per page.

```javascript
const loadUtils = () => import("/dist/js/utils.js");
await intlTelInput.attachUtils(loadUtils);
// you can now call methods that use utils
```

--------------------------------

### Vue Component with Initial Country Option

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/vue_component.md

Shows how to set the initial country for the phone input component using the 'initial-country' prop.

```js
<IntlTelTelInput initial-country="us" />
```

--------------------------------

### Basic Svelte Component Usage

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/svelte_component.md

Integrate the IntlTelInput component into your Svelte application, specifying the initial country and loading utility functions.

```html
<script>
  import IntlTelInput from "@intl-tel-input/svelte";
  import "intl-tel-input/styles";
</script>

<IntlTelInput
  initialCountry="us"
  loadUtils={() => import("intl-tel-input/utils")}
/>
```

--------------------------------

### Access Static Methods

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/angular_component.md

Demonstrates how to import and use the core library's static methods, such as getAllCountries, directly within your Angular component.

```typescript
import { intlTelInput } from "@intl-tel-input/angular";

// Example usage:
// intlTelInput.getAllCountries()
```

--------------------------------

### Initialize intl-tel-input with Separate Dial Code

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-separate-dial-code-long.html

Use this configuration to enable the separation of the dial code into its own element. This is useful for styling or when you need to access the dial code independently. The 'uz' country code is used to demonstrate a longer dial code.

```javascript
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input, {
  separateDialCode: true,
  initialCountry: "uz"
});
```

--------------------------------

### Import UI Translations

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/localisation.md

Import locale-specific UI translation modules from 'intl-tel-input/locale' to translate user interface strings like placeholders and labels. This ensures consistent localisation across browsers.

```js
import { fr } from "intl-tel-input/locale";
```

--------------------------------

### Initialize intl-tel-input with separateDialCode

Source: https://github.com/jackocnr/intl-tel-input/blob/master/tests-e2e/fixtures/vanilla-separate-dial-code.html

Use this snippet to initialize the intl-tel-input plugin with the `separateDialCode` option set to true. This separates the country's dial code into its own element, allowing for more flexible form layouts. Ensure the target input element exists in the DOM.

```javascript
const input = document.querySelector('#phone');
window.iti = window.intlTelInput(input, {
  separateDialCode: true,
  initialCountry: "us"
});
```

--------------------------------

### Set preferred countries with countryOrder option

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/faq.md

Use the `countryOrder` option to specify the order of preferred countries. This replaces the legacy `preferredCountries` option.

```javascript
preferredCountries: ["us", "gb"]
```

```javascript
countryOrder: ["us", "gb"]
```

--------------------------------

### Order Countries by ISO2 Codes

Source: https://github.com/jackocnr/intl-tel-input/blob/master/site/src/docs/markdown/options.md

Specify an array of ISO2 codes to control the order of countries in the list. Any countries not listed will appear alphabetically after the specified ones.

```javascript
countryOrder: ["jp", "kr"]
```