सुलभ स्विच कंट्रोल बनाना

<input type="checkbox" switch> पर एचटीएमएल switch एट्रिब्यूट का इस्तेमाल करें. साथ ही, उससे जुड़े <label> का इस्तेमाल करके, बाइनरी ऑन/ऑफ़ टॉगल बनाएं. इससे नेटिव फ़ॉर्म सबमिशन, कीबोर्ड नेविगेशन, और स्क्रीन रीडर सिमैंटिक को सुरक्षित रखा जा सकता है. इसके बारे में ज़्यादा जानने के लिए, चेकबॉक्स की स्टाइलिंग और फ़ॉर्म देखें.

मार्कअप

स्टैंडर्ड चेकबॉक्स इनपुट में बूलियन switch एट्रिब्यूट जोड़ें:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>

• लेबल, इनपुट को रैप कर सकता है या for/id से जुड़ा हो सकता है. सभी स्टाइलिंग, इनपुट को टारगेट करती हैं. इसलिए, यह लेबल के स्ट्रक्चर पर निर्भर नहीं करता.
• सही का निशान लगाने पर, इनपुट अपनी स्टैंडर्ड चेकबॉक्स वैल्यू सबमिट करता है. JavaScript में, change (या input) इवेंट सुनें और .value के बजाय .checked पढ़ें.

शैलीकृत करना

accent-color का इस्तेमाल करके, कंट्रोल के हाइलाइट कलर को पसंद के मुताबिक बनाएं (ब्रैंड के हिसाब से फ़ॉर्म देखें) और पक्का करें कि फ़ोकस स्टाइलिंग साफ़ तौर पर दिखे:

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

फ़ॉलबैक रणनीतियां

स्विच-कंट्रोल के लिए फ़ॉलबैक और ब्राउज़र सहायता

अगर आपका बेसलाइन टारगेट <input type="checkbox" switch> के साथ काम नहीं करता है, तो input-switch-polyfill को सिर्फ़ तब लोड करें, जब 'switch' in HTMLInputElement.prototype, false हो. पॉलीफ़िल को बिना किसी शर्त के लोड न करें. पॉलीफ़िल, switch एट्रिब्यूट वाले चेकबॉक्स को बेहतर बनाता है. इसके लिए, वह role="switch" को सेट करता है, स्विच स्टाइलिंग (appearance: none) लागू करता है, कंप्यूट किए गए accent-color को सिंक करता है, और पॉइंटर को खींचकर छोड़ने की सुविधा देता है.

अपने प्रोजेक्ट के हिसाब से, पैकेज लोड करने का सही तरीका इस्तेमाल करें. नीचे दिए गए उदाहरण में यह माना गया है कि आपका सेटअप, मॉड्यूल स्पेसिफ़ायर को रिज़ॉल्व कर सकता है:

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

accent-color के लिए फ़ॉलबैक और ब्राउज़र सहायता

accent-color प्रॉपर्टी, परतदार वृद्धि है. इस प्रॉपर्टी के साथ काम न करने वाले ब्राउज़र, इसे अनदेखा कर देंगे और अपने डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के रंगों का इस्तेमाल करेंगे.