svelte-tel-input

svelte-tel-input

A Svelte component for international telephone number input with validation, formatting, and country selection.

Features

• International Support: Supports phone numbers from all countries with automatic country code detection
• Validation: Built-in validation for phone number formats
• Customizable: Allows customization of input appearance and behavior
• Lightweight: Minimal dependencies (uses libphonenumber-js for phone number handling)

Usage

<script>
  import TelInput from 'svelte-tel-input';
  let phoneNumber = '';
</script>

<TelInput bind:value={phoneNumber} />

Props

• value (String): The phone number value (two-way bindable)
• placeholder (String): Input placeholder text
• disabled (Boolean): Disables the input
• autoFormat (Boolean): Enables automatic formatting (default: true)
• defaultCountry (String): ISO2 country code for default country (e.g., "us")
• onlyCountries (Array): List of allowed country ISO2 codes
• preferredCountries (Array): List of preferred country ISO2 codes
• ignoredCountries (Array): List of country ISO2 codes to exclude
• dropdownOptions (Object): Customizations for the country dropdown

Events

• onInput: Triggered on phone number input
• onValidate: Triggered when phone number validation status changes
• onCountryChange: Triggered when selected country changes

Validation

The component provides validation information through the validate prop:

<TelInput bind:value bind:validate />

The validate object contains:

• valid (Boolean): Whether the number is valid
• country (Object): Selected country info
• number (Object): Parsed phone number details

Styling

The component can be styled using CSS variables:

:global(.tel-input) {
  --ti-border-color: #ccc;
  --ti-border-radius: 4px;
  --ti-height: 40px;
  /* ... */
}

Examples

Basic usage with validation:

<TelInput bind:value={phone} bind:validate={validation} />

{#if validation && !validation.valid}
  <