Wybór sterowania: pole wyboru, przełącznik, przycisk radiowy

1) Kluczowe różnice (oznaczające nie „rysunek”)

• Potrzebuję jednego z N - weź radio.
• Potrzebujesz dowolnego zestawu flag - skrzynki kontrolne.
• Potrzebujesz jednego binarnego przełącznika, który natychmiast zmienia zachowanie - przełącznik.

2) Drzewo decyzji (krótkie)

1. Kilka niezależnych wyborów? → Skrzynki kontrolne.
2. Dokładnie jedna opcja z zestawu? → Przyciski radiowe (lub segment-controls/tags).
3. Jedna flaga binarna, efekt jest natychmiastowy i zauważalny? → Przełącznik.
4. Potrzebujesz znaku „częściowego” (podzbiór)? → Pole wyboru z tri-state.
5. Ryzyko/koszt jest wysoki (płatność, moderowanie)? → Radio/pole wyboru + potwierdzenie (nie przełączanie).

3) Zachowanie i oczekiwania użytkowników

Switch = wynik natychmiastowy. Po przełączeniu użytkownik oczekuje natychmiastowego efektu i odwracalności bez oddzielnego Zapisz.
Pole wyboru = wybór opcji. Można go zastosować natychmiast lub za pomocą przycisku - ważne jest, aby wyraźnie pokazać model („Ustawienia zapisane „/” Kliknij Zapisz ”).
Radio = wybór trybu. Przejście może odbudować interfejs. Zmiany sygnału (mikroanimacja/tekst).

4) Państwa i semantyka wizualna

Normalny/Hover/Focus/Active/Disabled/Error. Kontrast tekstu i wskaźników ≥ AA.
Tri-state (pole wyboru): puste/częściowo/wybrane. Stan częściowy nie jest sam w sobie możliwy do kliknięcia - kliknięcie zmienia się na „zaznaczone”, a nie „puste”.
Przełącznik: Ma wyraźne rozróżnienie włączania/wyłączania w pozycji koloru i biegacza. Kolor nie jest jedynym nośnikiem znaczenia (ikona/etykieta w pobliżu).

5) Kopiowanie i podpisy

Czasownik + obiekt lub oświadczenie, które staje się prawdziwe po wybraniu.

Pole wyboru: „Odbierz powiadomienia e-mail”.
Przełącznik: „Powiadomienia: On/Off” (etykieta po lewej, stan - po prawej stronie lub sam przełącznik).
Radio: „Format współczynnika: dziesiętny/frakcyjny/amerykański”.
Unikaj podwójnych zaprzeczeń: „Nie odłączaj”... - dezorientuje.

W przypadku ryzykownych działań dodaj drugorzędny opis: "Na. Szybkie zakłady (bez potwierdzenia) - Możesz anulować w ciągu 5 sekund"

6) Dostępność (A11y) i klawiatura

Pole wyboru: 'role =' checkbox ',' aria-checked = 'true' false 'mixed', Space - switching.
Przełącznik: native '<input type = „checkbox”>' with switch visual or 'role =' switch '' with 'aria-checked'. Zachowanie podobne do pola wyboru (Przestrzeń).
Radio: 'rola = „radiogroup”' na kontenerze, 'rola = „radio” na elementach, strzałkach, lub ←/→ - przesuń wybór, Space/Enter - potwierdź.
Grupy: Użyj 'field dset '/' legend' dla kontekstu ogólnego.
Pozostaw widoczne pierścienie ostrości; wymiary stref kliknięcia ≥ 44 × 44 px na dotyk.

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) Asynchroniczne zmiany i błędy

Przełącznik + sieć: przełączanie → natychmiast optymistyczny interfejs użytkownika → potwierdzenie serwera → jeśli nie powiodło się, delikatnie cofnąć i pokazać powód.
Pole wyboru/radio na „Zapisz”: nie ma jeszcze potwierdzenia - nie zmieniaj globalnego zachowania.
Ryzykowne działania: potwierdzenie (modalka) lub cofnięcie panelu przez 5-10 sekund (jeśli pozwalają na to przepisy).

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) Wzory mobilne

Przełącznik jest głównym sterowaniem binarnym w ustawieniach na telefonie komórkowym.
Radio można wymienić na segmentowane sterowanie dla 2-4 opcji (finger hit jest lepszy).
Skrzynki kontrolne na listach - z dużym obszarem kliknięć i obsługą szybkiego wyboru wielu.

