@campino/phone-input

Accessible phone input for vanilla JavaScript and Alpine.js. It formats numbers nationally while typing and stores valid numbers in E.164 format in the original form field.

Install

npm install @campino/phone-input

Import the component styles once in your application:

import "@campino/phone-input/style.css";

Vanilla JavaScript

import { PhoneInput } from "@campino/phone-input";

const input = document.querySelector<HTMLInputElement>("#phone");

if (input) {
  const phone = new PhoneInput(input, {
    defaultCountry: "SE",
    preferredCountries: ["SE", "NO", "DK", "FI"],
    locale: "sv",
  });

  // phone.value is E.164 when valid, otherwise the entered value.
}

The original input keeps its name and receives the submitted value. Native attributes including required, disabled, readonly, placeholder, autocomplete and relevant ARIA attributes are applied to the visible telephone input. Call destroy() to restore the original element.

Alpine.js

import Alpine from "alpinejs";
import { phonePlugin } from "@campino/phone-input";

Alpine.plugin(phonePlugin);
Alpine.start();

<div x-data="{ phone: '' }">
  <label for="phone">Phone number</label>
  <input
    id="phone"
    name="phone"
    x-model="phone"
    x-phone="{ defaultCountry: 'SE', preferredCountries: ['SE', 'NO'] }"
  />
</div>

Without options, the component defaults to Sweden and Swedish labels. Use getPhoneInput(input) to retrieve the PhoneInput instance created by the Alpine directive.

Options

| Option | Type | Default | Description | | -------------------- | ------------------------ | ------- | -------------------------------------------------- | | defaultCountry | CountryCode | "SE" | Country used for national parsing and formatting. | | preferredCountries | readonly CountryCode[] | [] | Countries shown first in the picker. | | locale | "sv" \| "en" | "sv" | Language used for country names and picker labels. |

Styling

Override the component's CSS custom properties in your application:

:root {
  --cp-font-family: inherit;
  --cp-focus-color: #176b4d;
  --cp-picker-max-height: 20rem;
  --cp-picker-min-width: 20rem;
}

All component class names use the cp- prefix.

Development

vp install
vp check
vp test
vp run playground
vp pack

License

MIT