@bgunnarsson/tel-input NPM

@bgunnarsson/tel-input

TelInput is a customizable telephone input field with dropdown country selection.

Features

Automatic dropdown with country codes and flags.
Priority and exclusion of specific countries.
Searchable dropdown for quick country lookup.

Installation

pnpm install @bgunnarsson/tel-input

npm install @bgunnarsson/tel-input
yarn add @bgunnarsson/tel-input

Usage

Basic Setup

import TelInput from './path/to/tel-input.js';

const telInput = new TelInput({
  target: '.tel-input',
  wrapper: '.tel-input-wrapper',
  country: 'us', // Default country ISO code
  code: '+1', // Default country code
  exclude: ['fr', 'de'], // Countries to exclude
  priority: ['us', 'ca'], // Priority countries
  search: {
    placeholder: 'Search countries...'
  }
});

HTML Structure

<div class="tel-input">
  <div class="tel-input-wrapper">
    <input type="text" placeholder="Enter phone number">
  </div>
</div>

Config Options

Option	Type	Default	Description
`target`	`string`	`.bg-telinput`	CSS selector for the target input container.
`wrapper`	`string`	`.bg-telinput__input-wrap`	CSS selector for the input wrapper.
`country`	`string`	`is`	Default country ISO code.
`code`	`string`	`+354`	Default country code.
`exclude`	`array`	`[]`	Array of ISO codes to exclude.
`priority`	`array`	`[]`	Array of priority ISO codes.
`search.placeholder`	`string`	`''`	Placeholder text for the search input.

Example

<div class="tel-input">
  <div class="tel-input-wrapper">
    <input type="text" placeholder="Enter phone number">
  </div>
</div>

const telInput = new TelInput({
  target: '.tel-input',
  wrapper: 'tel-input-wrapper',
  country: 'is',
  code: '+354',
  priority: ['is', 'us', 'gb'],
  exclude: ['al', 'af'],
  search: {
    placeholder: 'Search countries...'
  }
});