नियंत्रणों का चयन: चेकबॉक्स, स्विच, रेडियो बटन

1) मुख्य अंतर (अर्थ, "आंकड़ा" नहीं)

• एन में से एक की जरूरत है - रेडियो ले लो।
• आपको फ्लैग - चेकबॉक्स के किसी भी सेट की जरूरत है।
• आपको एक द्विआधारी टॉगल स्विच की आवश्यकता है जो व्यवहार को तुरंत बदल देता है - स्विच

2) निर्णय का पेड़ (छोटा)

1. कुछ स्वतंत्र चुनाव? → चेकबॉक्स।

2. सेट से बिल्कुल एक विकल्प? → रेडियो बटन (या खंड-नियंत्रण/टैग)।

3. एक द्विआधारी ध्वज, प्रभाव तत्काल और ध्यान देने योग्य है? → स्विच करें।

4. एक "आंशिक" चिह्न (सबसेट) की आवश्यकता है? → त्रिकोणीय राज्य के साथ चेकबॉक्स।

5. जोखिम/लागत अधिक है (भुगतान, मॉडरेशन)? → रेडियो/चेकबॉक्स + पुष्टि (स्विच नहीं)।

3) उपयोगकर्ता व्यवहार और अपेक्षा

स्विच = तत्काल परिणाम। स्विच करने के बाद, उपयोगकर्ता को अलग सेव के बिना तत्काल प्रभाव और प्रतिवर्तनीयता की उम्मीद है।

चेकबॉक्स = विकल्पों की पसंद। इसे तुरंत या बटन द्वारा लागू किया जा सकता है - मॉडल को स्पष्ट रूप से दिखाना महत्वपूर्ण है ("सेटिंग्स सेव "/" क्लिक सेव ")।

रेडियो = मोड चयन। संक्रमण इंटरफ़ेस का पुनर्निर्माण कर सकता है। संकेत परिवर्तन (माइक्रोनिमेशन/पाठ)।

4) राज्य और दृश्य शब्दार्थ

सामान्य/हवर/फोकस/सक्रिय/अक्षम/त्रुटि। पाठ और संकेतकों के विपरीत ≥ AA।

त्रि-अवस्था (चेकबॉक्स): खाली/आंशिक/चयनित. आंशिक अवस्था अपने आप में क्लिक करने योग्य नहीं है - क्लिक "चयनित" में परिवर्तन करता है, न कि "रिक्त"।

स्विच: रंग और धावक स्थिति में एक स्पष्ट ऑन/ऑफ अंतर है। रंग अर्थ का एकमात्र वाहक नहीं है (पास में प्रतीक/लेबल)।

5) नकल लेखन और हस्ताक्षर

क्रिया + वस्तु या कथन जो चुने जाने पर सत्य हो जाता है।

चेकबॉक्स: "ई-मेल सूचनाएँ प्राप्त करें।"

स्विच: "सूचनाएं: ऑन/ऑफ" (बाईं ओर लेबल, राज्य - दाईं ओर या स्विच में ही)।

रेडियो: "गुणांक प्रारूप: दशमलव/आंशिक/अमेरिकी"।

दोहरे इनकार से बचें: "अनप्लग मत करो"... - भ्रमित करता है।

जोखिम भरे कार्यों के लिए, एक माध्यमिक विवरण जोड़ें: "ऑन। त्वरित दांव (कोई पुष्टि नहीं) - आप 5 सेकंड के भीतर रद्द कर सकते हैं"

6) एक्सेसिबिलिटी (A11y) और कीबोर्ड

चेकबॉक्स: 'roile = "checkbox",' aria-checked = "true 'fall' missic", Space - switching।

स्विच करें: देशी '<इनपुट प्रकार = "चेकबॉक्स">' स्विच दृश्य या 'रोल = "स्विच" के साथ' आरिया-चेक 'के साथ। चेकबॉक्स जैसा व्यवहार (स्थान)।

रेडियो: कंटेनर पर 'रोल = "रेडियोग्रुप"', तत्वों पर 'रोल = "रेडियो", तीर - या - पसंद को स्थानांतरित करें, स्पेस/एंटर - पुष्टि करें।

समूह: सामान्य संदर्भ के लिए 'फील्डसेट '/' किंवदंती' का उपयोग करें।

