انتخاب کنترل: چک باکس، سوئیچ، دکمه رادیویی

1) تفاوت های کلیدی (معنی، نه «شکل»)

• نیاز به یک N - رادیو را بگیرید.
• شما نیاز به هر مجموعه ای از پرچم - چک باکس.
• شما نیاز به یک سوئیچ ضامن باینری که بلافاصله تغییر رفتار - سوئیچ.

2) درخت تصمیم (کوتاه)

1. چند انتخابات مستقل ؟ چک باکس ها

2. دقیقا یک گزینه از مجموعه ؟ → دکمه های رادیویی (یا کنترل های بخش/برچسب ها).

3. یک پرچم دودویی، اثر فوری و قابل توجه است ؟ → سوئیچ

4. نیاز به یک «جزئی» علامت (زیر مجموعه) → چک باکس با سه حالت.
5. خطر/هزینه بالا است (پرداخت، اعتدال) → رادیو/چک باکس + تایید (سوئیچ نیست).

3) رفتار و انتظارات کاربران

سوئیچ = نتیجه فوری. پس از تعویض، کاربر انتظار دارد یک اثر فوری و برگشت پذیری بدون ذخیره جداگانه.
چک باکس = انتخاب گزینه ها این می تواند بلافاصله یا با دکمه اعمال شود - مهم است که به صراحت مدل را نشان دهید («تنظیمات ذخیره شده «/» ذخیره کلیک کنید »).

رادیو = انتخاب حالت. انتقال می تواند رابط را بازسازی کند. تغییرات سیگنال (microanimation/text)

4) ایالات و معانی بصری

عادی/شناور/تمرکز/فعال/غیرفعال/خطا. کنتراست متن و شاخص ≥ AA.
سه حالت (چک باکس): خالی/جزئی/انتخاب شده است. حالت جزئی به خودی خود قابل کلیک نیست - کلیک به «انتخاب شده» تغییر می کند و نه «خالی».
سوئیچ: دارای تمایز روشن/خاموش در رنگ و موقعیت دونده است. رنگ تنها حامل معنا نیست (آیکون/برچسب در نزدیکی).

5) کپی رایت و امضا

فعل + مفعول یا عبارت که وقتی انتخاب می شود درست است.

گزینه «Receive e-mail notifications» را انتخاب کنید.
سوئیچ: «Notifications: On/Off» (برچسب در سمت چپ، حالت - در سمت راست یا در سوئیچ خود).
رادیو: «فرمت ضریب: اعشاری/کسری/آمریکایی».
اجتناب از انکار دوگانه: «از هم جدا نشوید»... - گیج کننده است.

برای اقدامات خطرناک، یک توصیف ثانویه اضافه کنید: "در. شرط سریع (بدون تایید) - شما می توانید در عرض 5 ثانیه لغو"

6) دسترسی (A11y) و صفحه کلید

چک باکس: "role =" checkbox "", aria-checked = "true" false "mixed" ", Space - switching.
سوئیچ: بومی «<input type =» checkbox «>» با سوئیچ بصری یا «نقش =» سوئیچ «» با «aria-checked». رفتار چک باکس مانند (فضا).
رادیو: «role =» radiogroup «» بر روی ظرف، «role =» radio «» بر روی عناصر، فلش ↑/↓ یا ←/→ - حرکت انتخاب، Space/Enter - تایید.
گروه ها: از «fieldset »/« legend» برای زمینه کلی استفاده کنید.
حلقه های تمرکز را قابل مشاهده کنید ابعاد مناطق کلیک کنید ≥ 44 × 44 پیکسل در هر لمس.

html
<! -- Radio Group -->
<fieldset role="radiogroup" aria-labelledby="odds-format">
<legend id = "odds-format "> Odds format </legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичный</label>
<label><input type="radio" name="odds" value="fractional"> Дробный</label>
<label> <input type = "radio" name = "odds" value = "american"> American </label>
</fieldset>

<! -- Checkbox (tri-state via aria) -->
<div role = "checkbox" aria-checked =" mixed" tabindex =" 0" id = "cb "> Notify about tournaments </div>

