Nazorat tanlash: chekbox, svitch, radioknopka

1) Asosiy farqlar (ma’nosi, «rasm» emas)

• N dan biri kerak bo’lsa, radioni oling.
• Har qanday bayroq to’plami - chekboxlar kerak.
• Sizga bitta binar tumbler kerak, u darhol xulq-atvorni o’zgartiradi - svitch.

2) Yechimlar daraxti (qisqacha)

1. Bir nechta mustaqil saylovlar? → Chekbokslar.
2. To’plamdan aynan bitta variant? → Radiokopkalar (yoki segment-nazorat/taglar).
3. Bitta binar bayroq, tezkor va sezgir effekt? → Svitch.
4. «Qisman» belgiga ehtiyoj bormi? → Chekbox s tri-state.
5. Xavf/qiymat yuqori (to’lov, moderatsiya)? → Radio/chekbox + tasdiqlash (svitch emas).

3) Foydalanuvchining xulq-atvori va kutishlari

Svitch = lahzali natija. Foydalanuvchi almashtirilgandan soʻng, alohida «Saqlash» siz darhol taʼsir va qaytishni kutadi.
Chekbox = variantlarni tanlash. Birdaniga yoki tugma yordamida foydalanish mumkin - modelni aniq koʻrsatish muhim («Moslamalar saqlangan »/« Saqlash» tugmasini bosing).
Radio = rejim tanlash. Oʻtish interfeysni qayta tiklashi mumkin. Oʻzgarishlarga signal bering (mikro animatsiya/matn).

4) Holatlar va vizual semantika

Normal / Hover / Focus / Active / Disabled / Error. Matn va indikatorlarning ≥ AA.
Tri-state (chekbox): boʻsh/qisman/tanlangan. Qisman holat o’z-o’zidan likobli emas - bosish «bo’sh» emas, balki «tanlangan» ga o’zgaradi.
Svitch: «yuguruvchining» rangi va mavqei bo’yicha aniq farqqa ega. Rang yagona ma’no tashuvchi emas (ikona/yorliq yonma-yon).

5) Nusxa ko’chirish va imzolar

Tanlanganda haqiqiy boʻladigan feʼl + obʼekt yoki bayonot.

Chekbox: «E-mail xabarnomalarini olish».
Svitch: «Xabarnomalar: Ochiq/Yopiq» (leybl chapda, holat - oʻngda yoki svitchda).
Radio: «Koeffitsiyentlar formati: O’nlik/Bo’lak/Amerika».
Ikki marta rad etishdan qoching: «Oʻchirmang...» - chalkashtirib yuboradi.

Xatarli xatti-harakatlar uchun ikkilamchi tavsifni qo’shing: "Qo’shildi. tezkor stavkalar (tasdiqlamasdan) - 5 sek mobaynida bekor qilinishi mumkin"

6) Foydalanish imkoniyati (A11y) va klaviatura

Chekbox:’role =’checkbox’,’aria-checked =’true’false’mixed’, Space - almashtirish.
Svitch: native’<input type = «checkbox»>’visual svitch yoki’role = «switch»’s’aria-checked’. Chekbox (Space) kabi xatti-harakatlar.
Radio:’role = «radiogroup»’konteynerda,’role = «radio»’elementlarda, o’qlar ↑/↓ yoki ←/→ - tanlashni ko’chiradi, Space/Enter - tasdiqlaydi.
Guruhlar: umumiy kontekst uchun’fieldset ’/’ legend’dan foydalaning.
Fokus halqalarni ko’rinadigan qilib qoldiring; bosish zonalarining o’lchamlari ≥ har bir tachga 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) Asinxron o’zgarishlar va xatolar

Svitch + tarmoq: o’zgartirish → to’g’ridan-to’g’ri optimistik UI → server tasdig’i → muvaffaqiyatsiz bo’lsa, yumshoq tarzda orqaga siljitamiz va sababini ko’rsatamiz.
«Saqlash» orqali Checkbox/radio: tasdiqlash boʻlmaguncha, global xatti-harakatlaringizni oʻzgartirmang.
Xavfli harakatlar: tasdiqlash (modalka) yoki 5-10 sekundlik undo-panel (agar reglament ruxsat bersa).

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 patternlar

Svitch - mobil moslamalardagi asosiy binar nazorat.
Radioni 2-4 variantlar uchun segmented control bilan almashtirish mumkin (barmoq bilan urish yaxshiroqdir).
Ro’yxatdagi chekboxlar - katta bosish sohasi va tezkor multiviblashni qo’llab-quvvatlaydi.

9) Guruhlash va maket patternlari

