زر اختيار
Radioمجموعة أزرار اختيار متاحة الوصول في React بتسمية مشتركة ونص مساعد وحالة خطأ وتخطيط أفقي ودعم عربي. اختيار واحد من مجموعة صغيرة ظاهرة.
لف الخيارات داخل RadioGroup مع Radio لكل خيار. تملك المجموعة التسمية والنص المساعد وحالة الخطأ.
متى تستخدمه
استخدم RadioGroup حين يجب على المستخدم اختيار خيار واحد من اثنين إلى خمسة خيارات ظاهرة، ورؤيتها كلّها تساعده، مثل نوع مقدّم الطلب أو طريقة التوصيل. لخيارات أكثر استخدم 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 على المجموعة.