Auswahl der Kontrollen: Checkbox, Switch, Radio-Button

1) Hauptunterschiede (Bedeutung, nicht „Zeichnung“)

• Brauchen Sie eine der N - nehmen Sie das Radio.
• Sie benötigen jeden Satz von Flaggen - Checkboxen.
• Sie benötigen einen binären Kippschalter, der das Verhalten sofort ändert - einen Sweater.

2) Entscheidungsbaum (kurz)

1. Mehrere unabhängige Wahlen? → Checkboxen.
2. Genau eine Option aus dem Set? → Radio-Tasten (oder Segment-Control/Tags).
3. Eine binäre Flagge, der Effekt ist sofort und spürbar? → Switch.
4. Benötigen Sie eine „partielle“ Markierung (Teilmenge)? → Checkbox mit Tri-State.
5. Risiko/Kosten hoch (Zahlung, Moderation)? → Radio/Checkbox + Bestätigung (kein Switch).

3) Nutzerverhalten und Erwartungen

Switch = sofortiges Ergebnis. Nach dem Wechsel erwartet der Anwender eine sofortige Wirkung und Reversibilität ohne separate „Save“.
Checkbox = Auswahl der Optionen. Kann sofort oder per Button angewendet werden - wichtig ist, das Modell explizit anzuzeigen („Einstellungen gespeichert “/„ Klick Speichern“).
Radio = Auswahl des Modus. Der Übergang kann die Schnittstelle neu aufbauen. Signalisieren Sie Änderungen (Mikroanimation/Text).

4) Zustände und visuelle Semantik

Normal / Hover / Focus / Active / Disabled / Error. Der Kontrast von Text und Indikatoren ≥ AA.
Tri-State (Checkbox): leer/teilweise/ausgewählt. Ein Teilzustand ist an sich unscheinbar - ein Klick wechselt zu „ausgewählt“ und nicht zu „leer“.
Switch: hat eine klare „Ein/Aus“ Unterscheidung nach Farbe und Position des „Läufers“. Farbe ist nicht der einzige Bedeutungsträger (Icon/Label daneben).

5) Copywriting und Unterschriften

Verb + Objekt oder Aussage, die bei Auswahl wahr wird.

Checkbox: „E-Mail-Benachrichtigungen erhalten“.
Switch: „Benachrichtigungen: Ein/Aus“ (Label links, Zustand rechts oder im Switch selbst).
Radio: „Koeffizientenformat: Dezimal/Bruchzahl/Amerikanisch“.
Doppelte Verneinungen vermeiden: „Nicht abschalten...“ - verwirrt.

Für riskante Aktivitäten fügen Sie eine sekundäre Beschreibung hinzu: "Ein. Schnellwetten (ohne Bestätigung) - kann innerhalb von 5 Sekunden storniert werden"

6) Verfügbarkeit (A11y) und Tastatur

Checkbox: 'role =' checkbox', 'aria-checked =' true' false' mixed', Space - umschalten.
Switch: nativ'<Eingabetyp = „checkbox“> 'mit einem Switch-Visual oder' role = „switch“ 'mit' aria-checked'. Verhalten wie bei einer Checkbox (Space).
Radio: 'role =' radiogroup 'auf dem Container,' role = 'radio' auf den Elementen, Pfeile ↑/↓ oder ←/→ - bewegen die Auswahl, Space/Enter - bestätigen.
Gruppen: Verwenden Sie' fieldset '/' legend 'für den allgemeinen Kontext.
Fokusringe sichtbar lassen; Die Größe der Klickzonen ≥ 44 × 44 px pro Touch.

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) Asynchrone Änderungen und Fehler

Switch + Netzwerk: Wechseln Sie → sofort optimistische UI → bestätigen Sie den Server → rollen Sie bei einem Fehler sanft zurück und zeigen Sie die Ursache.
Checkbox/Radio per „Save“: Solange es keine Bestätigung gibt - das globale Verhalten nicht ändern.
Riskante Aktionen: Bestätigung (Modalka) oder Undo-Panel für 5-10 Sekunden (wenn die Vorschriften es zulassen).

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) Mobile Muster

Switch ist die wichtigste binäre Kontrolle in den Einstellungen auf dem Handy.
Das Radio kann durch eine segmentierte Steuerung für 2-4 Optionen ersetzt werden (es ist besser, einen Finger zu treffen).
Checkboxen auf Listen - mit einem großen Klickbereich und Unterstützung für eine schnelle Multiwahl.