<! -- Switch (role = "switch") -->
<button role="switch" aria-checked="false" aria-labelledby="live-title" class="switch" id="live">
<span class="switch__knob"></span>
</button>
<span id = "live-title "> Live updates </span>

7) تغییرات و خطاهای ناهمزمان

سوئیچ + شبکه: تعویض → رابط کاربری بلافاصله خوش بینانه → تأیید سرور → اگر ناموفق باشد، به آرامی به عقب برگردید و دلیل را نشان دهید.
Checkbox/radio on «Save»: هنوز هیچ تأییدی وجود ندارد - رفتار جهانی را تغییر ندهید.
اقدامات خطرناک: تأیید (modalka) یا لغو پنل برای 5-10 ثانیه (اگر مقررات اجازه می دهد).

js
//Optimistic for switch const sw = document. getElementById('live');
sw. addEventListener('click', async ()=>{
const prev = sw. getAttribute('aria-checked') === 'true';
sw. setAttribute ('aria-checked', String (! prev)) ;//instantly try {
const r = await fetch('/api/live', { method:'POST', body: JSON. stringify({ enabled:!prev })});
if(!r.ok) throw new Error();
} catch {
sw. setAttribute('aria-checked', String(prev));     // откат
//show the toast "Failed to enable live"
}
});

8) الگوهای تلفن همراه

سوئیچ کنترل باینری اصلی در تنظیمات در تلفن همراه است.
رادیو را می توان با کنترل تقسیم شده برای 2-4 گزینه جایگزین کرد (ضربه انگشت بهتر است).
چک باکس ها در لیست ها - با یک منطقه کلیک بزرگ و پشتیبانی از چند انتخاب سریع.

9) الگوهای گروه بندی و طرح

رادیو: لیست عمودی (بهتر اسکن شده)، برای 2-3 گزینه - بخش در یک خط.
چک باکس: تراز یک ستون ؛ برای لیست های طولانی - «همه را انتخاب کنید» + سه حالت برای گروه.
سوئیچ: برچسب در سمت چپ، کنترل در سمت راست در همان خط ؛ نمایش وضعیت فعلی با متن به عنوان مورد نیاز (روشن/خاموش).

10) ضد گلوله

سوئیچ، که تغییرات را بلافاصله اعمال نمی کند (نیاز به «ذخیره»).
دکمه های رادیویی که در آن انتخاب های متعدد امکان پذیر است.
چک باکس برای گزینه های متقابلا منحصر به فرد («مرد/زن» به عنوان دو چک باکس).
سوئیچ باینری برای عمل غیر قابل برگشت خطرناک (حذف داده ها).
دو نفی در متن.
طرح را به اشتباه تغییر دهید تا تمرکز از بین برود.

11) مشخصات iGaming (مثال)

فرمت ضرایب: گروه رادیویی Decimal/Fractional/American - بلافاصله اعمال می شود و به نمایه ذخیره می شود.
شرط سریع: شرط سریع (بدون تایید) سوئیچ با توضیحات صریح و خنثی کردن برای 5-10 ثانیه پس از هر عملیات.
اشتراک/اطلاعیه: چک باکس بر اساس نوع رویداد (برنده, مسابقات, سپرده). گروه چک باکس «انتخاب همه» - سه حالت.
به روز رسانی زنده ضرایب: سوئیچ «حالت زنده» با خوش بینی و بازگشت به خطای شبکه.
محدودیت بازی مسئول: دکمه های رادیویی برای دوره (روز/هفته/ماه) + میدان مقدار ؛ تأیید محدودیت تغییر یافته با ورود «از فردا».

12) نشانه های سیستم طراحی (به عنوان مثال)

json
{
"checkbox": { "size": 20, "radius": 4, "gap": 8 },
"radio": { "size": 20, "dot": 10, "gap": 8 },
"switch": { "width": 44, "height": 24, "knob": 20, "padding": 2 },
"focusRing": { "width": 2, "offset": 2 },
"motion": { "toggleMs": 140, "ease": "cubic-bezier(0. 2,0,0. 2,1)" },
"a11y": { "contrastAA": true }
}

