მაკონტროლებელი არჩევანი: ჩეკბოქსი, სვიტჩი, რადიო

1) ძირითადი განსხვავებები (მნიშვნელობა, არა „ნიმუში“)

• გჭირდებათ ერთი N - აიღეთ რადიო.
• ჩვენ გვჭირდება დროშების ნებისმიერი ნაკრები - ჩეკბოქსი.
• ჩვენ გვჭირდება ერთი ორობითი ნისლი, რომელიც დაუყოვნებლივ ცვლის ქცევას - სვიტჩს.

2) გადაწყვეტილების ხე (მოკლედ)

1. რამდენიმე დამოუკიდებელი არჩევნები? - ჩეკბოქსი.
2. ზუსტად ერთი ვარიანტია ნაკრებიდან? Radiocnopki (ან სეგმენტის კონტროლი/tegles).
3. ერთი ორობითი დროშა, მყისიერი და შესამჩნევი ეფექტი? - სვიტჩი.
4. გჭირდებათ „ნაწილობრივი“ ნიშანი?
5. რისკი/ღირებულება მაღალია (გადახდა, მოდერაცია)?

3) მომხმარებლის ქცევა და მოლოდინი

სვიტჩი = მყისიერი შედეგი. გადართვის შემდეგ, მომხმარებელი ელოდება დაუყოვნებლივ ეფექტს და შექცევას ინდივიდუალური „შენახვის“ გარეშე.
Chekbox = ვარიანტების არჩევანი. იგი შეიძლება გამოყენებულ იქნას დაუყოვნებლივ ან ღილაკით - მნიშვნელოვანია აშკარად აჩვენოს მოდელი („პარამეტრები დაცულია “/„ დააჭირეთ შენახვას“).
რადიო = რეჟიმის არჩევანი. გადასვლას შეუძლია ინტერფეისის აღდგენა. მიუთითეთ ცვლილებები (მიკროანიმაცია/ტექსტი).

4) სახელმწიფოები და ვიზუალური სემანტიკა

Normal / Hover / Focus / Active / Disabled / Error. ტექსტისა და ინდიკატორების კონტრასტი AA.
Tri-state (Chekbox): ცარიელი/ნაწილობრივ/შერჩეული. ნაწილობრივი მდგომარეობა თავისთავად მოუხერხებელია - კლიშე ცვლის „შერჩეულ“ და არა „ცარიელ“.
სვიტჩი: აქვს მკაფიო განსხვავება „შეყვანა/ამოღება“ „მორბენალის“ ფერისა და პოზიციის მიხედვით. ფერი არ არის მნიშვნელობის ერთადერთი გადამზიდავი (ხატი/ეტიკეტი იქვე).

5) საავტორო უფლებები და ხელმოწერები

ზმნა + ობიექტი ან განცხადება, რომელიც ხდება ნამდვილი არჩევანის დროს.

Chekbox: მიიღე ელექტრონული ფოსტის შეტყობინებები.
სვიტჩი: „შეტყობინებები: BNG/Vycle“ (ეტიკეტი მარცხნივ, მდგომარეობა - მარჯვნივ ან თავად სვიტერში).
რადიო: „კოეფიციენტების ფორმატი: ათობითი/წილადი/ამერიკული“.
მოერიდეთ ორმაგ უარყოფას: „ნუ გამორთავთ...“ - ჱაბვლწჱგა.

სარისკო მოქმედებებისთვის დაამატეთ მეორადი აღწერა: "დიდი. სწრაფი განაკვეთები (დადასტურების გარეშე) - შეიძლება გაუქმდეს 5 წამში"

6) წვდომა (A11y) და კლავიატურა

Chekbox: 'role = „checkbox“', 'aria-checked = „ნამდვილი' false 'mixed“', Space - გადართვა.
სვიტჩი: მშობლიური '<input ტიპი = „checkbox“>' სვიტჩის ვიზუალით ან 'role = „switch“' s 'aria-checked'. ქცევა ჰგავს Space.
რადიო: 'role = "radiogroup"' კონტეინერზე, 'role = "რადიო" "ელემენტებზე, ისრები -1- დან ან/და-დან - ისინი მოძრაობენ არჩევანს, Space/Enter - დასტურდება.
ჯგუფები: გამოიყენეთ 'fieldset '/' legend' ზოგადი კონტექსტისთვის.
ფოკუს რგოლები დატოვეთ ხილული; დაწკაპუნების ზონების ზომებია 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) ასინქრონული ცვლილებები და შეცდომები

სვიტრი + ქსელი: შეცვლა - დაუყოვნებლივ ოპტიმისტური UI - სერვერის დადასტურება - უხერხულობის შემთხვევაში, ჩვენ რბილად ვტრიალებთ და ვაჩვენებთ მიზეზს.
Chekbox/Radio Stange- ში: ჯერჯერობით არ არსებობს დადასტურება - შეცვალეთ გლობალური ქცევა.
სარისკო მოქმედებები: დადასტურება (მოდალური) ან უნდო პანელი 5-10 წამით (თუ რეგულაცია ნებადართულია).

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) მობილური ნიმუშები

სვიჩი არის მთავარი ორობითი კონტროლი მობილური პარამეტრებით.
რადიო შეიძლება შეიცვალოს სეგმენტირებული კონტროლისთვის 2-4 ვარიანტისთვის (უკეთესია თითის დაჭერა).
სიებში ჩეკბოქსი - კლიკის დიდი არეალი და სწრაფი მულტივირუსის მხარდაჭერა.

9) ჯგუფისა და განლაგების ნიმუშები

