البناء · جديد

بطاقة الاختيار الأحادي

صف قائمة يُختار بزر اختيار داخل مجموعة، بأيقونة في البداية وعنوان ونص داعم ونص ختامي كالسعر. الصف كله قابل للنقر.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/radio-card

الاستخدام

import { RadioGroup } from "@/components/ui/radio";
import { RadioCard } from "@/components/ui/radio-card";

<RadioGroup label="Plan" defaultValue="plus">
  <RadioCard value="basic" leading={UserIcon} trailingText="Free">Basic</RadioCard>
  <RadioCard value="plus" leading={StarIcon} trailingText="29 / month">Plus</RadioCard>
</RadioGroup>

أمثلة

الدائرة في البداية

leading="radio" يضع الدائرة في بداية الصف.

مرجع الخصائص

RadioCard

الخاصية	النوع	الوصف
`value`	`string`	قيمة الخيار في المجموعة.
`children`	`ReactNode`	خاصية Headline.
`overline / description / trailingText`	`ReactNode`	خصائص Overline وSupporting text وTrailing text.
`leading`	`IconComponent \| ReactNode \| "radio"`	خاصية Leading type.
`disabled`	`boolean`	State = Disabled.

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

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

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

المفتاح	ما يفعله
`ArrowDownArrowUp`	بين البطاقات ويختار؛ Tab يخرج من المجموعة.

ARIA

كل صف role="radio" مسمّى بعنوانه ومرتبط بنصه الداعم.

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

ينعكس

الأيقونة في البداية (اليمين) والدائرة في النهاية (اليسار).

لا ينعكس

الأيقونات غير الاتجاهية لا تنعكس.

الأرقام: الأسعار في النص الختامي تتبع numerals عبر formatNumber.
الخط العربي: العنوان body-16 بوزن Medium.

كل المكونات ›