Интихоби идоракунӣ: қуттии чек, коммутатор, тугмаи радио

1) Фарқиятҳои калидӣ (маъно, на "рақам")

• Ниёз ба яке аз N - гирифтани радио.
• Ба шумо ягон маҷмӯи парчамҳо лозим аст - қуттиҳо.
• Ба шумо як тугмаи гузариши бинарӣ лозим аст, ки фавран рафторро тағир медиҳад - гузариш.

2) Дарахти қарор (кӯтоҳ)

1. Якчанд интихоботи мустақил? → Қуттиҳои чек.
2. Маҳз як вариант аз маҷмӯа? → Тугмаҳои радио (ё сегмент-назорат/барчасбҳо).
3. Як парчами бинарӣ, таъсир фаврӣ ва намоён аст? → Гузариш.
4. Ба аломати "қисман" лозим аст (зер)? → Checkbox бо tri-state.
5. Хавф/арзиш баланд аст (пардохт, бамеъёр)? → Радио/қуттии чек + тасдиқ (гузариш нест).

3) Рафтор ва интизориҳои корбар

Гузариш = натиҷаи фаврӣ. Пас аз гузаштан, корбар интизор аст, ки таъсири фаврӣ ва тағирёбанда бидуни Save алоҳида.
Қуттии чек = интихоби имконот. Он метавонад фавран ё бо тугма татбиқ карда шавад - муҳим аст, ки моделро ба таври возеҳ нишон диҳед ("Танзимоти захирашуда "/" Наҷоти клик ").
Радио = интихоби режим. Гузариш метавонад интерфейсро барқарор кунад. Тағйироти сигнал (микроаниматсия/матн).

4) Давлатҳо ва семантикаи визуалӣ

Муқаррарӣ/Hover/Focus/Active/Маъюбон/Хато. Муқоисаи матн ва нишондиҳандаҳо ≥ АА.
Tri-state (checkbox): холӣ/қисман/интихобшуда. Ҳолати қисман худ аз худ клик карда намешавад - клик ба "интихобшуда" тағир меёбад ва "холӣ" нест.
Гузариш: Фарқияти равшан дар ранг ва мавқеи даванда дорад. Ранг ягона интиқолдиҳандаи маъно нест (нишона/нишона дар наздикӣ).

5) Нусхабардорӣ ва имзоҳо

Феъл + объект ё баёноте, ки ҳангоми интихоб дуруст мешавад.

Қуттии чек: "Гирифтани огоҳиномаҳои почтаи электронӣ".
Гузариш: "Огоҳиҳо: Фурӯзон/Хомӯш" (нишона дар тарафи чап, ҳолат - дар тарафи рост ё худи тугма).
Радио: "Формати коэффисиент: Даҳӣ/Касрӣ/Амрико".
Аз рад кардани дукарата худдорӣ кунед: "Нагузоред"... - ошуфтааст.

Барои амалҳои хатарнок тавсифи дуюмдараҷа илова кунед: "Дар. Bets Quick (бе тасдиқ) - Шумо метавонед дар давоми 5 сония бекор кунед"

6) Дастрасӣ (A11y) ва клавиатура

Қуттии чек: 'нақш = "checkbox"', 'aria-checked = "ҳақиқӣ' бардурӯғ 'омехта' ', фазо - гузариш.
Гузариш: ватанӣ '<навъи вуруд = "checkbox">' бо гузариш визуалӣ ё 'нақш = "гузариш" бо' aria-checked '. Рафтори ба қуттии қуттӣ монанд (Фазо).
Радио: 'нақш = "радиогрупп"' дар контейнер, 'нақш = "радио"' дар унсурҳо, тирҳо ↑/↓ ё ←/→ - интихобро ҳаракат диҳед, 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) Тағйирот ва хатогиҳои асинхронӣ

Switch + network: коммутатсия → фавран оптимистии UI → сервер тасдиқ кардан → агар номуваффақ бошад, оҳиста ақиб гардед ва сабабро нишон диҳед.
Checkbox/радио дар "Захира": то ҳол ягон тасдиқ вуҷуд надорад - рафтори глобалиро тағир надиҳед.
Амалҳои хатарнок: тасдиқкунӣ (модалка) ё бекор кардани панел барои 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 вариант - сегментҳо дар як сатр.
Қуттиҳои чек: ҳаммарказкунии як сутун; барои рӯйхатҳои дароз - "Ҳама" + три-давлатро барои гурӯҳ интихоб кунед.
Гузариш: нишона дар тарафи чап, назорат аз тарафи рост дар ҳамон сатр; ҳолати ҷориро бо матн дар ҳолати зарурӣ нишон диҳед (Фаъол/Хомӯш).

