Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Initial Country

Separate Dial Code Show +971 beside the field instead of inside it.

Format As You Type The caret stays where you left it while it formats.

Strict Refuse anything the country's numbering plan does not allow.

Allow Extensions

Searchable Search by name, alias or dial code — “Emirates” finds the UAE.

Layout

Placeholder Type

import { createPhoneInput } from '@devix-labs/phone-input';
import '@devix-labs/phone-input/styles.css';

createPhoneInput(document.querySelector('#target'), {
  preferredCountries: ["ae","sa","pk"],
  initialCountry: 'ae',
  separateDialCode: false,
  formatAsYouType: true,
  strict: false,
  allowExtensions: false,
  searchable: true,
  layout: 'wrap',
  placeholderType: 'mobile'
});

import { PhoneInput } from '@devix-labs/phone-input/react';
import '@devix-labs/phone-input/styles.css';

<PhoneInput
  preferredCountries={["ae","sa","pk"]}
  initialCountry="ae"
  formatAsYouType
  searchable
  layout="wrap"
  placeholderType="mobile"
/>

<script setup>
import { PhoneInput } from '@devix-labs/phone-input/vue';
import '@devix-labs/phone-input/styles.css';
</script>

<template>
  <PhoneInput
  :preferred-countries="[&quot;ae&quot;,&quot;sa&quot;,&quot;pk&quot;]"
  initial-country="ae"
  format-as-you-type
  searchable
  layout="wrap"
  placeholder-type="mobile"
/>
</template>

<script>
  import { phoneInput } from '@devix-labs/phone-input/svelte';
  import '@devix-labs/phone-input/styles.css';
</script>

<div use:phoneInput={{
  preferredCountries: ["ae","sa","pk"],
  initialCountry: 'ae',
  separateDialCode: false,
  formatAsYouType: true,
  strict: false,
  allowExtensions: false,
  searchable: true,
  layout: 'wrap',
  placeholderType: 'mobile'
}} />

Every option here is in the documentation, along with the ones that are not worth a control.