البناء · جديد

رقم الهاتف

حقل رقم هاتف باختيار الدولة من العلم، بقائمة بحث بالعربية والإنجليزية ومفاتيح الدول، وتنسيق الرقم أثناء الكتابة. يعيد الرقم بالصيغة الدولية (E.164).

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/phone-input

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react, libphonenumber-js

الاستخدام

import { PhoneInput } from "@/components/ui/phone-input";

<PhoneInput label="Phone number" defaultCountry="SA" onValueChange={(e164, { valid }) => save(e164, valid)} />

أمثلة

الحالات والقائمة

رقم محفوظ (defaultValue بالصيغة الدولية يختار الدولة)، وcountries لقائمة محددة، والخطأ والتعطيل. الأعلام ملفات SVG ثابتة في public/flags يثبّتها @kanz/flags.

مرجع الخصائص

PhoneInput

يقبل خصائص <input> أيضًا (name وautoComplete…).

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label.
`value / defaultValue`	`string`		الرقم بالصيغة الدولية («+966501234567»).
`onValueChange`	`(e164: string, details: { country, national, valid }) => void`		مع كل تغيير. `valid` يعني طولًا وبادئة صحيحين للدولة.
`country / defaultCountry`	`CountryCode`	`"SA"`	الدولة المختارة (رمز ISO).
`onCountryChange`	`(country: CountryCode) => void`		عند اختيار دولة.
`countries`	`CountryCode[]`		حصر القائمة في دول محددة.
`flagsBase`	`string`	`"/flags"`	مسار ملفات الأعلام.
`required / helperText / error / disabled`	`…`		كما في حقل الإدخال.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`EnterArrowDown`	على العلم: يفتح قائمة الدول مع مربع البحث.
`ArrowUpArrowDown`	بين الدول؛ Enter يختار، وEscape يغلق.
`Tab`	من العلم إلى الرقم.

ARIA

زر العلم باسم «الدولة: السعودية ‎+966» بلغة الصفحة؛ العلم زخرفي.
حقل الرقم type="tel" مع autocomplete="tel-national"، مرتبط بالتسمية والنص المساعد.

ملاحظات العربية والاتجاه

ينعكس

قائمة الدول تتبع الصفحة: بالعربية ومن اليمين إلى اليسار، مرتبة أبجديًا بالعربية.

لا ينعكس

صف الحقل كله من اليسار إلى اليمين كما يُكتب الرقم: العلم يسارًا والرقم بعده، في العربية أيضًا.
مفتاح الدولة («+966») معزول بـ<bdi dir="ltr"> في القائمة.

الأرقام: الأرقام العربية والفارسية المكتوبة تُحفظ 0-9، ويبقى الرقم بأرقام غربية كما في الاتصال.
الخط العربي: أسماء الدول label-14 بخط الصفحة.
النص ثنائي الاتجاه: البحث يجد الدولة بالعربية أو الإنجليزية أو برمزها أو بمفتاحها («966»).

كل المكونات ›