Radio: vertikal ro’yxat (yaxshiroq skanerlanadi), 2-3 variant uchun - bir qatorli segmentlar.
Chekboxlar: bitta ustundan tekislash; uzun roʻyxatlar uchun - «Hamma narsani tanlash» + guruhdagi tri-state.
Svitch: leybl chapda, o’ngda bitta chiziqda; Agar kerak boʻlsa, joriy holatni matn bilan koʻrsating («Yopiq «/» Yopiq »).

10) Antipatternlar

Oʻzgarishlarni birdaniga qoʻllamaydigan svitch («Saqlash» ni talab qiladi).
Ko’p tanlash mumkin bo’lgan radioknopkalar.
O’zaro istisno qiluvchi variantlar uchun chekbox («Erkaklar/Ayollar» ikkita chekbox sifatida).
Xavfli qaytarib bo’lmaydigan harakat uchun binar svitch (ma’lumotlarni o’chirish).
Matnda ikki marta inkor etish.
Xato roʻy berganda, fokus yoʻqoladi.

11) iGaming xususiyatlari (misollar)

Koeffitsiyentlar formati: «O’nlik/Bo’lak/Amerika» radiogurug’i - darhol qo’llaniladi va profilda saqlanadi.
Tezkor stavka: «Tezkor stavkalar (tasdiqlamasdan)» svitch aniq tavsiflangan va undo har bir operatsiyadan keyin 5-10 sek.
Obuna/bildirishnomalar: hodisa turlari bo’yicha chekbokslar (yutuqlar, turnirlar, depozitlar). «Hammasini tanlash» guruh chekbox - tri-state.
Koeffitsiyentlarni jonli yangilash: «Jonli rejim» svitch optimizm va tarmoq xato boʻlganda orqaga qaytish.
Mas’uliyatli o’yin limitlari: davrlar uchun radioknopkalar (kun/hafta/oy) + summa maydoni; «ertadan boshlab» kirish bilan o’zgartirilgan limitni tasdiqlash.

12) Dizayn-tizim tokenlari (misol)

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-mantiq snippetlari

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) Metrika va eksperimentlar

Misclick rate va svitchalar boʻyicha undo-chastotasi.
Tanlash vaqti va radio guruhlar bo’yicha validatsiya xatosi.
«Hammasini tanlash» ulushi va qo’lda tanlash bilan taqqoslash (tezlik, aniqlik).
A/B: yorliqlarning nusxa ko’chirilishi, variantlar tartibi, segmented vs radio, «darhol» vs «tugmasi bo’yicha qo’llaniladi».

15) QA-chek-varag’i

Maʼno va tanlov

• Nazorat vazifaga mos keladi (ko’plik → chekboxlar; N → radiodan biri; tezkor ikkilik → svitch).
• Xavfli harakatlar uchun tasdiqlash/undo mavjud.

Foydalanish imkoniyati

• Toʻgʻri rollar (’checkbox ’/’ switch ’/’ radiogroup ’/’ radio’),’aria-checked ’/’ indeterminate’.
• Fokus halqalari ko’rinadi, o’qlar radio guruhida ishlaydi, Space chekbox/svitchni o’zgartiradi.

Xulq-atvori

• Svitch o’zgarishlarni birdaniga qo’llaydi; xato bo’lsa - qaytarish va xabar.
• Tri-state’da "Hamma narsani tanlash" to’g "ri; yorliqdagi kliplar ishlamoqda.

Vizual

• Kontrast ≥ AA; holat faqat rangda uzatilmaydi.
• Bosish zonalari ≥ 44 × 44 px; tartib va tekislash barqaror.

Mobil

• Segmented-control 2-4 radio variantlari uchun tach sinovdan o’tkazildi.
• Barmoq urish va aylantirish bir - biriga zid emas.

16) Dizayn-tizimdagi hujjatlar

Komponentlar:’Checkbox’,’Switch’,’RadioGroup ’/’ SegmentedControl’.
O’lcham/animatsiya/fokus tokenlari, nusxa ko’chirish namunalari.
Patternlar: «Hamma narsani tanlash» (tri-state), «Darhol qo’llash», «Xavfdan keyin Undo».
Do/Don’t-galereya: kechiktirilgan saqlanadigan svitch (don’t), chekbokslar o’rniga radio (don’t), qisqa to’plam uchun segmentlar (do).

Qisqacha xulosa

Nazoratni tanlash - bu ma’no va kutish haqida: chekbox - mustaqil bayroqlar va guruhlar, svitch - funksiyani bir zumda yoqish/o’chirish, radio - to’plamdan aniq bitta variant. Foydalanuvchanlikni qo’llab-quvvatlang, asinxron holatlar va nusxa ko’chirish haqida o’ylang - foydalanuvchilar xato va kutilmagan hodisalarsiz sozlamalarni ishonchli o’zgartiradilar.