फोकस के छल्ले को दिखाई दें; क्लिक ज़ोन के आयाम ≥ 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) अतुल्यकालिक परिवर्तन और त्रुटियाँ

स्विच + नेटवर्क: स्विचिंग - तुरंत आशावादी यूआई सर्वर पुष्टि - यदि असफल, धीरे से वापस रोल करें और कारण दिखाएं।

"सेव" पर चेकबॉक्स/रेडियो: अभी तक कोई पुष्टि नहीं है - वैश्विक व्यवहार न बदलें।

जोखिम भरी क्रियाएं: 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) iGaming बारीकियों (उदाहरण)

गुणांक का प्रारूप: दशमलव/भिन्नात्मक/अमेरिकी रेडियो समूह - तुरंत लागू किया जाता है और प्रोफ़ाइल में सहेजा जाता है।

क्विक बेट: क्विक बेट्स (कोई पुष्टि नहीं) स्पष्ट विवरण के साथ स्विच करें और प्रत्येक ऑपरेशन के बाद 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) यूएक्स लॉजिक स्निपेट्स

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) मेट्रिक्स और प्रयोग

स्विच पर मिसक्लिक दर और पूर्ववत आवृत्ति।

रेडियो समूहों द्वारा चयन और सत्यापन त्रुटियों का समय।

अनुपात "सभी का चयन करें" और मैनुअल चयन (गति, सटीकता) के साथ तुलना करें।

A/B: लेबल कॉपीराइटिंग, ऑप्शन ऑर्डर, सेगमेंटेड बनाम रेडियो, "बटन द्वारा तुरंत" बनाम "लागू करें।

15) क्यूए चेकलिस्ट

अर्थ और पसंद

• नियंत्रण कार्य से मेल खाता है (कई → चेकबॉक्स; एन रेडियो में से एक; तत्काल बाइनरी → स्विच)।
• जोखिम भरे कार्यों के लिए, पुष्टि/पूर्ववत है।

उपलब्धता

• सही भूमिकाएँ ('चेकबॉक्स '/' स्विच '/' रेडियोग्रुप '/' रेडियो'), 'आरिया-चेक '/' अनिश्चित'।
• फोकस के छल्ले दिखाई देते हैं, तीर एक रेडियो समूह में काम करते हैं, स्पेस स्विच चेकबॉक्स/स्विच।

व्यवहार

• स्विच परिवर्तनों को तुरंत लागू करता है; त्रुटि - रोलबैक और संदेश पर।
• "सभी का चयन करें" के लिए त्रि-राज्य सही है; लेबल क्लिक काम करता है।

दृश्य

• कंट्रास्ट ≥ एए; राज्य केवल रंग नहीं है।
• क्लिक ज़ोन ≥ 44 × 44 px; आदेश और संरेखण स्थिर हैं।

मोबाइल

• स्पर्श के लिए परीक्षण किए गए 2-4 रेडियो वेरिएंट के लिए खंडित नियंत्रण।
• उंगली मारना और स्क्रॉलिंग संघर्ष नहीं करते हैं।

16) डिजाइन प्रणाली में प्रलेखन

घटक: 'चेकबॉक्स', 'स्विच', 'रेडियोग्रुप '/' सेगमेंट नियंत्रण'।

आकार/एनीमेशन/फ़ोकस टोकन, कॉपीराइटिंग के उदाहरण।

पैटर्न: "सभी का चयन करें" (त्रि-राज्य), "तत्काल अनुप्रयोग", "जोखिम के बाद पूर्ववत"।

Do/Dont गैलरी: विलंबित-सेव स्विच (मत करो), चेकबॉक्स (मत) के बजाय रेडियो, लघु सेट (do) के लिए खंड।

संक्षिप्त सारांश

नियंत्रण का विकल्प अर्थ और अपेक्षाओं के बारे में है: चेकबॉक्स - स्वतंत्र झंडे और समूह, स्विच - तत्काल ऑन/ऑफ फ़ंक्शन, रेडियो - सेट से बिल्कुल एक विकल्प। उपलब्धता बनाए रखें, अतुल्यकालिक राज्यों और कॉपीराइटिंग के बारे में सोचें - और उपयोगकर्ता आत्मविश्वास से त्रुटियों या आश्चर्य के बिना सेटिंग्स को बदल देंगे।