PxPhoneInput

An international phone number input with country code selector, built on vue-tel-input. Validation runs through vee-validate — the component wraps its input in a <Field> and requires a name prop.

No built-in label

The component doesn't render a label itself. Pair it with PxLabel if you need one, as shown below.

Usage

Demo

Phone Number

Value: None

<script setup>
import { ref } from 'vue'
import { PxPhoneInput, PxLabel } from 'praxis-vue-ui'

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

<template>
  <PxLabel label="Phone Number" for="phone" />
  <PxPhoneInput v-model="phone" name="phone" />
</template>

Required Field

Pass a rules string/object understood by vee-validate — "required" marks the field mandatory:

<PxPhoneInput v-model="phone" name="phone" rules="required" />

Props

Prop	Type	Default	Description
modelValue	string	''	Phone number value. Use with v-model.
namerequired	string	—	Field name registered with vee-validate — required for validation to work.
rules	string | Record<string, unknown> | ((value: unknown) => boolean | string)	''	vee-validate rules, e.g. 'required'.
disabled	boolean	false	Disables the input.

Emits

Event	Payload	Description
update:modelValue	string	Emitted on input change.