Checkbox — چک‌باکس

چک‌باکس برای انتخاب مستقل روشن یا خاموش است: پذیرش قوانین، اشتراک خبرنامه، یا انتخاب چند آیتم از یک فهرست. برای انتخاب یکی از چند گزینهٔ متقابل‌الانحصار از RadioGroup استفاده کنید.

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

TSX

import { Checkbox } from '@tokapps/tuk';

نمونهٔ زنده

قوانین و مقررات را می‌پذیرم

دریافت خبرنامههفته‌ای یک ایمیل، هر زمان قابل لغو

انتخاب همه

قوانین را می‌پذیرمبرای ادامه باید قوانین را بپذیرید

تأیید شده توسط مدیر

غیرفعال

در حال ذخیره…

دریافت پیامک روی +98 912 345 6789

کد قابل کپی

انتخاب ساده با توضیح

TSX

import { Checkbox } from '@tokapps/tuk';<Checkbox description="هفته‌ای یک ایمیل، هر زمان قابل لغو">دریافت خبرنامه</Checkbox>

«انتخاب همه» با حالت نامشخص

TSX

const [selected, setSelected] = useState<string[]>([]);const all = selected.length === items.length;const some = selected.length > 0 && !all;<Checkbox isSelected={all} isIndeterminate={some} onChange={(on) => setSelected(on ? items : [])}>  انتخاب همه</Checkbox>

اجبار به پذیرش با خطا

TSX

<Checkbox  name="terms"  isRequired  isInvalid={!accepted && submitted}  errorMessage="برای ادامه باید قوانین را بپذیرید"  isSelected={accepted}  onChange={setAccepted}>  قوانین و مقررات را می‌پذیرم</Checkbox>

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

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

تمام پراپ‌های از react-aria-components (مثل و ) نیز پذیرفته می‌شوند.

حالت‌ها

حالت	نمایش
خاموش / روشن	جعبهٔ خالی یا جعبه با تیک؛ هر دو با شکل متفاوت، نه فقط رنگ
نامشخص	خط تیره داخل جعبه
	حاشیهٔ ضخیم‌تر، آیکون و پیام خطا
	مقدار دیده می‌شود ولی تغییر نمی‌کند
	کدری کم، غیرقابل‌فوکوس
	آیکون چرخان و

RTL و کیبورد

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

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

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

توکن‌ها

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

نکات

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