RadioGroup — گزینهٔ رادیویی

گروه رادیویی برای انتخاب دقیقاً یک گزینه از چند گزینهٔ قابل‌دیدن است: روش پرداخت، طرح اشتراک، یا پاسخ «بله/خیر». اگر گزینه‌ها زیاد یا پویا هستند، از Select استفاده کنید.

وضعیت: beta · لایه: ۳ () · کد:

TSX

import { RadioGroup, Radio } from '@tokapps/tuk';

نمونهٔ زنده

کد قابل کپی

روش پرداخت با توضیح

TSX

import { RadioGroup, Radio } from '@tokapps/tuk';<RadioGroup label="روش پرداخت" defaultValue="card" onChange={setMethod}>  <Radio value="card">کارت بانکی</Radio>  <Radio value="wallet">کیف پول</Radio>  <Radio value="crypto" description="تا ۲۴ ساعت زمان می‌برد">ارز دیجیتال</Radio></RadioGroup>

جهت افقی برای دو گزینهٔ کوتاه

TSX

<RadioGroup label="جهت" orientation="horizontal" defaultValue="a">  <Radio value="a">بله</Radio>  <Radio value="b">خیر</Radio></RadioGroup>

انتخاب الزامی با خطا

TSX

<RadioGroup  name="plan"  label="نوع طرح"  isRequired  isInvalid={!plan}  errorMessage="یک گزینه را انتخاب کنید"  value={plan}  onChange={setPlan}>  <Radio value="free">رایگان</Radio>  <Radio value="pro">حرفه‌ای (Pro)</Radio></RadioGroup>

همهٔ پیکربندی‌ها

RadioGroup

پراپ	نوع	پیش‌فرض	توضیح
		—	برچسب گروه؛ برای صفحه‌خوان الزامی است.
		—	توضیح زیر برچسب گروه.
		—	پیام خطا؛ فقط با دیده می‌شود.
	·		اندازهٔ دایره و متن گزینه‌ها.
	· · ·		ظاهر گروه؛ بنیان (برچسب، کیبورد، ARIA) ثابت است و فقط رنگ، شکل و حرکت عوض می‌شود.
	· · ·	از پیش‌فرض سراسری	نشانگر انتخاب در card و media. مقدار نامعتبر به پیش‌فرض امن برمی‌گردد.
	·		چیدمان عمودی یا افقی.
/		—	گزینهٔ انتخاب‌شده (کنترل‌شده یا اولیه).
		—	با انتخاب هر گزینه.
		—	نام گروه در .
			باید یک گزینه انتخاب شود.
			حالت خطا.
			گزینهٔ انتخاب‌شده دیده می‌شود، تغییر نمی‌کند.
			کل گروه غیرفعال.
			در حال ذخیره: آیکون چرخان و قفل تغییر.
	رویداد صوتی ·		صدا هنگام انتخاب.
		—	مقصد اختصاصی صدا.
	·		نمایش در چاپ.
		—	کلاس روی ریشه.

Radio (هر گزینه)

پراپ	نوع	پیش‌فرض	توضیح
		—	الزامی؛ مقداری که گروه نگه می‌دارد.
		—	برچسب گزینه.
		—	توضیح کوتاه زیر برچسب گزینه.
			همین گزینه را غیرفعال می‌کند.
		—	کلاس روی ریشه گزینه.

واریانت‌ها

همان گزینه‌ها با چهار ظاهر. همه از توکن‌های می‌آیند و حرکتشان با توکن‌های حرکت است؛ در کاهش حرکت همه آنی می‌شوند.

variant	کی به کار رود	حرکت انتخاب
	فرم‌های معمولی	نقطه با تغییر رنگ حاشیه و پرشدن دایره
	انتخاب طرح یا سناریو با توضیح	کارت تأکیدی ملایم و نقطهٔ جهنده (spring)
	بازه یا دسته‌بندی فشرده (۲ تا ۶ گزینه)	پرشدن پیل با رنگ تأکید؛ متن مرکب تیره
	اولویت یا حالت‌های کم‌تعداد	هالهٔ نرم که یک‌بار باز می‌شود و می‌ماند