რადიო: ვერტიკალური სია (უკეთესად სკანირებული), 2-3 ვარიანტისთვის - სეგმენტები ერთი ხაზით.
ჩეკბოქსი: ერთი სვეტის გასწორება; გრძელი სიებისთვის - „აირჩიე ყველაფერი“ + tri-state ჯგუფისთვის.
სვიტჩი: ეტიკეტი მარცხნივ, აკონტროლებდა მარჯვნივ ერთ ხაზზე; საჭიროების შემთხვევაში აჩვენეთ ამჟამინდელი მდგომარეობა ტექსტით („დიდი „/“ გამონადენი “).

10) ანტიპატერები

სვიტჩი, რომელიც დაუყოვნებლივ არ იყენებს ცვლილებებს (მოითხოვს „შენახვას“).
რადიო ფანჯრები, სადაც მრავალჯერადი არჩევანია შესაძლებელი.
ჩეკბოქსი ურთიერთგამომრიცხავი ვარიანტებისთვის („კაცი/ქალი“, როგორც ორი ჩეკბოქსი).
ორობითი სვიტრი საშიში შეუქცევადი მოქმედებისთვის (მონაცემების წაშლა).
ორმაგი უარყოფა ტექსტში.
განლაგების შეცვლა შეცდომით ისე, რომ ფოკუსი იკარგება.

11) iGaming სპეციფიკა (მაგალითები)

კოეფიციენტების ფორმატი: ათობითი/წილადი/ამერიკული რადიო ჯგუფი - დაუყოვნებლივ გამოიყენება და რჩება პროფილში.
სწრაფი კურსი: სვიტრი „სწრაფი განაკვეთები (დადასტურების გარეშე)“ მკაფიო აღწერით და undo თითოეული ოპერაციის შემდეგ 5-10 წამით.
გამოწერა/შეტყობინებები: ჩეკბოქსი მოვლენების ტიპებზე (მოგება, ტურნირები, ანაბრები). ჯგუფური ჩეკბოქსი „აირჩიე ყველაფერი“ - tri-state.
კოეფიციენტების ცოცხალი განახლებები: სვიტრი „ცოცხალი რეჟიმი“ ოპტიმისტურობით და ქსელის შეცდომით გამოტოვებით.
საპასუხისმგებლო თამაშის ლიმიტები: რადიო მატარებლები პერიოდებისთვის (დღე/კვირა/თვე) + თანხის ველი; შეცვლილი ლიმიტის დადასტურება „ხვალიდან“ შესვლით.

12) დიზაინის სისტემის ნიშნები (მაგალითი)

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 ლოგიკის Snippets

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) მეტრიკა და ექსპერიმენტები

Misclick rate და undo სიხშირე გრაგნილების მიხედვით.
რადიო ჯგუფებში არჩევანის დრო და შეუსაბამობის შეცდომა.
„არჩევანის ყველაფერი“ წილი და სახელმძღვანელო არჩევანის შედარება (სიჩქარე, სიზუსტე).
A/B: ეტიკეტის საავტორო უფლებები, ვარიანტების რიგი, სეგმენტირებული vs რადიო, „დაუყოვნებლივ გამოიყენეთ“ vs „ღილაკზე“.

15) QA ჩეკის სია

მნიშვნელობა და არჩევანი

• კონტროლი შეესაბამება დავალებას (მრავლობითი) ჩეკბოქსი; ერთ - ერთი N - რადიოდან; მყისიერი ორობითი სვიტრი).
• სარისკო მოქმედებებისთვის, არსებობს დადასტურება/undo.

ხელმისაწვდომობა

• სწორი როლები ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' indeterminate'.
• ფოკუსის რგოლები ჩანს, ისრები მუშაობენ რადიო ჯგუფში, Space ცვლის checkbox/switch.

ქცევა

სვიტრი დაუყოვნებლივ იყენებს ცვლილებებს; შეცდომით - გამოტოვება და გაგზავნა.

• Tri-state „არჩევანის ყველაფერი“ სწორია; ეტიკეტის კლიშეები მუშაობს.

ვიზუალური

• კონტრასტი AA; მდგომარეობა მხოლოდ ფერით არ გადადის.
• დაწკაპუნების ზონები - 44 × 44 px; წესრიგი და გათანაბრება სტაბილურია.

მობილური

• Segmented კონტროლი 2-4 რადიო ვარიანტისთვის ტესტირებულია სენსორისთვის.
• თითის დარტყმა და გადახრა არ ეწინააღმდეგება.

16) დოკუმენტაცია დიზაინის სისტემაში

კომპონენტები: 'Checkbox', 'Switch', 'RadioGroup '/' SegmentedeControl'.
ზომების/ანიმაციების/ფოკუსის ნიშნები, საავტორო უფლებების მაგალითები.
ნიმუშები: „აირჩიე ყველაფერი“ (tri-state), „მყისიერი გამოყენება“, „Undo რისკის შემდეგ“.
Do/Don 't Galler: გადავადებული შენახვის სვიტრი (don' t), რადიო ნაცვლად chekboxs (don 't), სეგმენტები მოკლე კომპლექტებისთვის (do).

მოკლე რეზიუმე

საკონტროლო არჩევანი ეხება მნიშვნელობას და მოლოდინს: ჩეკბოქსი - დამოუკიდებელი დროშები და ჯგუფები, სვიტრი - ფუნქციის მყისიერი ჩართვა/გამორთვა, რადიო - ზუსტად ერთი ვარიანტი ნაკრებიდან. შეინარჩუნეთ წვდომა, იფიქრეთ ასინქრონულ მდგომარეობებზე და საავტორო უფლებებზე - და მომხმარებლები თავდაჯერებულად შეცვლიან პარამეტრებს შეცდომების და სიურპრიზების გარეშე.