# Radio

اختيار خيار واحد بالضبط من مجموعة. Radio وRadio Group، أساسي ومحايد، مع كل الحالات.

<Preview name="radio-group" title="مجموعة أزرار الاختيار" />

## التثبيت

<ComponentInstall name="radio" />

ويثبّت [Field](/ar/docs/components/field) أيضًا.

## الاستخدام

```tsx title="page.tsx"
import { Field, FieldItem, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field";
import { Radio, RadioGroup } from "@/components/ui/radio";

export function ContactField() {
  return (
    <Field name="contact">
      <FieldSet render={<RadioGroup defaultValue="sms" />}>
        <FieldLegend>وسيلة التواصل المفضلة</FieldLegend>
        <FieldItem>
          <FieldLabel>
            <Radio value="sms" />
            رسالة نصية
          </FieldLabel>
        </FieldItem>
        <FieldItem>
          <FieldLabel>
            <Radio value="email" />
            البريد الإلكتروني
          </FieldLabel>
        </FieldItem>
      </FieldSet>
    </Field>
  );
}
```

استخدم Radio عندما يجب اختيار خيار واحد من اثنين إلى خمسة ورؤيتها كلها تفيد. ابدأ باختيار الخيار الأشيع محددًا فقط إن كان افتراضيًا آمنًا. وللخيارات الأكثر استخدم [Select](/ar/docs/components/select)؛ ولاختيارات متعددة استخدم [Checkbox](/ar/docs/components/checkbox).

## البنية

- **RadioGroup**: المجموعة؛ قيمة واحدة في كل مرة.
- **العنوان** (FieldLegend): اسم المجموعة.
- **Radio**: العنصر الدائري وفيه نقطة عند اختياره.
- **التسمية** و**النص المساعد** لكل خيار، من FieldItem.

## أمثلة

### مجموعة أزرار الاختيار

لفّ المجموعة في Field ثم FieldSet الذي يعرض RadioGroup، فيسمّي العنوان المجموعة ويسمّي كل FieldItem زره.

<Preview compact name="radio-group" title="مجموعة أزرار الاختيار" />

### الحالات

غير محدد ومحدد، بالنغمتين الأساسية والمحايدة، وللقراءة فقط ومعطّل.

<Preview name="radio-states" title="الحالات" />

## RTL

يقع زر الاختيار على يمين (بداية) تسميته. استخدم <kbd>ArrowDown</kbd> و<kbd>ArrowUp</kbd> في المجموعة العمودية: يعملان بالطريقة نفسها في الاتجاهين. وينتقل <kbd>ArrowRight</kbd> إلى الخيار التالي و<kbd>ArrowLeft</kbd> إلى السابق في الاتجاهين أيضًا (لا تعكسهما Base UI).

<DirectionCompare name="radio-group" title="مجموعة أزرار الاختيار" />

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

| المفتاح | الإجراء |
| --- | --- |
| <kbd>Tab</kbd> | ينقل التركيز إلى المجموعة (إلى الزر المختار، أو الأول) وإلى خارجها. |
| <kbd>ArrowDown</kbd> / <kbd>ArrowRight</kbd> | ينتقل إلى الخيار التالي ويختاره. |
| <kbd>ArrowUp</kbd> / <kbd>ArrowLeft</kbd> | ينتقل إلى الخيار السابق ويختاره. |
| <kbd>Space</kbd> | يختار الزر المركَّز عليه. |

- الدور `radiogroup` للمجموعة و`radio` مع `aria-checked` لكل خيار. ويسمّي FieldSet وعنوانه المجموعة.
- زر اختيار واحد فقط في ترتيب Tab، فالمجموعة محطة واحدة.
- حلقة الزر غير المختار وحلقة المختار ونقطته بنسبة 3:1 أو أفضل على كل سطح (WCAG 1.4.11).
- التركيز حد بسمك 2px على بعد 2px خارج الدائرة. وتبقى تسمية الأزرار المعطّلة وللقراءة فقط مقروءة.

## مرجع API

<ApiReference component="radio" />

## الاختلافات عن DGA

- تعبئة التمرير والضغط في الوضع الداكن كما في [Checkbox](/ar/docs/components/checkbox): تبقى النقطة green-600.
- للقراءة فقط حلقة بنسبة 3:1 (في Figma: 1.5:1).

<ComponentDeviations component="radio" />

## التباين

<ComponentContrast component="radio" />


---

[فهرس كل الصفحات](https://dga.omqkhafi.dev/ar/llms.txt)