Skip to content
omaris · Learn
Inputs

Phone Input

A phone field that stores E.164 and lets people type a national number.

Full reference: every prop and when to use it →

Walkthrough

1. Basic

The value is stored as E.164 and typed as a national number, so nobody has to type the dial code and nobody can mistype it.

Stored as +9647701234567

<script lang="ts">	import { PhoneInput } from 'omaris';​	let phone = $state('+9647701234567');</script>​<div class="flex w-80 max-w-full flex-col gap-2">	<PhoneInput label="Mobile" bind:value={phone} />	<p class="text-body-sm text-muted-foreground">		Stored as <code class="text-foreground">{phone || '(empty)'}</code>	</p></div>

2. Pasting and validation

Pasting a full international number switches the country and keeps the digits — +90 …, 0090 … and 00964 … all work. validate shows the incomplete message on blur.
Anything goes. 
<script lang="ts">	import { PhoneInput } from 'omaris';​	let a = $state('');	let b = $state('');</script>​<PhoneInput class="w-72 max-w-full" label="Try pasting +90 532 123 4567" bind:value={a} /><PhoneInput	class="w-72 max-w-full"	label="Without validation"	validate={false}	bind:value={b}	supportingText="Anything goes."/>