10) Антипаттернҳо

Гузариш, ки тағиротро фавран татбиқ намекунад ("Захира" -ро талаб мекунад).
Тугмаҳои радио, ки дар он якчанд интихобҳо имконпазиранд.
Қуттии чек барои имконоти мутақобила ("Мард/Зан" ҳамчун ду қуттӣ).
Тугмаи бинарӣ барои амали хатарноки бебозгашт (нест кардани маълумот).
Радди дукарата дар матн.
Тағйир додани тарҳбандии хатогӣ, то ки фокус гум шавад.

11) Хусусиятҳои бозӣ (мисолҳо)

Формати коэффисентҳо: Гурӯҳи радиои даҳӣ/касрӣ/амрикоӣ - фавран татбиқ карда мешавад ва ба профил нигоҳ дошта мешавад.
Bet Quick: Bets Quick (бе тасдиқ) бо тавсифи возеҳ иваз карда мешавад ва пас аз ҳар як амалиёт 5-10 сония бекор карда мешавад.
Обуна/огоҳиҳо: қуттиҳо аз рӯи намуди ҳодиса (ғолиб, мусобиқаҳо, амонатҳо). Қуттии чеки гурӯҳӣ "Ҳамаашро интихоб кунед" - три-давлат.
Навсозиҳои мустақими коэффисиентҳо: гузариш "Ҳолати зинда" бо хушбинӣ ва бозгашт ба хатогии шабака.
Маҳдудиятҳои бозӣ: тугмаҳои радио барои давраҳо (рӯз/ҳафта/моҳ) + майдони маблағ; тасдиқи маҳдудияти тағирёфта бо вуруд "аз фардо".

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

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 ва бекор кардани басомади коммутаторҳо.
Вақт барои хатогиҳои интихоб ва санҷиш аз ҷониби гурӯҳҳои радио.
Таносуби "Ҳамаро интихоб кунед" ва муқоиса бо интихоби дастӣ (суръат, дақиқӣ).
A/B: нусхабардории тамғакоғазҳо, фармоиши опсия, тақсимоти против радио, "фавран" vs "бо тугма" татбиқ кунед ".

15) Рӯйхати назоратии QA

Маънӣ ва интихоб

• Назорат ба вазифа мувофиқат мекунад (қуттиҳои чандкарата →; яке аз радиои N →; фаврии бинарӣ → гузариш).
• Барои амалҳои хатарнок тасдиқ/бекор кардан мавҷуд аст.

Дастрасӣ

• Нақшҳои дуруст ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' номуайян'.
• Ҳалқаҳои фокусӣ намоёнанд, тирҳо дар гурӯҳи радио кор мекунанд, Гузаришҳои фазоӣ қуттиҳо/коммутаторҳо.

Рафтор

• Гузариш тағиротро фавран татбиқ мекунад; хатогӣ - бозгашт ва паём.
• Сеҷониба барои "Ҳамаашро интихоб кунед" дуруст аст; кликҳои тамғакоғазҳо кор мекунанд.

визуалӣ

• Муқоиса ≥ АА; давлат танҳо ранг нест.
• Минтақаҳои ≥ 44 × 44 px -ро пахш кунед; тартиб ва ҳаммарказ устувор мебошанд.

Мобилӣ

• Назорати сегментатсияшуда барои 2-4 вариантҳои радио, ки барои ламс санҷида шудаанд.
• Ангушт задан ва ҳаракат кардан мухолифат намекунад.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компонентҳо: 'Checkbox', 'Гузариш', 'Radio

Андоза/аниматсия/аломатҳои фокусӣ, намунаҳои нусхабардорӣ.
Намунаҳо: "Ҳамаашро интихоб кунед" (сеҷониба), "Барномаи фаврӣ", "Пас аз хатар бекор кунед".
Галереяро иҷро накунед: калиди таъхирнопазир (набошед), радио ба ҷои қуттиҳои қуттӣ (набошед), сегментҳо барои маҷмӯи кӯтоҳ (иҷро кунед).

Хулосаи мухтасар

Интихоби назорат аз маъно ва интизориҳо иборат аст: қуттиҳо - парчамҳо ва гурӯҳҳои мустақил, гузариш - функсияи фаврӣ/хомӯш, радио - маҳз як вариант аз маҷмӯа. Дастрасиро нигоҳ доред, дар бораи ҳолати асинхронӣ ва нусхабардорӣ фикр кунед - ва корбарон бидуни хатогӣ ё ногаҳонӣ танзимотро бо боварӣ иваз мекунанд.