Input phone

Interactive documentation for the phone input component. Change props in the playground, inspect validation states, and copy the generated example.

Preview

<InputPhone
  v-model="phone"
/>

{
  "number": "",
  "country": "CA"
}

Examples for supported phone input sizes.

Phone *

Common phone input states for filled, disabled, required, and error.

Invalid phone number

This table matches the current InputPhoneProps interface.

Prop	Type	Default	Description
modelValue	PhoneNumberModel	{ number: '', country: 'CA' }	Current phone value object containing full phone number and selected country.
size	'l' \| 'xl'	'l'	Controls height, padding, icon size, spacing, and typography.
disabled	boolean	false	Disables the phone input and country selector interaction.
label	string	undefined	Floating label rendered above the phone input.
required	boolean	false	Displays required indicator inside the floating label.
error	string	undefined	Displays error styles and renders an error message below the input.
class	string	'w-full'	Additional classes applied to the root container.