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>
  <mc-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>
  <mc-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>
  <mc-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>
  </mc-input-contact-number>
</template>

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

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

Disabled State

Input Contact Number

+63

<template>
  <mc-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>
  <mc-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>
  <mc-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"
    @get-parsed-international-number="handleParsedNumber"
  />
</template>

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

const inputModel = ref('');
const selectedCountry = ref('');
const selectedCalling = ref('');
const errors = ref([]);
const parsedNumber = 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;
};

const handleParsedNumber = (val: string) => {
  parsedNumber.value = val;
};
</script>

Pre-Selected Country

Input Contact Number

+63

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

Display Helper

Display helpful text or error messages below the input field using the display-helper, helper-text, helper-icon, and error props. You can also customize the helper message with a slot.

Helper Text

Input Contact Number

+63

Enter a valid international phone number

Error State with Helper

Input Contact Number

+63

Invalid phone number format

Custom Helper Message

Input Contact Number

+63

Enter number with country code prefix

0 characters

<template>
  <div class="mc-grid mc-gap-4">
    <!-- Helper Text -->
    <mc-input-contact-number
      id="input-contact-number-helper-text"
      v-model="inputModel"
      label="Input Contact Number"
      display-helper
      helper-text="Enter a valid international phone number"
    />

    <!-- Error State with Helper -->
    <mc-input-contact-number
      id="input-contact-number-error-helper"
      v-model="inputModel"
      label="Input Contact Number"
      display-helper
      helper-icon="ph:warning-circle-fill"
      helper-text="Invalid phone number format"
      error
    />

    <!-- Custom Helper Message -->
    <mc-input-contact-number
      id="input-contact-number-custom-helper"
      v-model="inputModel"
      label="Input Contact Number"
      display-helper
      helper-icon="ph:info-fill"
      helper-text="Phone number info"
    >
      <template #helperMessage>
        <div class="mc-flex mc-w-full mc-justify-between mc-gap-2">
          <div class="mc-body-sm-regular mc-flex mc-items-center mc-gap-1">
            <Icon class="mc-min-h-5 mc-min-w-5" icon="ph:info-fill" />
            <span>Enter number with country code prefix</span>
          </div>
          <div class="mc-body-sm-regular">{{ inputModel.length }} characters</div>
        </div>
      </template>
    </mc-input-contact-number>
  </div>
</template>

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

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

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
display-helper	When set to true, displays the helper text below the input field.	Boolean	false
helper-text	Helper text to display below the input when display-helper is true. Provides additional context or instructions for the user.	String	''
helper-icon	Icon name to display alongside the helper text. Accepts any icon name from the icon library.	String	null
error	When set to true, displays the input in an error state with red text for the helper message.	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.