کارت رادیو (RadioCard)

معرفی

RadioCards و RadioCardItem کنترل پیش‌فرض سیستم طراحی برای انتخاب یک گزینه هستند. هر گزینه یک کارت است با نشانگر رادیویی که همیشه دیده می‌شود، عنوان، توضیح، یک خط اطلاعات تکمیلی (قیمت، سقف، تعداد) و در صورت نیاز آیکون و نشان.

قاعده: برای انتخاب بین چند گزینه از RadioCard استفاده کنید. RadioGroup ساده فقط در جدول‌ها و فیلترهای فشرده یا فهرست‌های طولانی به کار می‌رود؛ برای بیش از حدود 8 گزینه از Select استفاده کنید.

یک کامپوننت با چهار ظاهر بسته (variant روی گروه، قابل بازنویسی روی هر کارت):

زمین بازی

استفاده

import { Badge, RadioCardItem, RadioCards } from '@partodata/ui'

<RadioCards defaultValue="yearly" columns={3} aria-label="پلن اشتراک">
  <RadioCardItem value="monthly" title="ماهانه" description="پرداخت ماه‌به‌ماه" meta="490,000 تومان در ماه" />
  <RadioCardItem
    value="yearly"
    title="سالانه"
    description="دو ماه رایگان"
    meta="4,900,000 تومان در سال"
    badge={<Badge variant="success">پیشنهادی</Badge>}
  />
  <RadioCardItem value="enterprise" title="سازمانی" description="پشتیبانی اختصاصی" meta="تماس با فروش" />
</RadioCards>

گرید واکنش‌گراست: columns بیشترین تعداد ستون است و هیچ کارتی باریک‌تر از minColumnWidth (پیش‌فرض 12rem) نمی‌شود؛ پس سه ستون با باریک شدن ظرف به دو و سپس یک ستون می‌رسد.

با آیکون

<RadioCardItem value="team" icon={<Users />} title="تیمی" description="برای تیم‌های کوچک تا متوسط" />

ترکیب با فرزندان

به‌جای propها می‌توانید RadioCardTitle و RadioCardDescription را به‌عنوان فرزند بدهید؛ زیر هم چیده می‌شوند.

<RadioCardItem value="monthly">
  <RadioCardTitle>ماهانه</RadioCardTitle>
  <RadioCardDescription>پرداخت ماه‌به‌ماه</RadioCardDescription>
</RadioCardItem>

ظاهرها

compact — کاشی کوچک

<RadioCards variant="compact" columns={4} minColumnWidth="7rem" defaultValue="7d" aria-label="بازهٔ زمانی">
  <RadioCardItem value="24h" title="24 ساعت" />
  <RadioCardItem value="7d" title="7 روز" />
</RadioCards>

media — با تصویر

<RadioCards variant="media" columns={3} minColumnWidth="9rem" defaultValue="dark" aria-label="پوسته">
  <RadioCardItem value="dark" media={<img src="/dark.png" alt="" />} title="تیره" />
</RadioCards>

list — فهرست پیوسته

<RadioCards variant="list" defaultValue="weekly" aria-label="دورهٔ گزارش">
  <RadioCardItem value="daily" title="گزارش روزانه" description="هر روز صبح، خلاصهٔ فعالیت روز قبل." />
  <RadioCardItem value="weekly" title="گزارش هفتگی" description="جمع‌بندی هفتگی عملکرد کمپین برند." />
</RadioCards>

حالت‌ها

غیرفعال

<RadioCardItem value="enterprise" title="سازمانی" description="برای حساب شما در دسترس نیست" disabled />

چپ‌به‌راست

جهت از محتوای اطراف گرفته می‌شود (نه یک rtl ثابت و نه ltr پیش‌فرض Radix)؛ در یک بخش dir="ltr" کارت‌ها و کلیدهای جهت‌نما چپ‌به‌راست می‌شوند. dir صریح همچنان بر همه‌چیز مقدم است.

راهنمای استفاده

• وضعیت انتخاب هیچ‌وقت فقط رنگ نیست: کادر کامل foreground (کنتراست غیرمتنی 3:1 به بالا در هر دو پوسته)، زمینهٔ انتخاب و نشانگر پرشده با هم.
• عنوان کوتاه (یک تا سه کلمه)، توضیح یک یا دو سطر؛ عدد و قیمت را در meta بگذارید، نه در عنوان.
• badge برای یک برچسب کوتاه («پیشنهادی») است، نه برای توضیح.
• به گروه aria-label یا یک برچسب متصل بدهید.

Props

RadioCards

RadioCardItem

RadioCardTitle و RadioCardDescription

برای ترکیب با فرزندان؛ هر دو span بلوکی هستند (داخل دکمه، عنوان و پاراگراف مجاز نیست).

دسترسی‌پذیری

• گروه role="radiogroup" و هر کارت role="radio" با aria-checked است.
• Tab به گروه می‌رود و کلیدهای جهت‌نما بین کارت‌ها جابه‌جا می‌شوند؛ جهت کلیدها با dir هماهنگ است.
• حلقهٔ فوکوس با focus-visible و رنگ فوکوس سیستم (brand-600) کشیده می‌شود.

کامپوننت‌های مرتبط

• RadioGroup — فقط برای جدول، فیلتر فشرده یا فهرست طولانی
• Select — برای گزینه‌های زیاد
• ToggleGroup — انتخاب سریع در نوار ابزار