svelte-tel-input

A headless, fully customizable Svelte 5 phone input toolkit. All the ingredients to parse, format, and validate international phone numbers — you build the UI. Store in E.164. Ship with any CSS framework, design system, or custom markup.

Documentation · Playground · Changelog

---

Features

• E.164 storage — one canonical format, always searchable and SMS-ready
• Auto-detect country from dial code (+44 → GB)
• Smart formatting — international display with cursor position preservation
• Validation — powered with granular error types
• Auto placeholder — country-specific example numbers
• Allowed countries — restrict to a subset of country codes
• Lock country — prevent country switching via dial codes
• Schema validation — Zod / Valibot / Yup helpers via svelte-tel-input/validators
• SSR / SSG compatible
• Svelte 5 runes — $bindable props, $state, $derived
• Accessible — aria-invalid auto-set, ARIA attribute passthrough, type="tel"
• Headless & unstyled — zero built-in styles; bring Tailwind, CSS Modules, or plain CSS
• Fully customizable UI — you own the markup; the library owns the logic

Install

npm install svelte-tel-input
# or
pnpm add svelte-tel-input
# or
yarn add svelte-tel-input

Requires Svelte 5 and Node.js >= 22

Quick start

<script lang="ts">
  import { TelInput, countries } from 'svelte-tel-input';
  import type { CountryCode } from 'svelte-tel-input/types';

  let country: CountryCode | null = $state('HU');
  let value = $state('');
  let valid = $state(true);
</script>

<select bind:value={country} aria-label="Country">
  <option value={null}>Select country</option>
  {#each countries as c (c.id)}
    <option value={c.iso2}>{c.name} (+{c.dialCode})</option>
  {/each}
</select>

<TelInput bind:country bind:value bind:valid />

{#if !valid}
  <p role="alert">Invalid phone number</p>
{/if}

See the Quick Start guide for a complete walkthrough.

Documentation

Full API reference, options, events, types, and examples are on the documentation site:

• Installation
• Props
• Options
• Events / Callbacks
• API Methods
• Validators
• Utilities
• Types
• Assets
• Playground

Support

License

MIT

Acknowledgements

Phone number parsing and validation is powered by libphonenumber-js by catamphetamine and its contributors. This project wouldn't be possible without their work. Thank you for their work.