البناء · جديد

أزرار الاختيار

لاختيار خيار واحد فقط من قائمة قصيرة ظاهرة كلها؛ اختيار أحدها يلغي الباقي. الدائرة في بداية السطر.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/radio

الاعتماديات التي يضيفها: @base-ui/react

الاستخدام

import { Radio, RadioGroup } from "@/components/ui/radio";

<RadioGroup label="Delivery" name="delivery" defaultValue="standard">
  <Radio value="standard">Standard</Radio>
  <Radio value="express">Express</Radio>
</RadioGroup>

أمثلة

الحالات والمقاس

error يلوّن كل الدوائر، وdisabled وreadOnly للمجموعة كلها، وsize="lg" الدائرة الكبيرة للمس بهالتها.

مرجع الخصائص

RadioGroup

الخاصية	النوع	الوصف
`label`	`ReactNode`	خاصية Label: اسم المجموعة.
`value / defaultValue`	`string \| null`	الخيار المختار.
`onValueChange`	`(value: string) => void`	عند الاختيار.
`name`	`string`	اسم الحقل في النموذج.
`required / helperText / error / disabled / readOnly`	`…`	كما في حقل الإدخال؛ الخطأ يلوّن كل الدوائر.

Radio

الخاصية	النوع	الافتراضي	الوصف
`value`	`string`		قيمة الخيار. مطلوبة.
`children`	`ReactNode`		خاصية Label: نص الخيار.
`description`	`ReactNode`		سطر مساعد.
`size`	`"sm" \| "lg"`	`"sm"`	‏Small (Web) أو Large (Native).
`disabled / readOnly`	`boolean`		لخيار واحد.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	يدخل المجموعة إلى الخيار المختار (أو الأول) ويخرج منها.
`ArrowDownArrowRight`	الخيار التالي ويختاره. في العربية ArrowLeft هو التالي.
`ArrowUpArrowLeft`	الخيار السابق ويختاره.

ARIA

role="radiogroup" مسمّى بتسميته ومرتبط بنصه المساعد أو خطئه؛ كل خيار role="radio" مسمّى بنصه.
لا تنفذ إجراءً عند الاختيار؛ انتظر الإرسال.

ملاحظات العربية والاتجاه

ينعكس

الدوائر في بداية الأسطر (اليمين)، والأسهم الأفقية تتبع اتجاه القراءة.

لا ينعكس

النقطة داخل الدائرة متناظرة.

الأرقام: لا أرقام في الدائرة.
الخط العربي: الخيارات label-16 بوزن Medium، والوصف label-12.

كل المكونات ›