Phone Number Input

<pa-phone-number-input> | PaPhoneNumberInputGroup

A phone number input component with country selection dropdown and automatic number validation. Supports international phone number formatting with country flags and dialing codes.

Phone Number

vue

<template>
  <pa-phone-number-input v-model="phoneNumber" label="Phone Number" />
</template>

<script setup>
import { ref } from 'vue'

const phoneNumber = ref(null)
</script>

Examples

Basic Usage

Simple phone number input with country selection.

Contact Number

vue

<template>
  <pa-phone-number-input v-model="contactNumber" label="Contact Number" />
</template>

Required Field

Phone number input with validation requirement.

div.template-wrapper

Required Phone

vue

<template>
  <pa-phone-number-input 
    label="Required Phone" 
    required 
  />
</template>

<script setup>
import { ref } from 'vue'

const requiredPhone = ref(null)
</script>

Mobile Number Validation

Specifically validate mobile numbers only.

Mobile Number

vue

<template>
  <pa-phone-number-input 
    label="Mobile Number" 
    :is-mobile="true"
  />
</template>

Custom Placeholder

Phone number input with custom placeholder text.

Business Phone

vue

<template>
  <pa-phone-number-input 
    label="Business Phone" 
    placeholder="Enter business number"
  />
</template>

Disabled State

Read-only phone number input.

Support Line

vue

<template>
  <pa-phone-number-input 
    label="Support Line" 
    :disabled="true"
  />
</template>

Importing

typescript

import { PaPhoneNumberInputGroup } from '@payadvantage/ui-components'

Properties

Name	Description	Type	Default
`modelValue`	The phone number object with country and number (used with v-model).	`PhoneNumber \| null`	`null`
`label`	Label text for the input field.	`string`	`'Phone number'`
`placeholder`	Placeholder text for the number input field.	`string`	`''`
`required`	Makes the phone number input required for validation.	`boolean`	`false`
`disabled`	Disables the entire phone number input component.	`boolean`	`false`
`isMobile`	Validates that the number is specifically a mobile number.	`boolean`	`false`
`requireSmsSending`	Validates that SMS can be sent to the selected country.	`boolean`	`false`
`filterCountries`	Function to filter available countries in the dropdown.	`(countries: Country[]) => Country[]`	`undefined`
`sfSelector`	Custom selector for testing frameworks.	`string`	`''`

PhoneNumber Object Structure

typescript

interface PhoneNumber {
  countryId: string  // Country identifier (e.g., 'US', 'CA', 'GB')
  number: string     // Phone number digits only
}

Events

Name	Description
`update:modelValue`	Emitted when the phone number changes (for v-model).
`focus`	Emitted when the number input field receives focus.
`blur`	Emitted when the number input field loses focus.

Dependencies

libphonenumber-js: International phone number parsing and validation
@vueform/multiselect: Country selection dropdown component
PaInput: Base input component for number entry
Bootstrap CSS: Form styling and layout

Design Notes

The phone number input component provides:

International support: Country selection with flags and dialing codes
Automatic validation: Real-time phone number format validation
Smart formatting: Automatically formats numbers based on country
SMS validation: Optional validation for SMS-capable numbers
Mobile detection: Can specifically validate mobile numbers

Visual Design

Country flag dropdown on the left with dialing code display
Standard input field for number entry with masking
Real-time validation feedback and warnings
Consistent styling with other form components

Interaction Patterns

Country selection updates dialing code and validation rules
Number formatting happens on blur/enter key
Visual feedback for invalid numbers or unsupported countries
Focus states show dialing code for better UX

This component is ideal for:

Registration forms: User sign-up with phone verification
Contact forms: Business contact information
Shipping forms: Delivery contact numbers
Emergency contacts: Critical contact information
International applications: Multi-country phone support

Accessibility Notes

Proper label association with form controls
Country dropdown is keyboard navigable
Validation messages are announced to screen readers
Disabled state is properly communicated
Required field indication for assistive technologies

Phone Number Input ​

Examples ​

Basic Usage ​

Required Field ​

Mobile Number Validation ​

Custom Placeholder ​

Disabled State ​

Importing ​

Properties ​

PhoneNumber Object Structure ​

Events ​

Dependencies ​

Design Notes ​

Visual Design ​

Interaction Patterns ​

Accessibility Notes ​