Контроллорду тандоо: чекбокс, свитч, радио туткасы

1) Негизги айырмачылыктар (мааниси, "сүрөт" эмес)

• Бизге N бири керек - радио алыңыз.
• Бизге желектердин ар кандай топтому керек - чекбокс.
• Бизге бир бинардык тумблер керек, ал дароо жүрүм-турумун өзгөртөт - свитч.

2) дарак чечимдер (кыска)

1. Бир нече көз карандысыз шайлоо? → Checkbox.
2. Комплекттен так бир вариант? → Радиокоптор (же сегмент-контроль/тегдер).
3. Бир бинардык желек, таасири тез жана байкаларлык? → Switch.
4. Сиз "жарым-жартылай" белги керек? → tri-state менен Checkbox.
5. Тобокелдик/наркы жогору (төлөм, модерация)? → Радио/чекбокс + ырастоо (свитч эмес).

3) колдонуучунун жүрүм-туруму жана күтүүлөр

Switch = заматта натыйжасы. которулгандан кийин, колдонуучу жеке "сактоо" жок токтоосуз таасир жана кайтарымдуулугун күтөт.
Чекбокс = тандоо параметрлери. Дароо же баскычта колдонулушу мүмкүн - моделди ачык көрсөтүү маанилүү ("Орнотуулар сакталды "/" Click Save").
Радио = режимин тандоо. Өтүү интерфейсти өзгөртө алат. өзгөрүүлөрдү сигнал (микроанимация/текст).

4) Шарттар жана визуалдык семантика

Normal / Hover / Focus / Active / Disabled / Error. Тексттин жана индикаторлордун карама- ≥ AA.
Tri-state (чекбокс): бош/жарым-жартылай/тандалган. Жарым-жартылай мамлекет өзү эле кликабалдуу эмес - чыкылдатуу "бош" эмес, "тандалган".
Switch: ачык айырмасы бар "вкл/выкл" түсү жана абалы "runner". Түс - бир гана маани алып жүрүүчү эмес (белги/белги жакын).

5) Copyright жана кол коюу

этиш + объект же ырастоо, ал тандоодо туура болуп калат.

Чекбокс: "Электрондук почта билдирүүлөрүн алуу".
Свитч: "Билдирүүлөр: Вкл/Выкл" (левый лейбл, статус - правый или в самом свитче).
Радио: "Коэффициенттердин форматы: ондук/бөлчөк/америкалык".
кош четке качуу: "өчүрүү жок..." - чаташтырат.

Кооптуу иш-аракеттер үчүн экинчилик сүрөттөлүштү кошуңуз: "Вкл. тез коюмдар (тастыктоосуз) - 5 сек ичинде жокко чыгарылышы мүмкүн"

6) Жеткиликтүүлүк (A11y) жана клавиатура

Чекбокс: 'role = "checkbox"', 'aria-checked = "true' false 'mixed"', Space - которуу.
Switch: native '<input type = "checkbox">' switch көрүү же 'role = "switch' s 'aria-checked'. Чекбокстун жүрүм-туруму.
Радио: 'role = "radiogroup"' контейнерде, 'role = "radio"' элементтерде, жебелер ↑/↓ же ←/→ - тандоону, Space/Enter - тастыктайт.
Топтор: жалпы контекстке 'fieldset '/' legend' колдонуңуз.
Focus шакек көрүнгөн калтыруу; click зоналарынын өлчөмдөрү ≥ 44 × 44 px тактыга.

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) Асинхрондук өзгөрүүлөр жана каталар

Switch + Network: которуу → дароо оптимисттик UI → Server ырастоо → ийгиликсиз жумшак тебүү жана себебин көрсөтүү.
Checkbox/радио боюнча "Save": эч кандай тастыктоо жок болсо - глобалдык жүрүм-турумун өзгөртүүгө болбойт.
Тобокелдик аракеттери: тастыктоо (модалка) же 5-10 сек үчүн undo-панель (эгерде регламент жол берсе).

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 параметрлери үчүн segmented control алмаштырылышы мүмкүн (жакшы бармак менен сокку).
Тизмедеги чекбокстор - чоң басуу аймагы жана тез көп тандоо колдоосу менен.

9) Топтоо үлгүлөрү жана макети

