PhoneInput

A phone number input with automatic formatting for Canadian and US numbers. Supports voice input in smrt mode with natural language number parsing.

Installation

typescript

import { PhoneInput } from '@happyvertical/smrt-svelte';

Basic Usage

A simple phone input with automatic formatting as you type.

Phone Number

svelte

<script lang="ts">
  let value = $state('');
</script>

<PhoneInput
  name="phone"
  label="Phone Number"
  bind:value
/>

With Default Value

Pre-populate with a formatted phone number.

Contact Phone

svelte

<PhoneInput
  name="contact"
  label="Contact Phone"
  value="+1 (416) 555-0123"
/>

US Phone Number

Set country="US" for US-specific formatting.

US Phone Number

svelte

<PhoneInput
  name="us-phone"
  label="US Phone Number"
  country="US"
  placeholder="+1 (555) 555-5555"
  bind:value
/>

Required Field

Add required to mark the field as required.

Mobile Number *

svelte

<PhoneInput
  name="required-phone"
  label="Mobile Number"
  required
/>

Disabled State

Use disabled to prevent user interaction.

Verified Phone

svelte

<PhoneInput
  name="verified"
  label="Verified Phone"
  value="+1 (416) 555-0199"
  disabled
/>

With Error

Display validation errors using the error prop.

Phone Number

Invalid phone number

svelte

<PhoneInput
  name="error-phone"
  label="Phone Number"
  value="123"
  error="Please enter a valid phone number"
/>

With Description

Add a description for additional context in smrt mode.

Business Phone

svelte

<PhoneInput
  name="business"
  label="Business Phone"
  description="Your company's main phone number"
/>

Voice Input (smrt Mode)

In smrt mode, users can speak phone numbers naturally. The component parses spoken digits:

"four one six five five five zero one two three" → +1 (416) 555-0123
"four one six, five five five, zero one two three" → +1 (416) 555-0123
"area code four one six, five five five, zero one two three" → +1 (416) 555-0123

svelte

<!-- Voice example: "four one six five five five zero one two three" -->
<PhoneInput
  name="voice"
  label="Phone Number"
  description="A ten digit phone number"
/>

Interactive Example

Enter a phone number to see automatic formatting:

Enter Phone

Raw value: (empty)

svelte

<script lang="ts">
  let value = $state('');
</script>

<PhoneInput
  name="interactive"
  label="Enter Phone"
  bind:value
/>
<p>Raw value: {value || '(empty)'}</p>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Field label displayed above the input
`description`	`string`	`undefined`	Description text for voice extraction context
`placeholder`	`string`	`'+1 (555) 555-5555'`	Placeholder text shown when empty
`value`	`string`	`''`	Current phone number value (bindable)
`country`	`'CA' \| 'US'`	`'CA'`	Country code for format validation
`disabled`	`boolean`	`false`	Disables the input
`required`	`boolean`	`false`	Marks field as required
`error`	`string`	`undefined`	Error message to display
`onchange`	`(value: string) => void`	`undefined`	Callback when value changes

TypeScript

typescript

import { PhoneInput } from '@happyvertical/smrt-svelte';

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  placeholder?: string;
  value?: string;
  country?: 'CA' | 'US';
  disabled?: boolean;
  required?: boolean;
  error?: string;
  onchange?: (value: string) => void;
}

Format Details

The component automatically formats numbers as you type:

Canadian format: +1 (416) 555-0123
US format: +1 (555) 555-5555
Removes non-digit characters during input
Validates 10-digit format (excluding country code)