Scelta dei controlli: checkbox, maglioncino, radio

1) Differenze chiave (significato, non «disegno»)

• Mi serve uno dei N - prendete la radio.
• Ci servono tutte le bandiere - checkbox.
• Ci serve un nebbler binario che cambi comportamento, un maglione.

2) Albero delle soluzioni (breve)

1. Qualche elezione indipendente?
2. Una versione esatta del set? Radio (o segmento-controllo/tag).
3. Una bandiera binaria, l'effetto è immediato e visibile?
4. C'è bisogno di un sottoinsieme «parziale»?
5. Rischio/costo elevato (pagamento, moderazione)?

3) Comportamento e attesa dell'utente

Maglione = risultato immediato. Dopo il passaggio, l'utente si aspetta l'effetto immediato e la reversibilità senza Salvare separatamente.
Checkbox = scegliere le opzioni. Può essere applicato direttamente o con un pulsante: è importante visualizzare esplicitamente il modello (Impostazioni salvate/Premi Salva).
Radio = selezione della modalità. La transizione può ridisegnare l'interfaccia. Segnala le modifiche (microanimazione/testo).

4) Stati e semantica visiva

Normal / Hover / Focus / Active / Disabled / Error. Contrasto tra testo e indicatori AA.
Tri-state (checkbox): vuoto/parziale/selezionato. Lo stato parziale non è in sé, il click cambia in «scelto», non «vuoto».
Sweetch ha una chiara distinzione tra il colore e la posizione del corridore. Il colore non è l'unico supporto di significato (icona/etichetta accanto).

5) Copiratting e firme

Verbo + oggetto o affermazione che diventa vero quando si seleziona.

Checkbox: «Ricevi e-mail».
Switch: Notifiche attivate/disattivate (etichetta a sinistra, stato a destra o nel maglione).
Radio: «Formato dei coefficienti: Decimale/Frazionario/Americano».
Evitare la doppia negazione: «Non disattivare...» - confonde.

Per le azioni rischiose, aggiungere una descrizione secondaria: "Attivato. puntate veloci (senza conferma) - È possibile annullare entro 5 secondi"

6) Disponibilità (A11y) e tastiera

Checkbox: «role =» checkbox «,» aria-checked = «true» false «mixed», Space è un cambio.
Sweetch: nativo "<input type =" checkbox ">" con l'immagine del maglione o "rolle =" switch "con" aria-checked ". Comportamento simile a quello di un checkbox (Space).
Radio: «role =» radiogroup «sul contenitore,» rolle = «radio» sugli elementi, frecce ↑/↓ o ←/→ - spostano la selezione, Space/Enter - confermano.
Gruppi: usa fieldset/legend per il contesto generale.
Lasciate visibili gli anelli di fuoco; Dimensioni del click 44 x 44 px per serbatoio.

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) Modifiche e errori asincroni

Switch + Rete: il cambio di è subito ottimistico, la conferma del server del server di in caso di malfunzionamento si ritira in modo morbido e mostra il motivo.
Checkbox/Radio su Salva - nessuna conferma - non cambiare il comportamento globale.
Azioni rischiose: conferma (Modalk) o dashboard undo di 5-10 secondi (se la regola è consentita).

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) Pattern mobili

Il switch è il controllo binario principale nelle impostazioni sul mobile.
La radio può essere sostituita con un controllo segmentato per 2-4 opzioni (meglio un dito).
I Checkbox sono elencati con una grande area click e il supporto per la selezione rapida.

9) Pattern di raggruppamento e layout

Radio: elenco verticale (scansione migliore), per 2-3 varianti, segmenti in una riga.
Checkbox: allineamento in una singola colonna; per elenchi lunghi - Seleziona tutto + tri-state nel gruppo.
Switch: etichetta a sinistra, controllo a destra su una linea; Mostra lo stato corrente con il testo, se necessario (Attivato/Disattivato).

10) Antipattern

Un maglione che non applica le modifiche immediatamente (richiede Salva).
Radioconfezioni dove ci sono possibilità di scelte multiple.
Checkbox per le opzioni reciprocamente escluse («Maschio/Femmina» come due checkbox).
Un maglione binario per una pericolosa azione irreversibile (eliminare i dati).
Doppia negazione nel testo.
Modificare il layout quando si verifica un errore in modo che si perda l'attivazione.

11) Particolare iGaming (esempi)

Formato dei coefficienti: raggruppamento radiofonico Decimale/Frazionario/Americano: viene applicato e salvato nel profilo.
Tasso rapido: «Puntate veloci (senza conferma)» con descrizione esplicita e undo di 5-10 secondi dopo ogni operazione.
Iscrizioni/notifiche: checbox per tipo di evento (vincite, tornei, depositi). Checkbox di gruppo Seleziona tutto - tri-state.
Gli aggiornamenti live dei coefficienti includono il maglionco'Live-Model ', con ottimismo e reimpostazione in caso di errore di rete.
Limiti di gioco responsabile: valori radio per periodi (giorno/settimana/mese) + campo di importo; conferma del limite modificato con l'iscrizione «da domani».

12) Token di progettazione (esempio)

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) Snippet della logica 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) Metriche ed esperimenti

Misclick rate e frequenza undo per pergamena.
Tempo prima della selezione e errori di convalida per raggruppamenti radio.
La quota Seleziona tutto e il confronto con la scelta manuale (velocità, precisione).
A/B: copiatura delle etichette, ordine delle opzioni, segmented vs radio, "applica subito" vs "su un pulsante.

15) Lista assegni QA

Senso e scelta

• Il controllo corrisponde a un'attività (checkbox multiplo); Uno della N Radio →; binario istantaneo).
• Per le azioni rischiose c'è la conferma/undo.

Disponibilità

• Ruoli corretti («checkbox »/« switch »/« radiogroup »/« radio»), «aria-checked »/« indeterminate».
• Gli anelli di fuoco sono visibili, le frecce funzionano in un gruppo radio, Space alterna checkbox/pullman.

Comportamento

• Il maglione applica le modifiche immediatamente; in caso di errore, ripristino e messaggio.
• Tri-state in Seleziona tutto è corretto; I click discografici funzionano.

Visualizzazione

• Contrasto dell'AA; lo stato non viene trasmesso solo con il colore.
• Zone click 44 x 44 px; l'ordine e l'allineamento sono stabili.

Mobile

• Il controllo segmentato per 2-4 varianti radio è stato testato per il serbatoio.
• Il dito e lo scorrimento non sono in conflitto.

16) Documentazione in progettazione

Componenti: «Checkbox», «Switch», «RadioGroup »/« SegmentedControl».
Token di dimensioni/animazioni/focus, esempi di copiatura.
Pattern: Seleziona tutto (tri-state), Applica istantanea, Undo dopo il rischio.
Do/Don't-gallery - Maglione con conservazione ritardata (don't), radio invece di checkbox (don't), segmenti per set brevi (do).

Breve riepilogo

La scelta del controllore è il significato e l'attesa: checkbox - bandiere e gruppi indipendenti, maglioncino - attivazione/disattivazione istantanea della funzione, radio - esattamente una versione del set. Mantenete la disponibilità, riflettete gli stati asincrona e il copirating e gli utenti cambieranno le impostazioni senza errori o sorprese.