Choix des contrôleurs : checkbox, pull, radio

1) Différences clés (sens, pas « dessin »)

• Vous avez besoin de l'un des N, prenez la radio.
• N'importe quel ensemble de drapeaux est nécessaire.
• J'ai besoin d'un puzzle binaire qui change de comportement tout de suite.

2) Arbre de décision (court)

1. Quelques élections indépendantes ? → Chekbox.
2. C'est exactement une option de l'ensemble ? → Radiocopies (ou segment de contrôle/tagles).
3. Un drapeau binaire, l'effet est instantané et visible ? → Pull.
4. Besoin d'une marque « partielle » (sous-ensemble) ? → Chekbox avec tri-state.
5. Le risque/coût est élevé (paiement, modération) ? → Radio/checkbox + confirmation (pas de pull).

3) Comportement et attentes de l'utilisateur

Pull = résultat instantané. Après le basculement, l'utilisateur attend un effet immédiat et une réversibilité sans « Save » séparé.
Checkbox = sélection des options. Peut être appliqué directement ou par bouton - il est important d'afficher explicitement le modèle (« Paramètres enregistrés »/« Cliquez sur Enregistrer »).
Radio = sélection du mode. Une transition peut reconstruire l'interface. Signalez les changements (microanimation/texte).

4) États et sémantique visuelle

Normal / Hover / Focus / Active / Disabled / Error. Contraste du texte et des indicateurs ≥ AA.
Tri-state (checkbox) : vide/partiel/sélectionné. L'état partiel n'est pas lisible en soi - le clic change en « sélectionné » plutôt qu'en « vide ».
Pull : a une distinction claire « on/off » par la couleur et la position du « coureur ». La couleur n'est pas le seul porteur de sens (icône/label à côté).

5) Copywriting et signatures

Verbe + objet ou affirmation qui devient vrai au choix.

Checkbox : « Recevoir des notifications par e-mail ».
Switch : « Notifications : On/Off » (label à gauche, état à droite ou dans le switch lui-même).
Radio : « Format des coefficients : Décimal/Fractionné/Américain ».
Évitez les doubles dénégations : « Ne vous déconnectez pas... » - confuse.

Pour les actions à risque, ajoutez une description secondaire : "Incl. paris rapides (sans confirmation) - peut être annulé dans les 5 secondes"

6) Accessibilité (A11y) et clavier

Checkbox : 'role = « checkbox »,' aria-checked = « true 'false' mixed », Space - commutation.
Pull : natif '<input type = « checkbox »>' avec le visuel du pull ou 'role = « switch » avec' aria-checked '. Comportement comme le checkbox (Espace).
Radio : 'role = « radiogroup » sur le conteneur,' role = « radio » sur les éléments, les flèches de ↑/↓ ou de ←/→ - déplacer la sélection, Space/Enter - confirment.
Groupes : utilisez 'fieldset '/' legend' pour un contexte commun.
Laisser les anneaux de focus visibles ; la taille des zones de la clique ≥ 44 × 44 px par tache.

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) Modifications et erreurs asynchrones

Switch + réseau : basculement → UI immédiatement optimiste → confirmation du serveur → en cas d'échec, nous retournons doucement et montrons la cause.
Checkbox/radio par « Save » : pas encore de confirmation - ne modifiez pas le comportement global.
Activités à risque : confirmation (modelage) ou panneau undo de 5 à 10 secondes (si le règlement l'autorise).

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) Modèles mobiles

Switch est le contrôle binaire principal dans les paramètres sur les mobiles.
La radio peut être remplacée par un contrôle segmenté pour 2 à 4 options (mieux vaut frapper avec le doigt).
Chekbox sur les listes - avec une grande zone de clics et le soutien de la multiélection rapide.

9) Modèles de groupement et de mise en page

Radio : liste verticale (mieux numérisée), pour 2-3 options - segments d'une ligne.
Checkbox : alignement sur une colonne ; pour les listes longues - « Sélectionner tout » + tri-state du groupe.
Switch : label à gauche, contrôleur à droite sur une ligne ; Montrez l'état actuel avec le texte si nécessaire (Activé/Désactivé).

10) Anti-modèles

Pull qui n'applique pas les modifications immédiatement (nécessite « Enregistrer »).
Des cartes radio où le choix multiple est possible.
Checkbox pour les options mutuellement exclusives (« mâle/femelle » comme deux checkbox).
Pull binaire pour une action dangereuse et irréversible (supprimer les données).
Double déni dans le texte.
Modifier la mise en page en cas d'erreur de sorte que le focus est perdu.

11) Spécificités iGaming (exemples)

Format des coefficients : Groupe radio « Décimal/Fractionné/Américain » - s'applique immédiatement et est enregistré dans le profil.
Mise rapide : pull « Paris rapides (sans confirmation) » avec description explicite et undo pour 5-10 secondes après chaque opération.
Abonnements/notifications : checkbox par type d'événement (gains, tournois, dépôts). Le checkbox de groupe « Sélectionner tout » est tri-state.
Mises à jour en direct des coefficients : pull « Mode Live » avec optimisme et retour en arrière en cas d'erreur réseau.
Limites du jeu responsable : cartes radio pour les périodes (jour/semaine/mois) + champ de somme ; confirmation de la limite modifiée avec entrée « à partir de demain ».

12) Tokens de système de conception (exemple)

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) Snappets de logique 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étriques et expériences

Taux de Misclick et fréquence undo par pull.
Temps avant sélection et erreur de validation par groupes radio.
Part « Tout choisir » et comparaison avec la sélection manuelle (vitesse, précision).
A/B : rédaction des labels, ordre des options, segmented vs radio, « appliquer immédiatement » vs « par le bouton ».

15) Liste de vérification QA

Sens et choix

• Le contrôleur correspond à la tâche (multiple → chekbox ; l'un des N → de la radio ; binaire instantané → pull).
• Pour les actions risquées, il y a confirmation/non.

Disponibilité

• Rôles corrects ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Les anneaux de focus sont visibles, les flèches fonctionnent dans le groupe radio, Space bascule checkbox/pull.

Comportement

• Switch applique les changements immédiatement ; en cas d'erreur, un retour en arrière et un message.
• Tri-state de « Sélectionner tout » est correct ; les clics sur le label fonctionnent.

Visuel

• Contraste ≥ AA ; l'état n'est pas seulement transmis par la couleur.
• Zones de clique ≥ 44 × 44 px ; l'ordre et l'alignement sont stables.

Mobile

• Contrôle segmenté pour 2-4 variantes radio testées pour tache.
• Frapper avec le doigt et défiler ne sont pas en conflit.

16) Documentation dans le système de conception

Composants : 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Tokens de taille/animation/focus, exemples de copywriting.
Patterns : « Sélectionner tout » (tri-state), « Application instantanée », « Undo après risque ».
Do/Don't-gallery : pull avec conservation différée (don't), radio au lieu de checkbox (don't), segments pour jeux courts (do).

Résumé succinct

Le choix du contrôleur est sur le sens et les attentes : les checkbox sont des drapeaux et des groupes indépendants, le pull est l'allumage/l'arrêt instantané de la fonction, la radio est exactement une option de l'ensemble. Soutenez la disponibilité, réfléchissez aux états asynchrones et à la rédaction - et les utilisateurs changeront en toute confiance les paramètres sans erreurs ni surprises.