کارت

TSX

<RadioGroup label="طرح اشتراک" variant="card" defaultValue="pro">  <Radio value="free" description="برای شروع، تا ۳ پروژه">رایگان</Radio>  <Radio value="pro" description="پروژهٔ نامحدود و تحلیل پیشرفته">حرفه‌ای</Radio>  <Radio value="team" description="مدیریت تیم و دسترسی‌ها">تیمی</Radio></RadioGroup>

پیل (بخش‌بندی)

TSX

<RadioGroup label="بازه" variant="pill" defaultValue="week">  <Radio value="day">روز</Radio>  <Radio value="week">هفته</Radio>  <Radio value="month">ماه</Radio></RadioGroup>

هاله

TSX

<RadioGroup label="اولویت" variant="ring" defaultValue="high">  <Radio value="low">پایین</Radio>  <Radio value="high">بالا</Radio></RadioGroup>

در واریانت نقطه پنهان است و گزینه با پیل مشخص می‌شود؛ برچسب هر گزینه همیشه دیده می‌شود.

پیکربندی سراسری انتخاب (کارت و تصویر)

قالب‌ها و تم‌ها می‌توانند ظاهر انتخاب کارت و تصویر را یک‌بار و سراسری تعیین کنند، بدون دست‌بردن در کامپوننت. سه لایه، با همان ترتیب اولویت ARCH (§۷) اعمال می‌شوند:

prop محلی — روی یک (بالاترین اولویت).
پیش‌فرض سراسری قالب — روی هر والد (مثلاً ).
توکن‌های — رنگ، سایه، شعاع و حرکت؛ در بلوک قالب.

CSS

/* قالب: شعاع بزرگ‌تر، سایهٔ انتخاب قوی‌تر، و حرکت بالا آمدن کمتر */[data-theme="my-template"] {  --tds-selection-radius: var(--tds-radius-xl);  --tds-selection-shadow-selected: var(--tds-elevation-3);  --tds-selection-border-selected: var(--tds-accent-default);  --tds-selection-lift: calc(var(--tds-space-2) * -1);}

HTML

<!-- نشانگر پیش‌فرض کل محصول: دایرهٔ رادیو به‌جای تیک --><html data-selection-indicator="radio">

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

آنچه قابل پیکربندی نیست: ساختار، برچسب، کیبورد، ARIA و نقش . انتخاب همیشه برای صفحه‌خوان و کیبورد کار می‌کند؛ پیکربندی فقط ظاهر را عوض می‌کند.

حالت‌ها

حالت	نمایش
انتخاب‌نشده / انتخاب‌شده	دایرهٔ خالی یا دایره با نقطهٔ داخلی
	حاشیهٔ ضخیم، آیکون و پیام خطا
	گزینهٔ انتخاب‌شده فقط نمایش داده می‌شود
	کدری کم و قفل
	آیکون چرخان و

RTL و کیبورد

در RTL دایره سمت راست برچسب است و فلش‌های چپ/راست جهت را برعکس می‌کنند.
فلش‌ها بین گزینه‌ها حرکت و انتخاب می‌کنند؛ وارد و خارج گروه می‌شود.
گروه با و برچسب خودش خوانده می‌شود؛ خطا و توضیح با متصل‌اند.

صدا، حرکت، چاپ

صدا: پیش‌فرض هنگام انتخاب؛ معادل بصری نقطهٔ انتخاب است.
حرکت: گذار دایره با ؛ در کاهش حرکت بدون انیمیشن.
چاپ: پیش‌فرض؛ دایره‌ها با حاشیهٔ ساده چاپ می‌شوند.

توکن‌ها

کامپوننتی: ، (با ، ، )، ، و ، و ، ، ، ، ، .
تعریف در ؛ فهرست کامل در .

نکات

برای انتخاب چندتایی از Checkbox استفاده کنید.
برای روشن/خاموش از Switch استفاده کنید.