زر اختيار
Radioمجموعة أزرار اختيار متاحة الوصول في React: تسمية مشتركة، نص مساعد، حالة خطأ، تخطيط أفقي، ودعم عربي. لاختيار خيار واحد من مجموعة صغيرة ظاهرة.
ضع الخيارات داخل RadioGroup، واستخدم Radio لكل خيار. تملك المجموعة التسمية، النص المساعد، وحالة الخطأ.
متى تستخدمه
استخدم RadioGroup حين يجب على المستخدم اختيار خيار واحد من 2 إلى 5 خيارات ظاهرة، مثل نوع مقدم الطلب أو طريقة التوصيل. تساعد رؤية الخيارات كلها المستخدم على الاختيار. لعدد أكبر من الخيارات، استخدم Select. إذا جاز اختيار أكثر من خيار، استخدم Checkbox.
أعط المجموعة تسمية تطرح السؤال، ولا تضبط قيمة افتراضية إلا حين يكون خيار واحد هو المعتاد بوضوح.
أمثلة
الخصائص
الخصائص التي يعرفها Radio. سمات العنصر الأصلي تمر كما هي.
<Radio>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
label | react.ReactNode | Visible label for this radio, sits beside the circle, associated via htmlFor/id. | |
asChild | boolean | ||
checked | boolean | ||
required | boolean | ||
valueإلزامي | string |
<RadioGroup>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
variant | "primary" | "neutral" | ||
orientation | "vertical" | "horizontal" | ||
label | react.ReactNode | Group label, sits above the rows. Associated to the group via aria-labelledby. | |
helperText | react.ReactNode | Hint shown below the group. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the group when error is true (or when only errorMessage is set). | |
error | boolean | Marks the group invalid: sets aria-invalid and applies error styling. | |
readOnly | boolean | Locks the group: shows the value but can't be changed; stays focusable, sets aria-readonly. | |
childrenإلزامي | react.ReactNode | <Radio> children. | |
asChild | boolean | ||
name | string | ||
form | string | ||
required | boolean | ||
disabled | boolean | ||
dir | Direction | ||
loop | boolean | ||
defaultValue | string | ||
value | string | ||
onValueChange | (value: string) => void |
إمكانية الوصول
تملك RadioGroup تسمية المجموعة، النص المساعد، ورسالة الخطأ، لذلك يعلن قارئ الشاشة المجموعة كلها سؤالاً واحداً. ينقل مفتاح Tab التركيز إلى داخل المجموعة، وتنقله مفاتيح الأسهم بين الخيارات تبعاً لاتجاه القراءة في العربية.
يختار مفتاح Space أو Enter الخيار الذي عليه التركيز. عند وجود خطأ، تحمل المجموعة aria-invalid.