Skip to content
omaris

Inputs

Phone Input

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

import { PhoneInput } from 'omaris'
Learn

Examples

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>

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."/>

When to use it

Use it for

  • A phone number with a country: sign-up, a customer record, a delivery contact. value is E.164, like +9647701234567, ready for an SMS or WhatsApp API without parsing.
  • A form where most numbers are from one place. country defaults to IQ and the picker covers the rest.
  • Pasted numbers in any shape. +90 …, 0090 … and 00964 … all switch the country and keep the digits.

Not for

  • An Iraqi mobile number that never leaves the country → Text Field with format="phone", which groups it as 0770 123 4567 and stores the local form.
  • A verification code → Text Field with format="code" or numeric.
  • An extension, a short code or a PIN → Text Field with format="integer".
  • A number that is shown, not edited → Text.

Do

  • Leave validate on. The incomplete message appears on blur, once, not on every keystroke.
  • Pass countries limited to the ones you serve. The picker gets shorter and a pasted number is matched against fewer dial codes.
  • Give it a name in a plain <form>. The E.164 value is what is posted.
  • bind:country when the rest of the form follows it: the address country, the currency of a Price Input.

Don't

  • Set your own placeholder unless you must. The country's example number is the placeholder, and it changes with the country.
  • Store the formatted text. value is the canonical string; the national formatting is for the eye.
  • Add your own regex with invalid. The field knows each country's length; a second rule usually rejects a real number.
Pairs with Text Field Select Price Input Button

API

PhoneInput

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

The dial code lives in the country picker rather than the field, so nobody types +964 and nobody can mistype it. Pasting a full international number works too: +90 …, 0090 … and 00964 … all switch the country.

import { PhoneInput } from 'omaris'

Parts

Every element this renders is reachable from outside. Pass Tailwind for one part as classes={{ part: '…' }}; class covers the root and is merged last, so it always wins.

root
Wrapper: label, field, supporting text.
field
The frame: border, background, height, adornment layout.
control
The bare <input>; the frame owns every decoration.
label
No description in the source yet.
adornment
Icon slots at either end of the frame.
affix
Flat text glued to the value — "https://", "kg".
action
An interactive trailing control: reveal, clear.
support
Helper line under the field, and the counter beside it.
counter
No description in the source yet.

Props

value bindable

Defaults to ''

string

The number in E.164 — +9647701234567. Bindable, '' when empty.

country bindable

Defaults to 'IQ'

string

Selected country, as an ISO code. Bindable.

countries

Defaults to COUNTRIES

Country[]

Countries offered in the picker.

variant

Defaults to 'outline'

InputVariant
size

Defaults to 'default'

InputSize
label
string
supportingText
string
invalid
boolean

Forces the error state. Otherwise the field checks itself on blur — and, inside a Field, is invalid while the field is.

incompleteMessage

Defaults to 'That number looks incomplete.'

string

Shown when a half-typed number is left behind.

validate

Defaults to true

boolean

Turn off the on-blur completeness check.

disabled
boolean

Inside a Field, defaults to the field's.

readonly

Defaults to false

boolean
required
boolean

Inside a Field, defaults to the field's.

placeholder
string

Overrides the country's own example number.

id
string
name
string

Posts the E.164 value under this name.

class
string
classes
InputClasses

Per-part Tailwind overrides, forwarded to the Input underneath.

ref bindable

Defaults to null

HTMLInputElement | null