Svelte Tel Input

Lightweight svelte tel/phone input standardizer.

🔥 Check it out live here

Installation

Svelte Tel Input is distributed via npm.

npm install --save svelte-tel-input

Features

Parse and validate phone number.You can store one exact format (E164), no matter how users type their phone numbers.
Format (specified to its country), to make it more readable.
Prevent non-digits typing into the input, except the leading + sign (and space optionally).
Handle copy-pasted phone numbers, it's sanitize non-digit characters except the leading + sign (and space optionally).
Automatic placeholder generation for the selected country.

Usage

Basic

REPL (StackBlitz)

<script lang="ts">
	import { IonTelInput, normalizedCountries } from 'svelte-tel-input';
	import type { NormalizedTelNumber, CountryCode, E164Number } from 'svelte-tel-input/types';

	// Any Country Code Alpha-2 (ISO 3166)
	let country: CountryCode | null = 'HU';

	// You must use E164 number format. It's guarantee the parsing and storing consistency.
	let value: E164Number | null = '+36301234567';

    // Validity
    let valid = true;

	// Optional - Extended details about the parsed phone number
	let parsedTelInput: NormalizedTelNumber | null = null;
</script>

<div class="wrapper">
	<select
		class="country-select {!valid && 'invalid'}"
		aria-label="Default select example"
		name="Country"
		bind:value={selectedCountry}
	>
		<option value={null} hidden={selectedCountry !== null}>Please select</option>
		{#each normalizedCountries as country (country.id)}
			<option
				value={country.iso2}
				selected={country.iso2 === selectedCountry}
				aria-selected={country.iso2 === selectedCountry}
			>
				{country.iso2} (+{country.dialCode})
			</option>
		{/each}
	</select>
    <IonTelInput bind:country bind:value bind:valid bind:parsedTelInput class="basic-tel-input {!isValid && 'invalid'}" />
</div>

<style>
  .wrapper :global(.basic-tel-input) {
      height: 32px;
      padding-left: 12px;
      padding-right: 12px;
      border-radius: 6px;
      border: 1px solid;
      outline: none;
  }

  .wrapper :global(.country-select) {
      height: 36px;
      padding-left: 12px;
      padding-right: 12px;
      border-radius: 6px;
      border: 1px solid;
      outline: none;
  }

  .wrapper :global(.invalid) {
    border-color: red;
  }
</style>

(back to top)

Props

The default export of the library is the main TelInput component. It has the following props:

Props	Type	Default Value	Usage
country	`CountryCode \| null`	`null`	It's accept any Country Code Alpha-2 (ISO 3166). You can set manually (e.g: by the user via a select). The parser will inspect the entered phone number and if it detect a valid country calling code, then it's automatically set the country to according to the detected country calling code. E.g: `+36` -> `HU`
disabled	`boolean`	`false`	It's block the parser and prevent entering input. You must handle its styling on your own.
valid	`boolean`	`true`	Indicates whether the entered tel number validity.
value	`E164Number \| null`	`null`	E164 is the international format of phone.numbers. This is the main entry point to store and/or load an existent phone number.
parsedTelInput	`NormalizedTelInput \|null`	`null`	All of the formatted results of the tel input.
class	`string`	``	You can pass down any classname to the component
autoPlaceholder	`boolean`	`true`	Generates country specific placeholder for the selected country.something
allowSpaces	`boolean`	`true`	Allow or disallow spaces in the input field

(back to top)

Goals

Solve the problem that a users can enter the same phone number in different formats.
Storing a phone number in a standard format, that can be indexable and searchable in any database.
Should be accessible for the the browser. Eg. for a <a href="tel+36201234567 />.
The stored phone number format can be useable for any SMS gateway(e.g for 2FA) and if somebody can call the number from anywhere, it should work.