Denetimlerin seçimi: onay kutusu, anahtar, radyo düğmesi

1) Temel farklılıklar (anlam, "şekil'değil)

• N'den birine ihtiyacım var - radyoyu al.
• Herhangi bir bayrak setine ihtiyacınız var - onay kutuları.
• Davranışı hemen değiştiren bir ikili geçiş anahtarına ihtiyacınız var - anahtar.

2) Karar ağacı (kısa)

1. Birkaç bağımsız seçim? - Checkboxes.
2. Setten tam olarak bir seçenek mi? - Radyo düğmeleri (veya segment-denetimleri/etiketleri).
3. Bir ikili bayrak, etki anında ve fark edilir mi?
4. "Kısmi" işaretine (alt küme) mi ihtiyacınız var? - Üç durumlu onay kutusu.
5. Risk/maliyet yüksek (ödeme, denetleme)? - Radyo/onay kutusu + onay (geçiş değil).

3) Kullanıcı davranışı ve beklentileri

Switch = anlık sonuç. Geçiş yaptıktan sonra, kullanıcı ayrı bir Kaydetme olmadan anında bir etki ve tersine çevrilebilirlik bekler.
Onay kutusu = seçenek seçimi. Hemen veya düğme ile uygulanabilir - modeli açıkça göstermek önemlidir ("Ayarlar kaydedildi "/" Kaydet'e tıklayın).
Radyo = mod seçimi. Geçiş, arayüzü yeniden oluşturabilir. Sinyal değişiklikleri (mikroanimasyon/metin).

4) Devletler ve görsel semantik

Normal/Hover/Focus/Active/Disabled/Error. Metin ve göstergelerin AA ≥ kontrastı.
Üç durumlu (onay kutusu): boş/kısmen/seçili. Kısmi durum kendi içinde tıklanabilir değildir - tıklama "seçili'olarak değişir ve" boş'olarak değiştirilmez.
Anahtar: Renk ve koşucu konumunda açık bir açma/kapama ayrımına sahiptir. Renk, anlamın tek taşıyıcısı değildir (yakındaki simge/etiket).

5) Metin yazarlığı ve imzalar

Seçildiğinde doğru olan fiil + nesne veya ifade.

Onay kutusu: "E-posta bildirimleri alın".
Anahtar: "Bildirimler: Açık/Kapalı" (soldaki etiket, durum - sağda veya anahtarın kendisinde).
Radyo: "Katsayı Biçimi: Ondalık/Kesirli/Amerikan".
Çift inkarlardan kaçının: "Fişini çekmeyin"... - karıştırır.

Riskli eylemler için ikincil bir açıklama ekleyin: "Açık. Hızlı Bahisler (onay yok) - 5 saniye içinde iptal edebilirsiniz"

6) Erişilebilirlik (A11y) ve klavye

Checkbox: 'Role =' checkbox ',' aria-checked = 'true' false 'mixed' ', Space - switching.
Switch: native '<input type =' checkbox '>' with switch visual veya 'role =' switch 'with' aria-checked '. Onay kutusu benzeri davranış (Boşluk).
Radyo: 'role =' radiogroup '' on the container, 'role =' radio '' on the elements, arrows ↑/↓ or ←/→ - move the choice, Space/Enter - confirm.
Gruplar: Genel bağlam için 'fieldset'/' legend' kullanın.
Odak halkalarını görünür bırakın; Tıklama bölgelerinin boyutları dokunma başına 44 44 piksel .

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) Eşzamansız değişiklikler ve hatalar

Switch + network: anahtarlama - hemen iyimser UI - sunucu onayı - başarısız olursa, yavaşça geri dönün ve nedenini gösterin.
"Kaydet" onay kutusu/radyo: henüz onay yok - küresel davranışı değiştirmeyin.
Riskli eylemler: onay (modalka) veya geri alma paneli 5-10 saniye (yönetmelikler izin veriyorsa).

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 desenler

Switch, mobildeki ayarlardaki ana ikili kontroldür.
Radyo, 2-4 seçenek için bölümlenmiş kontrol ile değiştirilebilir (parmak vuruşu daha iyidir).
Listelerdeki onay kutuları - geniş bir tıklama alanı ve hızlı çoklu seçim desteği.

9) Gruplama ve düzen desenleri

