Phone Input

A Native Input dedicated to Mobile & Local Phone numbers, includes a beautiful country picker and a native input. Exports the national number, local number & country code for flexible & easier way to validate on the backend.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { PhoneInput } from '@flavorly/vanilla-components'
import { ref } from 'vue'

const value = ref('+35191523813')
const valueCountry = 'PT'

const value2 = ref('+1915279172')
const value2Country = 'US'
</script>

<template>
  <PreviewWrapper>
    <PhoneInput
      v-model="value"
      :country-code="valueCountry"
      feedback="Im useful helper out here, choose wisely"
      :favorite-countries="['PT', 'ES', 'US']"
      country-placeholder="Pick your phone country"
      phone-placeholder="National Number"
    />

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <!-- Regular -->
    <PhoneInput
      v-model="value2"
      :country-code="value2Country"
      feedback="Im useful helper out here, choose wisely"
      errors="Sorry but your phone number looks to be invalid."
      country-placeholder="Pick your phone country"
      phone-placeholder="National Number"
    />

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value2) }}</pre>
    </div>
  </PreviewWrapper>
</template>

Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	The value for the element	`Any`, `Valid Country ISO Code`	`undefined`
`countryCode`	The country code in ISO format	`Any`, `Valid Country ISO Code`	`undefined`
`phonePlaceholder`	The placeholder for the phone number input	`String`	`Your national number`
`countryPlaceholder`	The placeholder for the country input	`String`	`Your country`
`favoriteCountries`	Array of favorite countries to preload	`Array`	`['us','gb','pt','fr','de']`
`labelWithDialCode`	If you want the label with a dial code	`Boolean`	`false`
`labelWithCountryCode`	If you want the label with country code	`Boolean`	`false`
`searchBoxPlaceholder`	Placeholder for the Search Box	`string`	`Search here`
`noResultsText`	When no results are found, the text to display	`string`	`Sorry...`
`searchingText`	Text to display while searching	`string`	`Please wait...`
`loadingClosedPlaceholder`	When loading but dropdown closed	`string`	`Loading please wait...`
`loadingMoreResultsText`	Text while is pulling for next pages	`string`	`Loading more options...`
`minimumInputLengthText`	A function or a number with the minimum chars to search	`String`, `Function`	`3`

Slots 🧬

Current slots available for this component are the following:

Slot `before`

Slot to override or pre-pend to the component before the component, ex: icon, etc.

Attribute	Description	Type
`className`	Classes injected	`String`

Slot `after`

Slot to override or append to the component before the component, ex: icon, etc.

Attributes specially injected to the after slot for some inputs ( Ex: Password )

Attribute	Description	Type
`hasErrors`	If the field has errors	`Boolean`
`type`	Type of input	`String`
`showingPassword`	If the password showing is toggled	`Boolean`

Slot `errors`

Slot that holds the error messages when the component errors prop is defined.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array]`
`hasErrors`	If the field has errors	`Boolean`

Slot `feedback`

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`

Events 🚇

Here you may find the events emitted by this component.

Event	Description	Value
`update:modelValue`	When the value changes	`any`

Phone Input #

Preview & Playground 🖼️ #

Props 📥 #

Slots 🧬 #

Slot before #

Slot after #

Slot errors #

Slot feedback #

Events 🚇 #