Nəzarət seçimi: checkbox, switch, radio zımba

1) Əsas fərqlər (mənası, «şəkil» deyil)

• N-dən biri lazımdır - radio götürün.
• Hər hansı bir bayraq dəsti lazımdır - çekbox.
• Dərhal davranışı dəyişdirən bir ikili tumbler lazımdır - svitch.

2) Ağac həlləri (qısa)

1. Bir neçə müstəqil seçki? → Çekbox.
2. Tam bir variant dəsti? → Radiocopks (və ya seqment-control/taggles).
3. Bir ikili bayraq, təsiri ani və nəzərə çarpan? → Switch.
4. «Qismən» işarəsi lazımdır? → tri-state ilə Checkbox.
5. Risk/dəyər yüksəkdir (ödəniş, moderasiya)? → Radio/çekbox + təsdiq (switch deyil).

3) İstifadəçi davranışı və gözləntiləri

Switch = ani nəticə. Dəyişdirildikdən sonra istifadəçi fərdi «Save» olmadan dərhal effekt və geri dönüşü gözləyir.
Checkbox = seçimlər. Dərhal və ya düymə ilə tətbiq oluna bilər - modeli açıq şəkildə göstərmək vacibdir («Parametrlər qorunub »/« Save» düyməsini basın).
Radio = rejim seçimi. Keçid interfeysi yenidən qura bilər. Dəyişiklik siqnalı (mikro animasiya/mətn).

4) Hallar və vizual semantika

Normal / Hover / Focus / Active / Disabled / Error. Mətn və göstərici kontrastı ≥ AA.
Tri-state (çekbox): boş/qismən/seçilmiş. Qismən vəziyyət özlüyündə likabeldir - klik «boş» deyil, «seçilmiş» olaraq dəyişir.
Switch: «qaçışçının» rənginə və mövqeyinə görə «açıq/açıq» fərqi var. Rəng yeganə məna daşıyıcısı deyil (nişan/etiket yaxınlıqdadır).

5) Kopyalama və imzalar

Feil + obyekt və ya seçim zamanı doğru olur iddia.

Çekbox: «E-poçt bildirişləri alın».
Svitch: «Xəbərdarlıqlar: Açıq/Qapalı» (solda leybl, sağda və ya yazının özündə dövlət).
Radio: «Əmsalların formatı: Onluq/Kəsr/Amerika».
İkiqat inkarlardan çəkinin: «Söndürməyin...» - qarışıq.

Riskli hərəkətlər üçün ikinci bir təsvir əlavə edin: "Açıq. sürətli dərəcələr (təsdiq olmadan) - 5 saniyə ərzində ləğv edilə bilər"

6) Əlçatanlıq (A11y) və klaviatura

Çekbox: 'role = "checkbox"', aria-checked = "true 'false' mixed '', Space - keçid.
Svitch: native '<input type = «checkbox»>' svitch vizual və ya 'role =' switch's 'aria-checked'. Çekbox kimi davranış (Space).
Radio: 'role = «radiogroup» konteynerdə,' role = «radio» elementlərdə, oxlar ↑/↓ və ya ←/→ - seçimi, Space/Enter - təsdiqləyir.
Qruplar: ümumi kontekst üçün 'fieldset '/' legend' istifadə edin.
Focus halqaları görünür; click zonalarının ölçüləri ≥ 44 × 44 px hər tac.

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) Asinxron dəyişikliklər və səhvlər

Switch + Network: keçid → dərhal optimist UI → server təsdiqi → uğursuzluqla yumşaq yuvarlanmaq və səbəb göstərir.
«Save» Checkbox/Radio: Təsdiq olmadıqda - qlobal davranışı dəyişdirməyin.
Riskli hərəkətlər: təsdiq (modalka) və ya 5-10 saniyəlik undo-panel (reqlament icazə verərsə).

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) Mobil nümunələr

Switch - mobil konfiqurasiya əsas ikili nəzarət.
Radio 2-4 seçim üçün segmented control əvəz edilə bilər (daha yaxşı barmaq vurmaq).
Siyahıdakı çekboxlar - böyük bir klik sahəsi və sürətli multivible dəstəyi ilə.

9) Qrup və maket nümunələri

