Gözegçilikleri saýlamak: çekbox, switç, radio gutusy

1) Esasy tapawutlar (manysy, "çyzgy" däl)

• N-den birine mätäç bolsaňyz, radiony alyň.
• Islendik baýdak toplumy - çekboxlar gerek.
• Bir binar tumbler gerek, ol özüni alyp barşyny derrew üýtgedýär - switch.

2) Çözgütler agajy (gysgaça)

1. Birnäçe garaşsyz saýlawlar? → Çekbokslar.
2. Toplumdan takyk bir wariant? → Radiokopnikler (ýa-da segment-kontrol/taglar).
3. Bir goşa baýdak, derrew we görnükli täsir? → Switch.
4. "Bölekleýin" bellik gerek? → Tri-state bilen çekbox.
5. Töwekgelçilik/bahasy ýokary (töleg, moderasiýa)? → Radio/çekbox + tassyklama (switch däl).

3) Ulanyjynyň özüni alyp barşy we garaşmagy

Switch = derrew netije. Geçenden soň, ulanyjy aýratyn "Tygşytlamak" bolmazdan derrew täsirine we yzyna öwrülmegine garaşýar.
Çekbox = opsiýalary saýlamak. Birbada ýa-da düwme arkaly ulanylyp bilner - modeli aç-açan görkezmek möhümdir ("Sazlamalar saklandy "/" Basmak saklaň").
Radio = re modeimi saýlamak. Geçiş interfeýsi üýtgedip biler. Üýtgeşmelere signal beriň (mikro animasiýa/tekst).

4) Ýagdaýlar we wizual semantika

Normal / Hover / Focus / Active / Disabled / Error. Tekstiň we görkezijileriň gapma-garşylygy ≥ AA.
Tri-state (çekbox): boş/bölekleýin/saýlandy. Bölekleýin ýagdaý öz-özünden likabil däl - basmak "boş" däl-de, "saýlandy" diýip üýtgedýär.
Switch: "ylgawçynyň" reňki we ýagdaýy boýunça "açyk/ýapyk" tapawudy bar. Reňk ýeke-täk many göteriji däl (nyşan/bellik gapdalynda).

5) Göçürmek we gollar

Fiil + saýlamakda dogry bolýan obýekt ýa-da tassyklama.

Çekbox: "E-poçta habarnamalaryny al".
Switch: "Habarnamalar: Açyk/Ýapyk" (çep tarapdaky bellik, sag tarapdaky ýa-da ýazgynyň özünde ýagdaý).
Radio: "Koeffisiýentleriň formaty: Only/Bölek/Amerikan".
Iki gezek inkär etmekden gaça duruň: "Öçürmäň..." - bulaşyk.

Töwekgelçilikli hereketler üçin ikinji derejeli düşündiriş goşuň: "Açyk. çalt nyrhlar (tassyklamasyz) - 5 sekuntda ýatyrylyp bilner"

6) Elýeterlilik (A11y) we klawiatura

Çekbox: 'role =' checkbox '', 'aria-checked =' true 'false' mixed '', Space - geçiş.
Switch: native '<input type = "checkbox">' switch wizual ýa-da 'role = "switch' s 'aria-checked'. Çekbox (Space) ýaly hereket.
Radio: 'role = "radiogroup"' konteýnerde, 'role = "radio"' elementlerde, oklar ↑/↓ ýa-da ←/→ - saýlamany göçürýär, Space/Enter - tassyklaýar.
Toparlar: 'fieldset '/' legend' -i umumy kontekst üçin ulanyň.
Fokus halkalary görünýär; basmagyň zolaklarynyň ölçegleri ≥ her taç üçin 44 × 44 px.

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) Asinhron üýtgeşmeler we ýalňyşlyklar

Switch + Tor: Geçiş → derrew optimistik UI → serweri tassyklamak → şowsuzlyk ýüze çyksa, ýumşaklyk bilen aýlanýarys we sebäbini görkezýäris.
"Sakla" arkaly çekbox/radio: tassyklama ýok bolsa - global özüni alyp barşyny üýtgetmäň.
Töwekgelçilikli hereketler: tassyklamak (modalka) ýa-da 5-10 sekunt üçin undo-panel (eger düzgünnama rugsat berse).

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) Ykjam patternler

Switch - ykjam sazlamalarda esasy ikili gözegçilik.
Radio 2-4 opsiýa üçin segmented control bilen çalşyrylyp bilner (barmak bilen urmak has gowudyr).
Sanawdaky çekbokslar - uly basma meýdany we çalt köp saýlama goldawy bilen.

