PhoneNumber

An international phone number input with country code selector. Backed by vue-tel-input and libphonenumber-js for validation.

Usage

<script setup>
import { ref } from 'vue'
import { PhoneNumber } from 'praxis-vue-ui'

const phone = ref('')
</script>

<template>
  <PhoneNumber
    v-model="phone"
    label="Phone Number"
    :required="true"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Phone number value (E.164 format). Use with v-model.
label	string	undefined	Field label text.
required	boolean	false	Shows required asterisk.
disabled	boolean	false	Disables the input.
placeholder	string	'Enter phone number'	Input placeholder.

Emits

Event	Payload	Description
update:modelValue	string	Emitted on input change with the formatted phone number.
validate	boolean	Emitted with the validation state of the current phone number.