# Vanilla UI Kit Phone Input
A single-file, zero-dependency international phone input for vanilla
JavaScript, in the spirit of Maz-UI's phone number input: country button
with an SVG flag and dial code, searchable country dropdown, as-you-type
national formatting, built-in validation and E.164 output. Follows your
page's light/dark theme automatically, in the same visual family as
[Vanilla UI Kit DatePicker](../datepicker/README.md) and
[Toast](../toast/README.md).
**[Live examples →](./examples.html)**
## Quick start
```html
```
Or zero-JS via data attributes:
```html
```
Also available via the family bundle (`dist/vanilla-ui-kit.js`), npm
(`vanilla-ui-kit/phone`), or by copying this one file. CommonJS/AMD
supported; SSR-safe (constructing without a DOM returns an inert handle,
and the pure helpers below work fine in Node).
## API
### Instance
```js
var phone = new PhoneInput(target, opts)
// target: an (coerced to type="tel"), or any container —
// then the control is built inside it, with a hidden input carrying
// opts.name for form submission.
phone.getValue() // → { e164, national, country, valid }
phone.setValue('+971501234567') // sets country (from dial code) + number
phone.setCountry('ae') // switch the flag/dial code
phone.getCountry() // → 'ae'
phone.setDisabled(true)
phone.open() / .close() // country dropdown
phone.focus()
phone.destroy() // unwraps the original input, removes everything
PhoneInput.create(target, opts) // constructor alias
PhoneInput.get(el) // instance registry lookup
PhoneInput.autoInit(root?) // init every [data-vph] under root
```
Typing `+` followed by a dial code auto-detects the country
(longest-prefix match, area-code aware for shared codes like +1/+7/+44)
and switches the flag; pasting `+9715…` does the same. Input is
restricted to digits and `+ ( ) - . space`.
### Pure helpers (work in Node)
```js
PhoneInput.parse('+971501234567')
// → { country: 'ae', dialCode: '+971', national: '50 123 4567',
// e164: '+971501234567', valid: true }
PhoneInput.format('4155552671', 'us') // → '(415) 555-2671'
PhoneInput.isValid('+14155552671', 'us') // → true
PhoneInput.exampleNumber('gb') // → '1234 567891'
PhoneInput.countries // the full data table
PhoneInput.flag('ae') // → '