9) Toparlaryň we maketleriň patternleri

Radio: dik sanaw (has gowy skanirlenýär), 2-3 wariant üçin - segmentler bir setirde.
Çekboxlar: bir sütün boýunça tekizlemek; uzyn sanawlar üçin - "Hemme zady saýla" + topardaky tri-state.
Switç: çep tarapdaky bellik, sag tarapdaky gözegçilik; Zerur bolsa häzirki ýagdaýy tekst bilen görkeziň ("Açyk "/" Ýapyk ").

10) Antipatternler

Üýtgeşmeleri birbada ulanmaýan switch ("Saklamak" talap edilýär).
Köp saýlamak mümkin bolan radiokopkalar.
Biri-birini aýyrýan wariantlar üçin çekbox (iki çekbox hökmünde "Erkek/Aýal").
Howply yzyna gaýtaryp bolmajak hereket üçin binar switç (maglumatlary aýyrmak).
Tekstde goşa inkär.
Fokus ýitip gidýänçä, ýerleşişini üýtgetmek.

11) iGaming aýratynlyklary (mysallar)

Koeffisiýentleriň formaty: "Only/Bölekli/Amerikan" radio topary - birbada ulanylýar we profilde saklanýar.
Çalt nyrh: aç-açan beýan edilen "Çalt nyrhlar (tassyklamasyz)" switç we her amaldan soň 5-10 sekunt üçin undo.
Abuna ýazylmalar/habarnamalar: wakalaryň görnüşleri boýunça çekbokslar (ýeňişler, ýaryşlar, goýumlar). "Hemme zady saýla" toparlaýyn çekbox - tri-state.
Koeffisiýentleri göni ýaýlymda täzelemek: optimizmi bolan "Live-mode" switch.
Jogapkär oýnuň çäkleri: döwürler üçin radiokopkalar (gün/hepde/aý) + jemi meýdany; "ertir gününden" girizilmegi bilen üýtgedilen çägi tassyklamak.

12) Dizaýn-ulgamyň bellikleri (mysal)

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-logika snippetleri

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) Metrikler we synaglar

Misclick rate we undo-ýygylyk switches.
Saýlamaga çenli wagt we radio toparlar boýunça walidasiýa ýalňyşlyklary.
"Hemme zady saýla" paýy we el bilen saýlamak bilen deňeşdirmek (tizlik, takyklyk).
A/B: bellikleriň göçürilmegi, opsiýalaryň tertibi, segmented vs radio, "birbada" vs "düwmesi boýunça ulanmak".

15) QA-çek-sanawy

Manysy we saýlamagy

• Gözegçilik maksada laýyk gelýär (köp → çekbox; N → radiodan biri; dessine ikilik → switch).
• Töwekgelçilikli hereketler üçin/undo tassyklamasy bar.

Elýeterlilik

• Dogry rollar ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Fokus halkalary görünýär, oklar radio toparynda işleýär, Space çekbox/switch geçirýär.

Özüni alyp barşy

• Switch üýtgetmeleri birbada ulanýar; ýalňyşlyk ýüze çyksa - yzyna gaýtarmak we habar.
• Tri-state-den "Hemme zady saýla" dogry; düwmeler işleýär.

Wizual

• Kontrast ≥ AA; ýagdaý diňe reňk bilen berilmeýär.
• Basmak zolaklary ≥ 44 × 44 px; tertibi we deňleşdirilmegi durnukly.

Jübi

• 2-4 radio warianty üçin segmented-control taç üçin synag edildi.
• Barmak urmak we aýlanmak gapma-garşy däl.

16) Dizaýn-ulgamdaky resminamalar

Komponentler: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedControl'.
Ululyk/animasiýa/fokus bellikleri, göçürmek mysallary.
Pattern: "Hemme zady saýla" (tri-state), "Derrew ulanmak", "Töwekgelçilikden soň Undo".
Do/Don 't-galereýa: yza süýşürilen switç (don' t), çekbokslaryň ýerine radio (don 't), gysga toplumlar üçin segmentler (do).

Gysgaça gysgaça

Gözegçiligi saýlamak many we garaşmak hakda: çekbox - garaşsyz baýdaklar we toparlar, switch - funksiýanyň derrew açylmagy/öçürilmegi, radio - toplumdan takyk bir wariant. Elýeterliligi saklaň, asinxron ýagdaýlary we göçürme ýazmagy göz öňünde tutuň - ulanyjylar ýalňyşlyksyz we garaşylmadyk ýagdaýda sazlamalary ynam bilen üýtgederler.