Contact Number Input

• This component utilizes libphonenumber-js to parse and format the input on blur.
• International contact number input with country selector and validation.

Uses libphonenumber-js internally for parsing and formatting on blur.

Basic Usage

Input Contact Number

+63

<template>
  <spr-input-contact-number id="input-contact-number-basic" v-model="inputModel" label="Input Contact Number" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Active State

Input Contact Number

+63

<template>
  <spr-input-contact-number
    id="input-contact-number-active-state"
    v-model="inputModel"
    label="Input Contact Number"
    active
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Error State

Input Contact Number

+63

<template>
  <spr-input-contact-number
    id="input-contact-number-error-state"
    v-model="inputModel"
    label="Input Contact Number"
    error
  >
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input-contact-number>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Disabled State

Input Contact Number

+63

<template>
  <spr-input-contact-number
    id="input-contact-number-disabled-state"
    v-model="inputModel"
    label="Input Contact Number"
    disabled
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Disabled Country Calling Code

Input Contact Number

+63

<template>
  <spr-input-contact-number
    id="input-contact-number-disabled-country-calling-code"
    v-model="inputModel"
    label="Input Contact Number"
    :disabled-country-calling-code="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
</script>

Get Selected Country Codes

Input Contact Number

+63

Model Output:

Selected Country Code:

Selected Country Calling Code:

Error Handling: []

Parsed International Number:

<template>
  <spr-input-contact-number
    id="input-contact-number-selected-country-codes"
    v-model="inputModel"
    label="Input Contact Number"
    @get-selected-country-calling-code="handleCodes"
    @get-contact-number-errors="handleErrors"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const inputModel = ref('');
const selectedCountry = ref('');
const selectedCalling = ref('');
const errors = ref([]);

const handleCodes = (val: { countryCode: string; countryCallingCode: string }) => {
  selectedCountry.value = val.countryCode;
  selectedCalling.value = val.countryCallingCode;
};

const handleErrors = (val: { title: string; message: string }[]) => {
  errors.value = val;
};
</script>

Pre-Selected Country

Input Contact Number

+63

<template>
  <spr-input-contact-number
    id="input-contact-number-preselected-country"
    v-model="inputModel"
    label="Input Contact Number"
    pre-selected-country-code="US"
  />
</template>

API Reference

Name	Description	Type	Default
id	The unique id for the component	String	''
v-model	The current (unformatted) input value. Updates on user input and formatting events.	String	''
placeholder	Placeholder text displayed when the input is empty.	String	'Enter Phone Number'
pre-selected-country-code	Initial ISO 3166-1 alpha-2 country code used to derive the default calling code (e.g., PH, US).	String	'PH'
disabled	Disables the entire contact number input (including country selector).	Boolean	false
disabled-country-calling-code	Disables only the country calling code selector while keeping the number field interactive.	Boolean	false

For additional shared props, events, slots, and behavior inherited from the base input component, please refer to the Input Component API Reference.

Events

Event	Payload	Description
@update:model-value	String	Emitted whenever the raw input value changes (two-way binding support).
@get-selected-country-calling-code	{ countryCode: String; countryCallingCode: String }	Emitted after country selection changes, providing both the ISO country code and its calling code.
@get-parsed-international-number	String	Emitted with the fully parsed international number (e.g., +15551234567) after formatting logic runs.
@get-contact-number-errors	Array<{ title: String; message: String }>	Emitted with validation error objects if parsing or formatting detects issues.