Radio

التثبيتنسخ رابط العنوان

ويثبّت Field أيضًا.

الاستخدامنسخ رابط العنوان

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؛ ولاختيارات متعددة استخدم Checkbox.

البنيةنسخ رابط العنوان

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

أمثلةنسخ رابط العنوان

مجموعة أزرار الاختيارنسخ رابط العنوان

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

الحالاتنسخ رابط العنوان

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

RTLنسخ رابط العنوان

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

إمكانية الوصولنسخ رابط العنوان

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

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

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

لا شيء. يطابق هذا المكوّن ملف DGA في Figma.

التبايننسخ رابط العنوان