9) Gruppierungs- und Layoutmuster

Radio: vertikale Liste (besser gescannt), für 2-3 Optionen - Segmente in einer Zeile.
Checkboxen: Ausrichtung auf eine Spalte; für lange Listen - „Alles auswählen“ + Tri-Status in der Gruppe.
Switch: Label links, Kontrolle rechts auf einer Linie; Zeigen Sie den aktuellen Status bei Bedarf mit Text an („On „/“ Off “).

10) Antipatterns

Ein Switch, der Änderungen nicht sofort anwendet (erfordert „Speichern“).
Radiobuttons, bei denen Mehrfachauswahl möglich ist.
Checkbox für sich gegenseitig ausschließende Varianten („Männlich/Weiblich“ als zwei Checkboxen).
Binary Sweatshirt für gefährliche irreversible Aktion (Daten löschen).
Doppelte Verleugnung im Text.
Ändern des Layouts bei einem Fehler, sodass der Fokus verloren geht.

11) Besonderheiten von iGaming (Beispiele)

Koeffizientenformat: Radiogruppe „Dezimal/Bruchzahl/Amerikanisch“ - wird sofort angewendet und im Profil gespeichert.
Quick Bet: Quick Bet Sweatshirt (ohne Bestätigung) mit einer expliziten Beschreibung und Undo für 5-10 Sekunden nach jeder Operation.
Abonnements/Benachrichtigungen: Checkboxen nach Art der Veranstaltung (Gewinne, Turniere, Einzahlungen). Gruppe Checkbox „Alles auswählen“ - tri-state.
Live-Koeffizienten-Updates: Live-Modus-Switch mit Optimismus und Rollback bei Netzwerkfehler.
Verantwortliche Spielgrenzen: Radiobuttons für Zeiträume (Tag/Woche/Monat) + Betragsfeld; Bestätigung der geänderten Grenze mit Einführung „ab morgen“.

12) Design-System-Token (Beispiel)

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) Snippets der UX-Logik

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) Metriken und Experimente

Misclick Rate und Undo-Frequenz auf Pullover.
Zeit bis zur Auswahl und Validierungsfehler über Funkgruppen.
Anteil „Alles auswählen“ und Vergleich mit manueller Auswahl (Geschwindigkeit, Genauigkeit).
A/B: copywriting Labels, die Reihenfolge der Optionen, segmented vs Radio, „gelten sofort“ vs „per Button“.

15) QS-Checkliste

Bedeutung und Auswahl

• Control entspricht der Aufgabe (multiple → Checkboxen; Eines der N → Radios Sofortiger binärer → Switch).
• Für riskante Aktivitäten gibt es eine Bestätigung/undo.

Verfügbarkeit

• Korrekte Rollen ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Die Fokusringe sind sichtbar, die Pfeile arbeiten in der Funkgruppe, Space schaltet Checkbox/Switch.

Verhalten

• Switch wendet die Änderungen sofort an; Bei einem Fehler: Rollback und Meldung.
• Der Tri-Zustand bei „Alles auswählen“ ist korrekt; Klicks auf das Label funktionieren.

Visuell

• Kontrast ≥ AA; Der Status wird nicht nur farblich übertragen.

Klickzonen ≥ 44 × 44 px Ordnung und Ausrichtung sind stabil.

Mobil

• Segmented-Control für 2-4 Funkvarianten auf Touch getestet.
• Fingereingabe und Scrollen widersprechen sich nicht.

16) Dokumentation im Konstruktionssystem

Bestandteile: „Checkbox“, „Switch“, „RadioGroup “/„ SegmentedControl“.
Größen/Animationen/Fokus-Token, Beispiele für Copywriting.
Muster: „Alles auswählen“ (Tri-State), „Sofortige Anwendung“, „Nach Risiko rückgängig machen“.
Do/Don 't-Galerie: Pullover mit verzögerter Speicherung (don' t), Radio statt Checkboxen (don't), Segmente für kurze Sets (do).

Kurze Zusammenfassung

Bei der Wahl der Steuerung geht es um Sinn und Erwartung: Checkbox - unabhängige Flaggen und Gruppen, Sweatshirt - sofortiges Ein-/Ausschalten der Funktion, Radio - genau eine Option aus dem Set. Unterstützen Sie die Verfügbarkeit, denken Sie über asynchrone Zustände und Copywriting nach - und Benutzer werden die Einstellungen ohne Fehler und Überraschungen sicher ändern.