Вибір контролів: чекбокс, світч, радіокнопка

1) Ключові відмінності (сенс, не «малюнок»)

• Потрібен один з N - беріть радіо.
• Потрібен будь-який набір прапорів - чекбокси.
• Потрібен один бінарний тумблер, який відразу змінює поведінку - світч.

2) Дерево рішень (коротко)

1. Кілька незалежних виборів? → Чекбокси.
2. Рівно один варіант з набору? → Радіокнопки (або сегмент-контрол/тегли).
3. Один бінарний прапор, ефект миттєвий і помітний? → Світч.
4. Потрібна «часткова» позначка (підмножина)? → Чекбокс з tri-state.
5. Ризик/вартість високі (платіж, модерація)? → Радіо/чекбокс + підтвердження (не світч).

3) Поведінка та очікування користувача

Світч = моментальний результат. Після перемикання користувач очікує негайного ефекту і оборотності без окремих «Зберегти».
Чекбокс = вибір опцій. Може застосовуватися відразу або по кнопці - важливо явно показати модель («Налаштування збережені »/« Натисніть Зберегти»).
Радіо = вибір режиму. Перехід може перебудовувати інтерфейс. Сигналізуйте зміни (мікроанімація/текст).

4) Стани та візуальна семантика

Normal / Hover / Focus / Active / Disabled / Error. Контраст тексту та індикаторів ≥ AA.
Tri-state (чекбокс): порожньо/частково/вибрано. Частковий стан некликабельно сам по собі - клік змінює на «вибрано», а не «порожньо».
Світч: має чітку відмінність «вкл/викл» за кольором і положенням «бігунка». Колір - не єдиний носій сенсу (іконка/лейбл поруч).

5) Копірайтинг і підписи

Дієслово + об'єкт або твердження, яке стає істинним при виборі.

Чекбокс: «Отримувати e-mail-повідомлення».
Світч: "Повідомлення: Вкл/Викл" (лейбл ліворуч, стан - праворуч або в самому світчі).
Радіо: "Формат коефіцієнтів: Десятковий/Дробовий/Американський".
Уникайте подвійних заперечень: «Не відключати...» - заплутує.

Для ризикованих дій додавайте вторинний опис: "Вкл. швидкі ставки (без підтвердження) - можна скасувати протягом 5 сек"

6) Доступність (A11y) і клавіатура

Чекбокс: 'role = «checkbox»','aria-checked = «true'false'mixed»', Space - перемикання.
Світч: нативний'< input type = «checkbox»>'з візуалом світчу або'role = «switch»'з'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 → підтвердження сервера → при неуспіху м'яко відкочуємо і показуємо причину.
Чекбокс/радіо по «Зберегти»: поки немає підтвердження - не змінюйте глобальну поведінку.
Ризиковані дії: підтвердження (модалка) або undo-панель на 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) Мобільні патерни

Світч - основний бінарний контроль в налаштуваннях на мобільних.
Радіо можна замінити segmented control для 2-4 опцій (краще потрапляння пальцем).
Чекбокси в списках - з великою областю кліка і підтримкою швидкого мультивибору.

9) Патерни угруповання і макета

Радіо: вертикальний список (краще сканується), для 2-3 варіантів - сегменти в один рядок.
Чекбокси: вирівнювання по одній колонці; для довгих списків - «Вибрати все» + tri-state у групи.
Світч: лейбл ліворуч, контролював праворуч на одній лінії; показуйте поточний стан текстом при необхідності («Вкл «/» Викл »).

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

Світч, який не застосовує зміни відразу (вимагає «Зберегти»).
Радіокнопки, де можливий множинний вибір.
Чекбокс для взаємовиключних варіантів («Чоловічий/Жіночий» як два чекбокси).
Бінарний світч для небезпечної незворотної дії (видалити дані).
Подвійні заперечення в тексті.
Зміна макета при помилці так, що фокус втрачається.

11) Специфіка iGaming (приклади)

Формат коефіцієнтів: радіогрупа «Десяткові/Дробові/Американські» - застосовується відразу і зберігається в профіль.
Швидка ставка: світч «Швидкі ставки (без підтвердження)» з явним описом і undo на 5-10 сек після кожної операції.
Підписки/повідомлення: чекбокси за типами подій (виграші, турніри, депозити). Груповий чекбокс «Вибрати все» - 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; порядок і вирівнювання стабільні.

Мобільні

• Segmented-контрол для 2-4 радіо-варіантів тестований на тач.
• Потрапляння пальцем і прокрутка не конфліктують.

16) Документація в дизайн-системі

Компоненти: `Checkbox`, `Switch`, `RadioGroup`/`SegmentedControl`.
Токени розмірів/анімацій/фокусу, приклади копірайтингу.
Патерни: «Вибрати все» (tri-state), «Миттєве застосування», «Undo після ризику».
Do/Don't-галерея: світч з відкладеним збереженням (don't), радіо замість чекбоксів (don't), сегменти для коротких наборів (do).

Коротке резюме

Вибір контролу - це про сенс і очікування: чекбокс - незалежні прапори і групи, світч - миттєве включення/вимикання функції, радіо - рівно один варіант з набору. Підтримайте доступність, продумайте асинхронні стани і копірайтинг - і користувачі будуть впевнено змінювати налаштування без помилок і сюрпризів.