قائمة البحث

تجريبي

قائمة اختيار بالبحث تطابق العربية كما تُكتب: احمد تجد أحمد، والحروف المطابقة بخط أثقل.

المعاينة

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

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

combobox.tsx

import { Combobox } from "@/components/ui/combobox";<Combobox label="Customer" options={customers} onValueChange={setCustomer} />

الخاصية	النوع	الافتراضي	الوصف
`options`	`{ value, label, description?, disabled? }[]`	لا يوجد	الخيارات؛ `description` سطر ثانٍ يميّز المتشابه.
`value / defaultValue / onValueChange`	`string \| null`	لا يوجد	القيمة المختارة.
`label / required / helperText / error / disabled`	`FieldProps`	لا يوجد	كما في حقل الإدخال.
`note`	`ReactNode \| null`	لا يوجد	ملاحظة التذييل عن طريقة المطابقة؛ `null` يخفيها.
`emptyText`	`(query) => ReactNode`	لا يوجد	ما يُقال حين لا تطابق أي نتيجة.
`matchArabic / normalizeArabic`	`(text, query) => [start, end] \| null`	لا يوجد	دالتا المطابقة، لاستخدامهما في بحث آخر.

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

المفتاح	ما يفعله
`ArrowDownArrowUp`	يفتح القائمة وينتقل بين الخيارات.
`Enter`	يختار الخيار المضاء.
`Escape`	يغلق القائمة.

الأرقام: لا أرقام فيها عادةً.
الخط العربي: ‏body-16 للخيار مع الجزء المطابق Semibold، وlabel-12 للسطر الثاني والتذييل.
النص ثنائي الاتجاه: عبارة «لا توجد نتائج» تعزل ما كُتب، فلا ينقلب اتجاه الاستعلام داخل الجملة.