Радио: тик тизме (жакшы сканерден), 2-3 параметрлери үчүн - бир сапта сегменттер.
Чекбоксс: бир тилке боюнча түздөө; узун тизмелер үчүн - "Баарын тандоо" + топтун үч-мамлекеттик.
Switch: сол белги, бир сызык боюнча оң көзөмөл; керек болсо, учурдагы абалын текст менен көрсөтүңүз ("Вкл "/" Выкл ").

10) Антипаттерндер

өзгөрүүлөрдү дароо колдонгон эмес Switch (талап кылат "сактоо").
Көп тандоо мүмкүн болгон радиокоптор.
Чекбокс бири-бирин жокко чыгаруу үчүн ("Эркек/Аял" эки чекбокс катары).
Коркунучтуу кайтарылгыс иш-аракет үчүн бинардык свитч (маалыматтарды алып салуу).
Текстте кош тануулар.
Эгерде ката болсо, фокус жоголот.

11) iGaming өзгөчөлүктөрү (мисалдар)

Коэффициенттердин форматы: "Ондук/Бөлчөк/Америкалык" радиогруппа - дароо колдонулат жана профилде сакталат.
Бат коюм: "Бат коюмдар (тастыктоосуз)" свитч ачык сүрөттөлүшү жана ар бир операциядан кийин 5-10 секунд үчүн undo.
Жазылуу/билдирүүлөр: окуялардын түрлөрү боюнча чекбокстар (утуштар, турнирлер, депозиттер). Топтук чекбокс "Баарын тандоо" - tri-state.
Live-тактоо коэффициенттери: оптимизм менен "Live-режими" өзгөртүп, тармак ката болсо артка кайтарылат.
Жооптуу оюндун лимиттери: мезгилдер үчүн радиокоптор (күн/жума/ай) + сумма талаасы; "эртеңден баштап" кирүү менен өзгөртүлгөн лимитти тастыктоо.

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 rate жана undo-жыштыгы свитчалар боюнча.
тандоо жана радио топтор боюнча validation ката чейин убакыт.
"Баарын тандоо" үлүшү жана кол менен тандоо менен салыштыруу (ылдамдык, тактык).
A/B: көчүрмө белги, тандоо тартиби, радио vs segmented, "дароо" vs "баскычы боюнча".

15) QA-чек тизмеси

Мааниси жана тандоо

• Control тапшырмага туура келет (көп → чекбоксинг; бири N → радио; заматта бинардык → свитч).
• тобокелдүү иш-аракеттер үчүн ырастоо/undo бар.

Жеткиликтүүлүк

• Туура ролдору ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Focus шакектери көрүнүп турат, жебелер радио тобунда иштейт, Space чекбокс/свитч которулат.

Жүрүм-туруму

• Switch өзгөртүүлөр дароо колдонулат; ката болсо - артка чегинүү жана билдирүү.
• Tri-state "баарын тандоо" туура; кликалар иштеп жатат.

Көрүү

• Контраст ≥ AA; абалы түс менен гана берилбейт.
• Click зоналары ≥ 44 × 44 px; тартиби жана текшилөө туруктуу.

Мобилдик

• 2-4 радио параметрлери үчүн Segmented-Control.
• Бармакка тийүү жана жылдыруу карама-каршы келбейт.

16) Дизайн системасында документтер

Компоненттери: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Өлчөмү/анимация/фокус токендери, копирайтинг мисалдары.
Үлгүлөр: "Баарын тандоо" (tri-state), "Заматта колдонуу", "Тобокелдиктен кийин Undo".
Do/Don 't галереясы: кийинкиге калтырылган сактоо свитч (don' t), чекбокстордун ордуна радио (don 't), кыска топтомдор үчүн сегменттер (do).

Кыскача резюме

Контролду тандоо мааниси жана күтүүлөр жөнүндө: чекбокс - көз карандысыз желектер жана топтор, свитч - функцияны дароо күйгүзүү/өчүрүү, радио - топтомдун так бир варианты. Колдооңуз, асинхрондук шарттарды жана көчүрмөлөрдү ойлонуп көрүңүз - жана колдонуучулар жаңылыштык жана сюрпризсиз орнотууларды ишенимдүү түрдө өзгөртүшөт.