Basic

<div class="demo">
  <div class="demo-field">
    <label class="demo-label" for="phone">Phone number</label>
    <input id="phone" autocomplete="tel">
    <p class="demo-hint">Paste <span class="demo-chip" data-try>+44 (0)7400 123456</span> or <span class="demo-chip" data-try>+1 204 555 0100</span></p>
  </div>
  <dl class="demo-kv">
    <div><dt>getNumber()</dt><dd id="e164">—</dd></div>
    <div><dt>reason</dt><dd id="status">—</dd></div>
    <div><dt>type</dt><dd id="type">—</dd></div>
    <div><dt>country</dt><dd id="country">—</dd></div>
  </dl>
</div>

import { createPhoneInput } from 'https://www.devix.pk/cdn/oss/phone-input@1.2.0/index.js';

const phone = createPhoneInput(document.getElementById('phone'), {
  initialCountry: 'ae',
  preferredCountries: ['ae', 'sa', 'pk', 'gb', 'us'],
});

const show = (result) => {
  document.getElementById('e164').textContent = result.e164 ?? '—';
  const status = document.getElementById('status');
  status.textContent = result.reason;
  status.style.color = result.valid ? 'var(--demo-ok)' : result.reason === 'empty' ? '' : 'var(--demo-danger)';
  document.getElementById('type').textContent = result.valid ? result.type : '—';
  document.getElementById('country').textContent = phone.getCountry().name;
};
phone.input.addEventListener('dx:phonechange', (e) => show(e.detail));
phone.ready.then(() => show(phone.getResult()));
document.querySelectorAll('[data-try]').forEach((chip) => chip.addEventListener('click', () => phone.setNumber(chip.textContent)));

@import url('https://www.devix.pk/cdn/oss/phone-input@1.2.0/phone-input.min.css');
.demo-kv dd { font-family: var(--demo-mono); font-size: 12px; }