@bgunnarsson/tel-input

@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...'
  }
});

License

This project is licensed under the MIT License.