Right to left

Overview

In this demo, we add dir="rtl" to the library's container so the layout flows right-to-left. Phone numbers and dial codes are still displayed left-to-right, as that’s the standard way to write telephone numbers. We also import the Arabic locale and pass it via the uiTranslations option, set countryNameLocale to "ar" (Arabic), and initialise the library with initialCountry set to Palestine.

Note: the toast shown when input is rejected isn't part of the library — see the strict:reject event docs for an example of how to wire one up yourself.

Html

<label for="phone">Phone number</label>
<input id="phone" type="tel">

JavaScript

import intlTelInput from "intl-tel-input";
// Arabic
import { ar } from "intl-tel-input/locale";

const input = document.querySelector("#phone");

intlTelInput(input, {
  uiTranslations: ar,
  // Arabic
  countryNameLocale: "ar",
  // Palestine
  initialCountry: "ps",
  loadUtils: () => import("intl-tel-input/utils"),
});