Radio: şaquli siyahı (daha yaxşı taranır), 2-3 seçim üçün - seqmentlər bir sətirdə.
Çekbox: bir sütun üzrə hizalama; uzun siyahılar üçün - «Hamısını seç» + qrupdan tri-state.
Switch: solda etiket, sağda bir xətt üzərində nəzarət; lazım gələrsə, cari vəziyyəti mətnlə göstərin («On «/» Off »).

10) Antipattern

Dərhal dəyişiklik tətbiq etməyən Switch («Save» tələb edir).
Bir çox seçim mümkün olan radio qutuları.
Bir-birini istisna edən variantlar üçün çekbox («Kişi/Qadın» iki çekbox kimi).
Təhlükəli geri dönməz hərəkət üçün ikili switch (məlumatları silmək).
Mətndə ikiqat inkarlar.
Səhv olduqda düzəni dəyişdirin, fokus itir.

11) iGaming xüsusiyyətləri (nümunələr)

Əmsalların formatı: «Onluq/Kəsr/Amerika» radio qrupu - dərhal tətbiq olunur və profildə saxlanılır.
Sürətli bahis: Hər bir əməliyyatdan sonra 5-10 saniyə ərzində açıq təsviri və undo ilə «Sürətli bahislər (təsdiq olmadan)».
Abunə/bildirişlər: tədbir növlərinə görə çekboxlar (uduşlar, turnirlər, depozitlər). Qrup çekbox «Hamısını seç» - tri-state.
Canlı yeniləmə əmsalları: optimistika və şəbəkə səhv olduqda geri dönüş ilə «Live-mode» switch.
Məsuliyyətli oyunun limitləri: dövrlər üçün radio qutuları (gün/həftə/ay) + məbləğ sahəsi; «sabahdan» giriş ilə dəyişdirilmiş limitin təsdiqi.

12) Dizayn sistemi tokenləri (nümunə)

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 məntiqi snippet

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) Metriklər və təcrübələr

Misclick rate və undo tezliyi.
Radio qrupları üzrə seçim və validasiya səhvlərinə qədər vaxt.
Pay «Hamısını seç» və əl seçimi ilə müqayisə (sürət, dəqiqlik).
A/B: etiketlərin kopyalanması, seçimlərin qaydası, radio vs segmented, «dərhal» vs «düyməsi ilə tətbiq edin».

15) QA-çek siyahısı

Məna və seçim

• Control tapşırığa uyğun gəlir (çoklu → çekbox; biri N → radio; ani ikili → switch).
• Riskli hərəkətlər üçün təsdiq/undo var.

Mövcudluq

• Düzgün rollar ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• Focus halqaları görünür, oxlar radio qrupunda işləyir, Space check box/switch açır.

Davranış

• Switch dərhal dəyişikliklər tətbiq; səhv olduqda - geri çəkilmə və mesaj.
• Tri-state «Hamısını seç» düzgün; etiket klikləri işləyir.

Vizual

• Kontrast ≥ AA; hal yalnız rəng ilə ötürülmür.
• Klik zonaları ≥ 44 × 44 px; nizam və hizalama sabitdir.

Mobil

• 2-4 radio variantları üçün segmented-control tac test edilmişdir.
• Barmaq vurma və sürüşmə toqquşmur.

16) Dizayn sistemində sənədləşmə

Komponentlər: «Checkbox», «Switch», «RadioGroup »/« SegmentedControl».
Ölçü/animasiya/fokus tokenləri, kopyalama nümunələri.
Nümunələr: «Hər şeyi seç» (tri-state), «Ani tətbiq», «Riskdən sonra Undo».
Do/Don 't-qalereya: gecikmiş saxlama ilə svitch (don 't), çek qutuları əvəzinə radio (don 't), qısa dəstlər üçün seqmentlər (do).

Qısa xülasə

Nəzarət seçimi məna və gözləntilərdir: çekbox - müstəqil bayraqlar və qruplar, switch - funksiyanın dərhal açılması/söndürülməsi, radio - dəstdən tam bir seçimdir. Əlçatanlığı saxlayın, asenkron vəziyyətlər və kopyalama haqqında düşünün - və istifadəçilər səhvlər və sürprizlər olmadan parametrləri inamla dəyişdirəcəklər.