Бақылауларды таңдау: чекбокс, свитч, радиоұнтақ

1) Негізгі айырмашылықтар (мағынасы, «сурет» емес)

• N-дің біреуі қажет болса, радионы алыңыз.
• Кез келген жалаулар - чек бокстар керек.
• Мінез-құлықты бірден өзгертетін бір бинарлық тумблер керек - свитч.

2) Шешім ағашы (қысқа)

1. Бірнеше тәуелсіз сайлау? → Чекбокстар.
2. Жиынтықтан дәл бір нұсқа? → Радиоұнтақтар (немесе сегмент-бақылау/тегтер).
3. Бір бинарлық жалау, жылдам және айқын әсер? → Свитч.
4. «Ішінара» белгісі керек пе? → tri-state бар чекбокс.
5. Тәуекел/құны жоғары (төлем, модерация)? → Радио/чекбокс + растау (свитч емес).

3) Пайдаланушының мінез-құлқы және күтулері

Свитч = бір сәттік нәтиже. Қайта қосылғаннан кейін пайдаланушы жеке «Сақтау» әрекетінсіз дереу әсер етуді және кері қайтаруды күтеді.
Checkbox = параметрлерді таңдау. Бірден немесе батырмамен қолдануға болады - үлгіні анық көрсету маңызды («Параметрлер сақталған »/« Сақтау түймешігін басыңыз»).
Радио = режимді таңдау. Өту интерфейсті қайта құруы мүмкін. Өзгерістерге сигнал беріңіз (микроанимация/мәтін).

4) Жай-күй және визуалды семантика

Normal / Hover / Focus / Active / Disabled / Error. Мәтін мен АА ≥ индикаторларының қарама-қайшылығы.
Tri-state (чекбокс): бос/ішінара/таңдалған. Ішінара жай-күй өз-өзінен ажыратылмайды - нұқу «бос» емес, «таңдалған» күйге ауыстырады.
Свитч: «жүгіргіштің» түсі мен орналасуы бойынша «вкл/выкл» нақты айырмашылығы бар. Түс - жалғыз мағынаны жеткізуші емес (қатар белгі/лейбл).

5) Копирайтинг және қолтаңбалар

Таңдау кезінде ақиқат болатын етіс + нысан немесе бекіту.

Чекбокс: «E-mail хабарламаларын алу».
Свитч: «Хабарламалар: Қосылған/Жабық» (лейбл сол жақта, жай-күйі - оң жақта немесе свитчтің өзінде).
Радио: «Коэффициент форматы: ондық/бөлшек/американдық».
Екі рет: «Өшірілмесін...» - шатастырады.

Қауіпті әрекеттер үшін екінші сипаттаманы қосыңыз: "Қосылған. жылдам мөлшерлемелер (растаусыз) - 5 сек ішінде алып тастауға болады"

6) Қол жетімділік (A11y) және пернетақта

Checbox: 'role =' checkbox ',' aria-checked = 'true' false 'mixed', Space - қайта қосу.
Свитч: жергілікті '<input type = «checkbox»>' көрнекі свитч немесе 'role = «switch»' c 'aria-checked'. Чекбокстағы сияқты мінез-құлық (Space).
Радио: 'role = «radiogroup» контейнерде,' role = «radio» элементтерде, сілтемелер ↑/↓ немесе ←/→ - таңдауды жылжытады, Space/Enter - растайды.
Топтар: 'fieldset '/' legend' дегенді ортақ контексті үшін пайдаланыңыз.
Фокус-сақинаны көрінетін етіп қалдырыңыз; ≥ 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) Асинхронды өзгерістер мен қателер

Свитч + желі: ауыстырып қосу → бірден оптимистік UI → сервер растауы → сәтсіздікке ұшыраған кезде жұмсақ домалатып, себебін көрсетеді.
«Сақтау» арқылы CheckBox/Radio: әлі растау жоқ - жаһандық мінез-құлықты өзгертпеңіз.
Қауіпті іс-қимылдар: растау (модалка) немесе 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 ауыстырылады (саусақпен түсу жақсы).
Тiзiмдегi чек-бокстар - үлкен шертпе аумағымен және жылдам мультивыборды қолдайды.

9) Топтаманың және макеттің үлгілері

Радио: тік тізім (жақсы сканерленеді), 2-3 нұсқа үшін - бір жолға сегменттер.
Чекбокстер: бір баған бойынша түзету; ұзын тізімдер үшін - «Барлығын таңдау» + топтан tri-state.
Свитч: сол жақтағы лейбл, оң жақтағы бақылау бір сызықта; қажет болған жағдайда ағымдағы күйді мәтінмен көрсетіңіз («Қосылған «/» Жабық »).

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

Өзгерістерді бірден қолданбайтын свитч («Сақтау» керек).
Көп таңдау болуы мүмкін радиожүктер.
Өзара ерекшеленетін нұсқаларға арналған чекбокс («Ерлер/Әйелдер» екі чекбокс ретінде).
Қауіпті қайтарымсыз әрекетке арналған бинарлық свитч (деректерді жою).
Мәтіндегі екі рет теріске шығару.
Қате кезінде орналасуды өзгерту, фокусты жоғалтады.

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 жиілігі.
Таңдауға дейінгі уақыт және радио топтар бойынша валидация қателері.
«Бәрін таңдау» үлесі және қолмен таңдаумен салыстыру (жылдамдық, дәлдік).
A/B: лейблдердің копирайтингі, опциялар тәртібі, segmented vs radio, «бірден» vs «түймешігі бойынша қолдану».

15) QA-чек парағы

Мағынасы және таңдауы

• Бақылау тапсырмаға сәйкес келеді (көпше → чек-бокс; бір N → радио; жедел бинарлық → свитч).
• Қауіпті әрекеттер үшін/undo растауы бар.

Қол жетімділік

• Дұрыс рөлдер ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Фокус сақиналары көрініп тұр, сілтемелер радио топта жұмыс істейді, Space чекбокс/свитч қосады.

Мінез-құлық

• Свитч өзгерістерді бірден қолданады; қате болған жағдайда - кері қайтару және хабарлама.
• Tri-state «Барлығын таңдау» дұрыс; кликтер жұмыс істейді.

Визуалды

• Контраст ≥ AA; күйі тек түспен берілмейді.
• Басу аймақтары ≥ 44 × 44 px; тәртіп және теңестіру тұрақты.

Мобильді

• 2-4 радио нұсқалары үшін Segmented-бақылау тачқа тестіленді.
• Саусақпен соғу мен айналдыру қайшы келмейді.

16) Дизайн-жүйедегі құжаттама

Компоненттер: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Өлшем/анимация/фокус токендері, копирайтинг мысалдары.
Паттерндер: «Бәрін таңдау» (tri-state), «Дереу қолдану», «Тәуекелден кейін Undo».
Do/Don 't-галереясы: сақталуы кейінге қалдырылған свитч (don' t), чекбокстардың орнына радио (don 't), қысқа жиынтықтарға арналған сегменттер (do).

Қысқаша түйіндеме

Бақылауды таңдау - бұл мағынасы мен күтулері туралы: чекбокс - тәуелсіз жалаулар мен топтар, свитч - функцияны бірден қосу/сөндіру, радио - жиынтықтың дәл бір нұсқасы. Қол жетімділікті қолдаңыз, асинхронды жағдайларды және копирайтингті ойлаңыз - және пайдаланушылар параметрлерді қателерсіз және күтпеген жерден сенімді түрде өзгертеді.