قائمة اختيار
Selectحقل اختيار مفرد متاح الوصول في React مبني على Radix، مع تسمية ونص مساعد وحالة خطأ ونص نائب وخيارات معطّلة. يرث الوضع الداكن والاتجاه العربي.
ركب Select مع عناصر SelectItem، لكل منها value ثابتة. ترث القائمة الوضع الداكن وRTL من الموفر.
متى تستخدمه
استخدم Select حين يختار المستخدم خيارًا واحدًا من قائمة معروفة من خمسة إلى خمسة عشر عنصرًا تقريبًا، مثل المنطقة أو نوع الوثيقة. للقوائم الطويلة التي تحتاج بحثًا، أو للاختيار المتعدّد، استخدم Dropdown. لأربعة خيارات أو أقل، RadioGroup أسرع في القراءة.
مرّر placeholder يصف الاختيار لا تعليمات.
أمثلة
الخصائص
الخصائص التي يعرّفها Select. سمات العنصر الأصلي تمرّ كما هي.
<Select>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" | ||
label | react.ReactNode | Visible label above the trigger, associated via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the trigger. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the trigger when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
placeholder | react.ReactNode | Placeholder shown in the trigger when no value is selected. | |
childrenإلزامي | react.ReactNode | <SelectItem> children, rendered inside the dropdown panel. | |
id | string | Caller-supplied id for the trigger; falls back to a generated one. | |
className | string | Forwarded to the trigger (the focusable control). | |
aria-label | string | ||
aria-labelledby | string | ||
open | boolean | ||
defaultOpen | boolean | ||
onOpenChange | (open: boolean) => void | ||
name | string | ||
autoComplete | string | ||
disabled | boolean | ||
required | boolean | ||
form | string | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void |
<SelectItem>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
childrenإلزامي | react.ReactNode | The visible label for this item. | |
asChild | boolean | ||
valueإلزامي | string | ||
disabled | boolean | ||
textValue | string |
إمكانية الوصول
المشغّل زر مرتبط بالتسمية label الظاهرة، وتفتح القائمة بوصفها listbox بتنقّل لوحة المفاتيح من Radix: مفاتيح الأسهم تتحرّك، والكتابة تقفز إلى الخيار المطابق، وEnter يختار، وEscape يغلق.
يُعلن النص المساعد والخطأ عبر aria-describedby وaria-invalid. تُعرض القائمة المفتوحة داخل بوّابة المزوّد، فترث الاتجاه والوضع الداكن.