تم تاریک

چک‌باکس Checkbox ​

چک‌باکس به کاربر اجازه می‌دهد تا یک یا چند گزینه را از بین موارد موجود انتخاب کند. انتخاب یک چک‌باکس اضافی تأثیری بر سایر گزینه‌ها ندارد و معمولاً برای تنظیمات اختیاری یا نمایش وضعیت یک ویژگی استفاده می‌شود.

نمونه زنده ​

انواع ​

وضعیتکاربرد
Uncheckedحالت پیش‌فرض؛ زمانی که کاربر هنوز گزینه‌ای را انتخاب نکرده است.
Checkedزمانی که گزینه توسط کاربر تأیید شده یا به صورت پیش‌فرض فعال است.
Indeterminateوضعیت میانی؛ زمانی که برخی (نه همه) فرزندانِ یک چک‌باکسِ والد انتخاب شده باشند.

آناتومی ​

anatomy

  1. برچسب گروه (Group label): (اختیاری) ارایه توضیح کلی درباره مجموعه‌ای از چک‌باکس‌ها.
  2. ورودی چک‌باکس (Checkbox input): المان بصری که وضعیت انتخاب را نشان می‌دهد.
  3. برچسب چک‌باکس (Checkbox label): متن کوتاه و واضح که در سمت چپ ورودی قرار می‌گیرد.

ساختار ​

structure

radius

stroke

موضوعمقدار
ابعاد کلی (عرض و ارتفاع)20px
سایز آیکون داخلی12px
فاصله بین ورودی و برچسب4px
پدینگ داخلی2px
شعاع (Corner Radius)6px
ضخامت استروک (Unchecked)1px

سلسله‌مراتب ​

چه زمانی استفاده کنیم؟ ​

  • در فرم‌ها (صفحات کامل، مودال یا پنل‌های کناری).
  • برای فیلتر کردن داده‌ها در جداول یا منوها.
  • برای تایید شرایط و ضوابط.
  • در لیست‌های دارای رابطه والد و فرزند.

placement

چه زمانی استفاده نکنیم؟ ​

اگر کاربر مجاز به انتخاب فقط یک گزینه است، حتماً از رادیو باتن استفاده کنید.

Don’tDo
when dont
چک‌باکس‌ها را زمانی استفاده نکنید که فقط یک مورد می‌تواند انتخاب شود.		when do
از گروه دکمه‌های رادیویی (RadioGroup) برای انتخاب فقط یک گزینه از یک لیست شامل ۲ مورد یا بیشتر استفاده کنید.

چیدمان ​

هم‌ترازی ​

alignment horizontal

  • عمودی: بهترین حالت برای اسکن سریع (فاصله بین هر مورد: 8px).
  • افقی: برای فضاهای محدود (فاصله بین هر مورد: 16px).

alignment

روابط والد و فرزند ​

  • چک‌باکس فرزند باید با فاصله 20px از سمت راست (تورفتگی) قرار گیرد.
  • تغییر وضعیت والد بر تمامی فرزندان اثر می‌گذارد.

parent

فاصله در فرم‌ها ​

  • فرم‌های کوچک (تا ۴۵۶ پیکسل): فاصله 16px (Space-05) از کامپوننت بعدی.
  • فرم‌های بزرگ (تا ۶۲۴ پیکسل): فاصله 24px (Space-06) از کامپوننت بعدی.
فرم‌های کوچک‌ترفرم‌های بزرگ‌تر
space 2
در فرم‌هایی با عرض 456px یا کمتر، چک‌باکس‌ها می‌توانند با فاصله 16px (Space-05) زیر یا قبل از کامپوننت بعدی قرار گیرند.		space 2
در فرم‌هایی با عرض 624px به پایین، چک‌باکس‌ها می‌توانند با فاصله 24px (Space-06) از کامپوننت بعدی جدا شوند.

نوشتار ​

  1. برچسب‌ها باید کوتاه (ترجیحاً زیر ۳ کلمه) و قابل اسکن باشند.
  2. از عبارات منفی پرهیز کنید (تیک زدن باید همیشه به معنای تایید باشد).
  3. در انتهای برچسب‌ها از نقطه استفاده نکنید (مگر در برچسب گروه سوالی).
  4. در متون چندخطی، چک‌باکس باید با خط اول متن تراز باشد.
Don’tDo
ux writing dont
متنی که به خط بعدی منتقل شده است را با چک‌باکس در مرکز عمودی قرار ندهید.		ux writing do
چک‌باکس و متن را در یک خط قرار دهید.

آیکون ​

  1. آیکون تیک یا وضعیت نامشخص در مرکز ورودی قرار می‌گیرد.
  2. سایز آیکون ثابت 12px است تا فاصله امن از لبه‌های ورودی حفظ شود.