Phone Input
An international phone number input with country selector and validation.
<script lang="ts">
import { PhoneInput } from "$lib/components/ui/phone-input";
let value = $state("");
let valid = $state(true);
</script>
<div class="flex w-full max-w-xs flex-col gap-2">
<PhoneInput
defaultCountry="US"
bind:value
bind:valid
placeholder="Enter a phone number"
/>
{#if value}
<p class="text-xs tracking-[-0.3px] text-(--text)/56">
{valid ? "Valid" : "Invalid"} · {value}
</p>
{/if}
</div>Parsing, formatting, and validation are handled by svelte-tel-input (a libphonenumber wrapper) — lily only styles it.
Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initAdd the dependencies, then copy the source into $lib/components/ui/phone-input.
npm install svelte-tel-input country-flag-iconsUsage
<script lang="ts">
import { PhoneInput } from '$lib/components/ui/phone-input';
let value = $state('');
let valid = $state(true);
</script>
<PhoneInput defaultCountry="US" bind:value bind:valid />