Radyo: dikey liste (daha iyi taranmış), 2-3 seçenek için - bir satırda segmentler.
Onay kutuları: tek sütunlu hizalama; Uzun listeler için - "Tümünü seç" + grup için üç durumlu.
Anahtar: Soldaki etiket, sağdaki kontrol aynı çizgide; Gerektiğinde metin içeren geçerli durumu gösterir (Açık/Kapalı).

10) Antipatterns

Değişiklikleri hemen uygulamayan anahtar ("Kaydet" gerektirir).
Birden fazla seçimin mümkün olduğu radyo düğmeleri.
Birbirini dışlayan seçenekler için onay kutusu (iki onay kutusu olarak "Erkek/Dişi").
Tehlikeli geri dönüşümsüz eylem için ikili anahtar (verileri sil).
Metinde çift olumsuzlamalar.
Odağın kaybolması için mizanpajı hatayla değiştirin.

11) iGaming özellikleri (örnekler)

Katsayıların biçimi: Ondalık/Kesirli/Amerikan radyo grubu - hemen uygulanır ve profile kaydedilir.
Hızlı Bahis: Açık bir açıklama ile Hızlı Bahisler (onay yok) anahtarı ve her işlemden sonra 5-10 saniye geri alın.
Abonelikler/bildirimler: Etkinlik türüne göre onay kutuları (kazançlar, turnuvalar, depozitolar). Grup onay kutusu "Tümünü seç" - üç durumlu.
Katsayıların canlı güncellemeleri: "Canlı mod'u iyimserlikle değiştirin ve ağ hatasını geri alın.
Sorumlu çalma sınırları: Dönemler için radyo düğmeleri (gün/hafta/ay) + miktar alanı; "Yarından itibaren" girişi ile değiştirilen sınırın onaylanması.

12) Tasarım sistemi belirteçleri (örnek)

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 mantık parçacıkları

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 ve deneyler

Anahtarlarda yanlış tıklama oranı ve geri alma frekansı.
Radyo grupları tarafından seçim ve doğrulama hataları zamanı.
Oran "Tümünü seçin've manuel seçim ile karşılaştırma (hız, doğruluk).
A/B: etiket metin yazarlığı, seçenek sırası, bölümlenmiş vs radyo, "hemen uygulayın" vs "düğme ile".

15) KG kontrol listesi

Anlam ve seçim

• Kontrol, göreve karşılık gelir (çoklu> onay kutuları; N ­ telsizlerden biri; instant binary - switch).
• Riskli eylemler için onay/geri alma vardır.

Kullanılabilirlik

• Doğru roller ('checkbox'/' switch'/' radiogroup'/' radio'), 'aria-checked'/' indeterminate'.
• Odak halkaları görünür, oklar bir radyo grubunda çalışır, Boşluk onay kutusu/anahtarı değiştirir.

Davranış

• Switch değişiklikleri hemen uygular; Hata üzerine - geri alma ve mesaj.
• "Tümünü seç" için üç durum doğrudur; etiket tıklamaları çalışır.

Görsel

• AA ≥ kontrast; Devlet sadece renk değildir.
• 44 ≥ 44 piksel × bölgelere tıklayın; Düzen ve uyum stabil.

Mobil

• Dokunma için test edilen 2-4 radyo varyantı için segmentli kontrol.
• Parmak vurma ve kaydırma çakışmaz.

16) Tasarım sistemindeki belgeler

Bileşenler: 'Checkbox', 'Switch', 'RadioGroup'/' SegmentedControl'.
Boyut/animasyon/odak belirteçleri, metin yazarlığı örnekleri.
Desenler: "Tümünü seç" (üç durumlu), "Anında uygulama", "Riskten sonra geri al".
Do/Don gallery: Gecikmeli kaydetme anahtarı (don't), onay kutuları yerine radyo (don't), kısa kümeler için segmentler (do).

Kısa Özet

Kontrol seçimi anlam ve beklentilerle ilgilidir: Onay kutusu - bağımsız bayraklar ve gruplar, anahtar - anında açma/kapama işlevi, radyo - setten tam olarak bir seçenek. Kullanılabilirliği koruyun, asenkron durumları ve metin yazarlığını düşünün - ve kullanıcılar hata veya sürpriz olmadan ayarları güvenle değiştireceklerdir.