css
.control { display:flex; align-items:center; gap:8px; min-height:36px; }
.switch { width:44px; height:24px; padding:2px; border-radius:999px; background:var(--bg-muted); position:relative; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch__knob{ position:absolute; width:20px; height:20px; border-radius:50%; left:2px; top:2px; transition: transform. 14s cubic-bezier(.2,0,.2,1); background:#fff; }
.switch[aria-checked="true"].switch__knob{ transform: translateX(20px); }
.control:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

13) قطعه منطق UX

js function updateMaster(master, items){
const total = items. length, checked = items. filter(i=>i. checked). length;
master. indeterminate = checked>0 && checked<total;
master. checked = checked===total;
}

js const radios = [...document. querySelectorAll('[role="radio"]')];
let i = radios. findIndex(r => r. getAttribute('aria-checked')==='true');
document. addEventListener('keydown', e => {
if(!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp'].includes(e. key)) return;
e. preventDefault();
const dir = (e. key==='ArrowRight'          e. key==='ArrowDown')? 1: -1;
i = (i + dir + radios. length) % radios. length;
radios. forEach(r => r. setAttribute('aria-checked','false'));
radios[i].setAttribute('aria-checked','true');
radios[i].focus();
});

14) معیارها و آزمایشات

نرخ Misclick و فرکانس خنثی در سوئیچ ها.

زمان انتخاب و اعتبارسنجی خطاها توسط گروههای رادیویی

نسبت «انتخاب همه» و مقایسه با انتخاب دستی (سرعت، دقت).
A/B: کپی رایت برچسب، سفارش گزینه، تقسیم شده در مقابل رادیو، «بلافاصله اعمال می شود» در مقابل «با دکمه».

15) چک لیست QA

معنی و انتخاب

• کنترل مربوط به وظیفه (چندگانه → چک باکس ؛ یکی از N → رادیو ؛ باینری فوری → سوئیچ).
• برای اقدامات مخاطره آمیز، تأیید/لغو وجود دارد.

در دسترس بودن

• نقشهای صحیح («checkbox »/« switch »/« radiogroup »/« radio»)، «aria-checked »/« نامشخص».
• حلقه های تمرکز قابل مشاهده هستند، فلش در یک گروه رادیویی کار می کند، سوئیچ فضایی چک باکس/سوئیچ.

رفتار

• سوئیچ تغییرات را بلافاصله اعمال می کند ؛ در خطا - بازگشت و پیام.
• سه حالت برای «انتخاب همه» درست است ؛ کلیک های برچسب کار می کنند.

تصویری

• کنتراست ≥ AA ؛ دولت فقط رنگ نیست.
• کلیک کنید مناطق ≥ 44 × 44 پیکسل ؛ نظم و هماهنگی پایدار است.

موبایل

• کنترل تقسیم شده برای 2-4 انواع رادیو تست شده برای لمس.
• ضربه زدن به انگشت و پیمایش درگیری نیست.

16) مستندات در سیستم طراحی

اجزاء: «چک باکس»، «سوئیچ»، «رادیو گروه »/« SegmentedControl».
نشانه های اندازه/انیمیشن/تمرکز، نمونه هایی از copywriting.
الگوها: «انتخاب همه» (سه حالت)، «برنامه فوری»، «خنثی کردن پس از خطر».
Do/Don 't gallery: سوئیچ ذخیره تاخیر (انجام)، رادیو به جای چک باکس (انجام)، بخش برای مجموعه های کوتاه (انجام).

خلاصه ای کوتاه

انتخاب کنترل در مورد معنی و انتظارات است: چک باکس - پرچم ها و گروه های مستقل، سوئیچ - عملکرد روشن/خاموش فوری، رادیو - دقیقا یک گزینه از مجموعه. در دسترس بودن را حفظ کنید، در مورد حالت های ناهمزمان و copywriting فکر کنید - و کاربران با اطمینان تنظیمات را بدون خطا یا شگفتی تغییر خواهند داد.