Phone Input

The phone input method in Mod attaches event listeners for phone number inputs and handles interaction events including country selection and number formatting.

// Using mod(-plus).iife.min.js
window.mod.phone_input(options: object);

// Using mod(-plus).esm.min.js
import { phone_input } from 'path/to/mod(-plus).esm.min.js';
phone_input(options: object);

Usage Examples

Use the following usage examples to guide your implementation.

<div class="mod-phone-input">
  <div class="mod-select-input">
    <select class="mod-input" name="country"></select>
    <i class="mod-icon-chevron-down"></i>
  </div>
  <div class="mod-capped-input">
    <div class="mod-input-cap"></div>    
    <input type="tel" class="mod-input" placeholder="Phone Number" />
  </div>
</div>

window.mod.phone_input({
  country_code: 'US',
  value: '+15551234567',
  events: {
    on_change: (data = {}) => {
      console.log('Country:', data.country_code);
      console.log('Full number:', data.value);
      console.log('Formatted:', data.formatted_value);
    },
  }
});

API

options object

An object containing options for the phone input.

country_code string

The default country code to use (e.g., 'US', 'GB', 'CA'). Defaults to 'US'.

value string

Initial phone number value including country code (e.g., '+15551234567').

elements array

Array of specific phone input elements to initialize. If not provided, all .mod-phone-input elements on the page will be initialized.

events object

An object containing event listeners for the phone input.

on_change function

A function called when the phone number or country changes. Receives an object with country_code, value (full number with country code), and formatted_value (display format).