زر الاختيار
مجموعة أزرار راديو مبنية على React Aria - التنقل بمفاتيح الأسهم، ودلالات النموذج، وربط التسمية مجانًا. تحمل النقطة المحددة نفس تدرج blue/500 → blue/600 وإبراز غائر كعائلة مربع الاختيار، بحجمين md (16 بكسل) وsm (14 بكسل).
التثبيت
يمكنك إضافة مكوّن الاختيار الفردي هذا باستخدام CLI أو يدويًا:
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
تنسخ CLI مصدر المكوّن (مع تبعياته الداخلية) إلى مشروعك وتثبّت أي حزم npm مطلوبة.
npx boardui@latest add radioهل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
الأحجام
حجمان عبر الحجم الخاصية - md (16px، الافتراضي) و sm (14px، الـ Figma radio_selected_sm رمز يُستخدم داخل القوائم)، مقترن بتسميات Body 2.
<Radio size="md" value="a">Medium</Radio> {/* 16px (default) */}<Radio size="sm" value="b">Small</Radio> {/* 14px */}بطاقة زر الاختيار
بطاقة قابلة للتحديد بعنوان ووصف اختياري - تحدّد البطاقة بأكملها زر الاختيار، مطابقةً لسطح Checkbox Card. تعيش البطاقات داخل RadioGroup للتحديد الفردي والتنقل بمفاتيح الأسهم. وهو عنصر سجل منفصل: npx boardui add radio-card.
import { RadioCard } from "@/components/base/radio/radio-card";import { RadioGroup } from "@/components/base/radio/radio";
<RadioGroup aria-label="Plan" defaultValue="pro"> <RadioCard value="starter" title="Starter" description="For side projects and experiments." /> <RadioCard value="pro" title="Pro" description="For growing teams that need more." /> <RadioCard value="enterprise" title="Enterprise" description="Custom limits and support." isDisabled /></RadioGroup>