قائمة اختيار
Selectحقل اختيار مفرد متاح الوصول في React مبني على Radix، مع تسمية، نص مساعد، حالة خطأ، نص نائب، وخيارات معطلة. يرث الوضع الداكن والاتجاه من اليمين إلى اليسار.
استخدم Select مع عناصر SelectItem، ولكل عنصر value ثابتة. ترث القائمة الوضع الداكن وRTL من المزود.
متى تستخدمه
استخدم Select حين يختار المستخدم خياراً واحداً من قائمة معروفة فيها 5 إلى 15 عنصر تقريباً، مثل المنطقة أو نوع الوثيقة. للقوائم الطويلة التي تحتاج بحثاً، أو للاختيار المتعدد، استخدم Dropdown. مع 4 خيارات أو أقل، يكون 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. | |
emptyOption | react.ReactNode | Label for a first option that means "no value" (None, All). It maps to "" in value,
defaultValue, onValueChange, and the submitted form value, and is selected by default. | |
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. تظهر القائمة المفتوحة داخل بوابة المزود، لذلك ترث الاتجاه والوضع الداكن.