البناء · جديد

القائمة المنسدلة

حقل لاختيار خيار واحد أو عدة خيارات من قائمة، بتسمية حقل الإدخال وحالاته، وبحث حين تطول القائمة. استخدمها لخمسة خيارات أو أكثر؛ وللأقل أزرار الاختيار أو مربعات التفعيل.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/select

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

الاستخدام

import { Select } from "@/components/ui/select";

<Select label="Transfer purpose" options={[{ value: "rent", label: "Rent" }, …]} onValueChange={setPurpose} />

أمثلة

الحالات

قائمة قصيرة (5 خيارات) تُفتح بلا بحث. لا تحدد خيارًا مسبقًا إلا إذا كان آمنًا.

أيقونة ووصف

icon وdescription لكل خيار، وdisabled لخيار غير متاح. الخيار المختار عليه علامة.

اختيار متعدد

MultiSelect: الخيارات المختارة وسوم في الحقل ولكل منها زر حذف، والكتابة في الحقل تصفّي القائمة، والصفوف بمربعات تفعيل وتبقى القائمة مفتوحة حتى «تم».

حالات الاختيار المتعدد

بعد maxTags وسوم يلخّص الحقل الباقي («+2 أخرى») حتى تركّز عليه؛ والخطأ والتعطيل كما في حقل الإدخال؛ وonCreate يضيف «إنشاء جديد» بما كتبه الشخص.

مرجع الخصائص

Select

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Show label.
`options`	`{ value, label, description?, icon?, disabled? }[]`		الخيارات.
`value / defaultValue`	`string \| null`		قيمة الخيار المختار.
`onValueChange`	`(value: string \| null) => void`		عند الاختيار.
`searchable`	`boolean`	`options ≥ 8`	مربع البحث في أعلى القائمة.
`placeholder / searchPlaceholder / emptyText`	`string`		الافتراضي بلغة الصفحة («اختر خيارًا»، «بحث»، «لا توجد نتائج»).
`name`	`string`		اسم الحقل في النموذج.
`required / helperText / error / disabled`	`…`		كما في حقل الإدخال.

MultiSelect

الخاصية	النوع	الافتراضي	الوصف
`options`	`{ value, label, description?, icon?, disabled? }[]`		الخيارات، كما في Select.
`value / defaultValue`	`string[]`		قيم الخيارات المختارة.
`onValueChange`	`(value: string[]) => void`		عند الاختيار أو الحذف.
`maxTags`	`number`	`3`	الوسوم الظاهرة والحقل غير مركّز؛ الباقي «+N أخرى».
`onCreate`	`(query: string) => void`		يضيف زر «إنشاء جديد» في أسفل القائمة.
`placeholder / emptyText / name`	`string`		كما في Select («اختر خيارات»).
`label / required / helperText / error / disabled`	`…`		كما في حقل الإدخال.

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

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

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

المفتاح	ما يفعله
`EnterSpaceArrowDown`	يفتح القائمة.
`ArrowUpArrowDown`	بين الخيارات؛ Enter يختار وEscape يغلق.
`A–Z`	في القائمة القصيرة: ينتقل إلى الخيار الذي يبدأ بالحرف. في الطويلة: يكتب في البحث.
`Backspace`	في الاختيار المتعدد وحقل الكتابة فارغ: يحذف آخر وسم.

ARIA

الحقل زر مرتبط بالتسمية ويفتح listbox؛ الخيار المختار aria-selected وعليه علامة ظاهرة.
النص المساعد والخطأ مرتبطان كما في حقل الإدخال.
في الاختيار المتعدد: الحقل role="combobox"، وكل صف خيار واحد بـaria-selected (مربع التفعيل مرسوم لا عنصر ثانٍ)، وعدد المختار يُعلن («تم اختيار 3»)، ولكل وسم زر «إزالة» باسمه.

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

ينعكس

السهم في نهاية الحقل (اليسار)، والأيقونة والعلامة في الصفوف تتبادلان المكان.
القائمة تحمل اتجاه الصفحة ولغتها حتى إن فُتحت من جزيرة LTR.

لا ينعكس

السهم يشير إلى الأسفل في الاتجاهين؛ علامة الاختيار لا تنعكس.

الأرقام: الأرقام في الخيارات كما تكتبها؛ استخدم formatNumber للمبالغ.
الخط العربي: الحقل label-16، والصفوف label-14 بوزن Medium والوصف label-12.
النص ثنائي الاتجاه: كل خيار ووصفه يأخذان dir="auto": اسم إنجليزي في قائمة عربية يجري من اليسار.

كل المكونات ›