SvPhoneInput

A country dial-code selector plus a national number field that emits an E.164-style string.

SvPhoneInput pairs a flag + dial-code picker with a national number field and combines them into a single +<dial><digits> value. Picking a country reformats the number for that country's convention, and onChange also hands you the parsed parts (country, dial, national, valid, complete) for your own validation. It is the styled renderer over the headless createPhoneInput core. Its label / hint / error chrome comes from SvField.

Basic usage

<script lang="ts">
  import { SvPhoneInput } from '@svgrid/grid'
  let phone = $state('')
</script>

<SvPhoneInput label="Mobile" country="US" bind:value={phone} />

Props

SvPhoneInput extends the shared SvEditorProps (disabled, readonly, required, invalid, error, label, hint, size, dir, name, id, ariaLabel) and adds:

Prop Type Default Description
value string '' The +<dial><digits> string.
onChange (value: string, parts: PhoneParts) => void - Fires with the combined value and parsed parts.
country string US Default country ISO code.
placeholder string Phone number National-field placeholder.
messages Partial<PhoneMessages> - Override the country selector label.

PhoneParts is { country; dial; national; valid; complete }. PhoneMessages is { country }.

Patterns

Read the parsed parts

onChange's second argument gives you validity and completeness without re-parsing the string yourself:

<SvPhoneInput
  bind:value={phone}
  onChange={(v, parts) => { phone = v; valid = parts.valid }}
/>

Default country

Set country to the ISO code that fits your audience; the dial code and formatting follow it until the user picks another:

<SvPhoneInput country="GB" bind:value={phone} />

Required field that blocks on an invalid number

Capture the parsed parts from onChange and drive the error off parts.valid, so the field only complains once the user has typed something incomplete:

<script lang="ts">
  import { SvPhoneInput } from '@svgrid/grid'
  let phone = $state('')
  let parts = $state<{ valid: boolean } | null>(null)
  const showError = $derived(parts != null && !parts.valid)
</script>

<SvPhoneInput
  label="Mobile"
  country="US"
  required
  bind:value={phone}
  onChange={(v, p) => { phone = v; parts = p }}
  invalid={showError}
  error={showError ? 'Enter a complete phone number' : undefined}
/>

Tip: parts also carries country, dial, national, and complete, so you can store the pieces separately without re-parsing the combined string yourself.

Accessibility

See also