القائمة المنسدلة الأصلية

احصل على Ritla UI

قائمة منسدلة تفتح منتقي النظام نفسه: عجلة في iOS، وقائمة في Android، وقائمة منسدلة على الحاسوب. الأنسب للقوائم الطويلة البسيطة في النماذج وعلى الهواتف.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add native-select
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/native-select
الاعتماديات التي يضيفها
@base-ui/react@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

native-select.tsx

import { NativeSelect } from "@/components/ui/native-select";<NativeSelect label="Governorate" name="governorate" required>  <option value="">Choose a governorate</option>  <option value="amman">Amman</option>  <option value="irbid">Irbid</option></NativeSelect>

أمثلة

الحالات

خيار أول بقيمة فارغة هو النص النائب، ويظهر رماديًا. بعد الاختيار يصير الحقل أبيض. error برسالة يحلّ محل النص المساعد، وdisabled يعطّله.

إنجليزيمعكوسعربي

احصل على الكود

← RTL

مرجع الخصائص

NativeSelect

يقبل كل خصائص <select> أيضًا (name وvalue وdefaultValue وonChange وautoComplete…). الخيارات عناصر <option> و<optgroup> عادية.

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`	لا يوجد	خاصية Label. مطلوبة وظاهرة دائمًا.
`required`	`boolean`	`false`	النجمة و`required` على القائمة.
`helperText`	`ReactNode`	لا يوجد	خاصية Helper text.
`error`	`ReactNode \| boolean`	لا يوجد	State = Error. الرسالة تحلّ محل النص المساعد.
`disabled`	`boolean`	`false`	State = Disabled.
`children`	`ReactNode`	لا يوجد	عناصر `<option>`. ابدأ بـ`<option value="">` للنص النائب.

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

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

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

المفتاح	ما يفعله
`Tab`	ينقل التركيز إلى القائمة، بإطار أزرق داكن وهالة خفيفة كباقي الحقول.
`SpaceEnter`	يفتح منتقي النظام؛ الأسهم وحروف الكتابة تختار كما يقرّر المتصفح.

ARIA

<select> حقيقي: قارئات الشاشة ومنتقيات الهواتف تعرفه دون أي ARIA إضافي.
التسمية مرتبطة بالقائمة، والنص المساعد أو رسالة الخطأ عبر aria-describedby، والخطأ يضع aria-invalid.
السهم المزدوج زخرفي.

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

ينعكس

التسمية والقيمة في بداية السطر (اليمين) والسهم في نهايته (اليسار).

لا ينعكس

السهم المزدوج عمودي فلا ينعكس، ومنتقي النظام يتبع لغة الجهاز.

الأرقام: نصوص الخيارات تظهر كما كتبتها: اكتب الأرقام بالشكل الذي تريده.
الخط العربي: القيمة label-16 والتسمية label-12، والحقل بارتفاع 48px.
النص ثنائي الاتجاه: القائمة تأخذ اتجاه الصفحة لا dir="auto"، فيبقى السهم في نهاية السطر حتى لو كان الخيار المختار لاتينيًا.

الفحوص التي يجتازها

فحوص ريتلا التي يجتازها هذا المكوّن بطريقة بنائه. إن استُخدم كما هو موثّق، لا يحمل هذه الأخطاء إلى صفحتك.

R050نص عربي يسقط إلى خط غير الخط المعلن (مقيسًا، أو وفق الإعلان، أو لأن خط الويب فشل في التحميل)
R051تباعد حروف مطبَّق على نص عربي (يكسر الخط المتصل)
R042نص مقصوص: محتوى أعرض من صندوقه مع overflow مخفي وبلا علامة حذف
R043حاوية بعرض ثابت بالبكسل يتجاوز نصها العربي المساحة