Components

Phone number

Let users enter a phone number with an international code.

Import

import { PhoneNumber } from "@dr-max/ui/phone-number"

The entry carries its own precompiled CSS (including the styles of the Icon, Input, Required, Select and Spinner parts it composes) — no extra style imports needed.

Usage

The component exposes two v-models — v-model:phone-code for the selected code and v-model:phone-number for the number itself:

Phone number

<script setup lang="ts">
import { PhoneNumber } from "@dr-max/ui/phone-number"
import { ref } from "vue"

const phoneCode = ref("+420")
const phoneNumber = ref("")
</script>

<template>
  <PhoneNumber
    v-model:phone-code="phoneCode"
    v-model:phone-number="phoneNumber"
    :codes="['+420', '+421', '+48']"
    label="Phone number"
  />
</template>

Fixed code

With code-select-enabled: false the code renders as a disabled input showing the fixed value — set phone-code to the code you want displayed:

Phone number

<template>
  <PhoneNumber
    v-model:phone-number="phoneNumber"
    :code-select-enabled="false"
    phone-code="+420"
    label="Phone number"
  />
</template>

Number only

With code-enabled: false the code field disappears entirely and the label moves to the number input:

Phone number

<template>
  <PhoneNumber
    v-model:phone-number="phoneNumber"
    :code-enabled="false"
    label="Phone number"
  />
</template>

Loading and disabled

loading disables the code select while the code list is loading; disabled disables both fields:

Phone number

<template>
  <PhoneNumber v-model:phone-number="phoneNumber" :codes="codes" label="Phone number" loading />
  <PhoneNumber v-model:phone-number="phoneNumber" :codes="codes" label="Phone number" disabled />
</template>

Validation

code-errors render below the code field and number-errors below the number input:

Phone number

Enter a valid phone number

<template>
  <PhoneNumber
    v-model:phone-code="phoneCode"
    v-model:phone-number="phoneNumber"
    :codes="codes"
    label="Phone number"
    touched
    :number-errors="[{ label: 'Enter a valid phone number', param: 'format' }]"
  />
</template>

Playground

Phone number

label

codeEnabled

codeSelectEnabled

codePlaceholder

required

disabled

touched

<script setup lang="ts">
import { PhoneNumber } from '@dr-max/ui/phone-number'

const codes = ['+420', '+421', '+48', '+40', '+39']
</script>

<template>
  <PhoneNumber label="Phone number" code-enabled code-select-enabled code-placeholder="+420" :codes="codes" />
</template>