Selectarea comenzilor: casetă de selectare, comutator, buton radio

1) Diferențe cheie (înțeles, nu „figură”)

• Nevoie de unul dintre N - ia radio.
• Ai nevoie de orice set de steaguri - casete de selectare.
• Aveți nevoie de un comutator binar de comutare care schimbă imediat comportamentul - comutator.

2) Arbore de decizie (scurt)

1. Câteva alegeri independente? → Casete de selectare.
2. Exact o opțiune din set? → Butoane radio (sau segment-comenzi/tag-uri).
3. Un steag binar, efectul este instant și vizibil? → Intrerupator.
4. Aveți nevoie de un marcaj „parțial” (subset)? → Casetă de selectare cu tri-stat.
5. Riscul/costul este mare (plata, moderare)? → Radio/caseta de selectare + confirmare (nu comutare).

3) Comportamentul și așteptările utilizatorilor

Comutator = rezultat instantaneu. După comutare, utilizatorul se așteaptă la un efect imediat și reversibilitate fără Salvare separată.
Caseta de selectare = alegerea opțiunilor. Poate fi aplicat imediat sau prin buton - este important să afișați explicit modelul („Setări salvate „/” Salvare ”).
Radio = modul de selecție. Tranziția poate reconstrui interfața. Modificări de semnal (microanimare/text).

4) Stări și semantică vizuală

Normal/Hover/Focus/Activ/Dezactivat/Eroare. Contrastul dintre text și indicatori ≥ AA.
Tri-state (caseta de selectare): gol/parțial/selectat. Starea parțială nu este clicabilă în sine - clicul se schimbă în „selectat”, și nu „gol”.
Comutator: Are o distincție clară între culoare și poziția alergătorului. Culoarea nu este singurul purtător de sens (pictogramă/etichetă din apropiere).

5) Copywriting și semnături

Verb + obiect sau declarație care devine adevărată atunci când este selectată.

Caseta de selectare: „Primiți notificări prin e-mail”.
Comutator: „Notificări: Pornit/Oprit” (etichetă pe stânga, stare - pe dreapta sau în comutatorul în sine).
Radio: „Coeficient Format: Decimal/Fracțional/American”.
Evitați dezmințirile duble: „Nu deconectați”... - confuzii.

Pentru acțiuni riscante, adăugați o descriere secundară: "On. Pariuri rapide (fără confirmare) - Puteţi anula în 5 secunde"

6) Accesibilitate (A11y) și tastatură

Caseta de selectare: 'rol =' caseta de selectare '', 'aria-checked =' true 'false' mixt' ', Space - comutare.
Switch: nativ '<input type = „checkbox”>' cu comutator vizual sau 'rol = „switch”' cu 'aria-checked'. Comportament asemănător casetei de selectare (Space).
Radio: 'rol =' radiogroup '' pe container, 'rol =' radio 'pe elementele, săgețile ↑/↓ sau ←/→ - mutați alegerea, Space/Enter - confirmați.
Grupuri: Utilizați „fieldset ”/„ legendă” pentru context general.
Lăsați inelele de focalizare vizibile; dimensiunile zonelor cu clic ≥ 44 × 44 px per atingere.

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) Modificări și erori asincrone

Comutator + rețea: comutare → imediat optimist UI → confirmarea serverului → dacă nu a reușit, rola ușor înapoi și arată motivul.
Caseta de selectare/radio pe „Salvați”: nu există încă nicio confirmare - nu schimbați comportamentul global.
Acțiuni riscante: confirmare (modalka) sau anulare a panoului timp de 5-10 secunde (dacă reglementările permit).

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) Modele mobile

Comutatorul este principalul control binar în setările de pe mobil.
Radioul poate fi înlocuit cu un control segmentat pentru 2-4 opțiuni (lovirea degetului este mai bună).
Casetele de selectare din liste - cu o suprafață mare de clic și suport pentru selecție multiplă rapidă.

9) Modele de grupare și aspect

Radio: listă verticală (mai bine scanat), pentru 2-3 opțiuni - segmente într-o singură linie.
Casete de selectare: aliniere cu o coloană; pentru liste lungi - „Selectați toate” + tri-state pentru grup.
Comutator: etichetă pe stânga, control pe dreapta pe aceeași linie; afișați starea curentă cu textul după cum este necesar (On/Off).

10) Antipattern

Comutator, care nu se aplică modificări imediat (necesită „Salvare”).
Butoane radio unde sunt posibile mai multe selecții.
Caseta de selectare pentru opțiuni exclusive reciproc („Bărbat/Femeie” ca două casete de selectare).
Comutator binar pentru acțiune ireversibilă periculoasă (ștergeți datele).
Două negaţii în text.
Modificați aspectul erorii, astfel încât focalizarea să fie pierdută.

11) iGaming specificul (exemple)

Formatul coeficienților: Grupul radio zecimal/fracțional/american - se aplică imediat și se salvează în profil.
Pariu rapid: Pariuri rapide (fără confirmare) comutați cu descriere explicită și anulați timp de 5-10 secunde după fiecare operație.
Abonamente/notificări: casete de selectare după tipul de eveniment (câștiguri, turnee, depozite). Caseta de selectare a grupului „Selectați toate” - tri-stat.
Actualizări live ale coeficienților: comutați „Live-mode” cu optimism și rollback pe eroarea de rețea.
Limite de joc responsabil: butoane radio pentru perioade (zi/săptămână/lună) + câmp cantitativ; confirmarea limitei modificate cu mențiunea „de mâine”.

12) Proiectarea tokenurilor sistemului (exemplu)

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) Fragmente logice 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) Măsurători și experimente

Misclick rata și anula frecvența pe comutatoare.
Timpul până la erorile de selecție și validare de către grupurile radio.
Proporția „Selectați toate” și compararea cu selecția manuală (viteză, precizie).
A/B: copywriting etichetă, ordine opțiune, segmentate vs radio, „se aplică imediat” vs „prin buton”.

15) Lista de verificare QA

Semnificație și alegere

• Controlul corespunde sarcinii (mai multe → casete de selectare; unul dintre radiourile N →; binare instantanee → comutator).
• Pentru acțiuni riscante, există confirmare/anulare.

Disponibilitate

• Roluri corecte ('caseta de selectare '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' nedeterminate'.
• Focus inele sunt vizibile, săgețile funcționează într-un grup radio, Spațiu comută caseta de selectare/comutator.

Comportament

• Switch aplică modificările imediat; pe eroare - rollback și mesaj.
• Tri-state pentru „Selectați toate” este corect; clicuri de etichete de lucru.

Vizual

• Contrast ≥ AA; statul nu este numai de culoare.
• Click zone ≥ 44 × 44 px; ordinea și alinierea sunt stabile.

Mobil

• Control segmentat pentru 2-4 variante radio testate pentru atingere.

Lovirea și defilarea degetelor nu intră în conflict.

16) Documentația în sistemul de proiectare

Componente: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Dimensiune/animație/focus token-uri, exemple de copywriting.
Modele: „Selectați toate” (tri-stat), „Aplicație instantanee”, „Anulați după risc”.
Do/Don' t galerie: întârziat-salvare comutator (don' t), radio în loc de casete de selectare (don' t), segmente pentru seturi scurte (do).

Scurt rezumat

Alegerea controlului este despre sens și așteptări: caseta de selectare - steaguri și grupuri independente, comutatorul - funcția instant on/off, radio - exact o opțiune din set. Mențineți disponibilitatea, gândiți-vă la stările asincrone și copywriting - iar utilizatorii vor schimba cu încredere setările fără erori sau surprize.