9) Układanie i układanie wzorów

Radio: lista pionowa (lepiej skanowana), dla 2-3 opcji - segmenty w jednej linii.
Skrzynki kontrolne: wyrównanie jednokolumnowe; dla długich list - „Wybierz wszystkie” + tri-state dla grupy.
Przełącznik: etykieta po lewej stronie, kontrola po prawej po tej samej linii; pokaż bieżący status z tekstem w razie potrzeby (On/Off).

10) Antypattery

Przełącznik, który nie ma zastosowania zmiany natychmiast (wymaga „Zapisz”).
Przyciski radiowe, w których możliwe są wielokrotne wybory.
Pole wyboru dla opcji wzajemnie wykluczających się („mężczyzna/kobieta” jako dwie skrzynki kontrolne).
Przełącznik binarny dla niebezpiecznych działań nieodwracalnych (usunąć dane).
Podwójne negacje w tekście.
Zmień układ na błędzie tak, że ostrość jest utracona.

11) Specyfikacja iGaming (przykłady)

Format współczynników: Dziesiętny/Frakcyjny/Amerykańska grupa radiowa - jest stosowany natychmiast i zapisywane do profilu.
Szybki zakład: Szybkie zakłady (bez potwierdzenia) przełącznik z wyraźnym opisem i cofnąć przez 5-10 sekund po każdej operacji.
Subskrypcje/powiadomienia: skrzynki kontrolne według typu zdarzenia (wygrane, turnieje, depozyty). Pole wyboru grupy „Wybierz wszystkie” - tri-state.
Aktualizacje współczynników na żywo: przełącznik „Tryb na żywo” z optymizmem i rolką na błędzie sieci.
Granice odpowiedzialnej gry: przyciski radiowe na okresy (dzień/tydzień/miesiąc) + pole kwoty; potwierdzenie zmienionego limitu z wpisem „od jutra”.

12) Żetony systemu projektowania (przykład)

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 logiczne snajpery

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) Metryki i eksperymenty

Misclick szybkość i cofnąć częstotliwość na przełącznikach.
Czas na wybór i walidację błędów przez grupy radiowe.
Proporcja „Wybierz wszystkie” i porównanie z ręcznym doborem (prędkość, dokładność).
A/B: copywriting etykiety, zamówienie opcji, segmentacja vs radio, „zastosuj natychmiast” vs „przyciskiem”.

15) Lista kontrolna QA

Znaczenie i wybór

• Kontrola odpowiada zadaniu (wiele → skrzynki kontrolne; jeden z N → radia; instant binary → switch).
• W przypadku ryzykownych działań istnieje potwierdzenie/cofnięcie.

Dostępność

• Poprawne role ('pole wyboru '/' przełącznik '/' radio '/' radio'), 'aria-checked '/' indeterminate'.
• Pierścienie ostrości są widoczne, strzałki działają w grupie radiowej, pole wyboru/przełącznik przełączników przestrzeni.

Zachowanie

• Przełącznik stosuje zmiany natychmiast; na błędzie - rollback i wiadomość.
• Tri-state dla „Wybierz wszystko” jest poprawne; etykieta klika pracę.

Visual

• Kontrast ≥ AA; stan nie jest tylko kolorem.
• Kliknij strefy ≥ 44 × 44 px; porządek i wyrównanie są stabilne.

Telefon komórkowy

• Sterowanie segmentowane dla 2-4 wariantów radiowych testowanych pod kątem dotyku.
• Uderzenie palcem i przewijanie nie kolidują.

16) Dokumentacja w systemie projektowym

Komponenty: „Pole wyboru”, „Przełącznik”, „Grupa radioaktywna ”/„ Kontrola segmentowa”.
Rozmiar/animacja/tokeny ostrości, przykłady kopiowania.
Wzory: „Wybierz wszystkie” (tri-state), „Natychmiastowa aplikacja”, „Cofnij po ryzyku”.
Do/Don gallery: delayed-save switch (nie), radio zamiast checkboxes (nie), segmenty dla krótkich zestawów (do).

Krótkie podsumowanie

Wybór sterowania polega na znaczeniu i oczekiwaniach: pole wyboru - niezależne flagi i grupy, przełącznik - funkcja instant on/off, radio - dokładnie jedna opcja z zestawu. Utrzymuj dostępność, myśl o stanach asynchronicznych i copywriting - a użytkownicy ufnie zmienią ustawienia bez błędów lub niespodzianek.