বাইনারি অন/অফ টগল তৈরি করতে <input type="checkbox" switch>-এ HTML switch অ্যাট্রিবিউট ব্যবহার করুন, যার সাথে <label> যুক্ত থাকে। এটি নেটিভ ফর্ম জমা দেওয়া, কীবোর্ড নেভিগেশন ও স্ক্রিন রিডার সিম্যান্টিকস (স্টাইলিং চেকবক্স ও ফর্ম দেখুন) বজায় রাখে।
Markup
স্ট্যান্ডার্ড চেকবক্স ইনপুটে বুলিয়ান switch অ্যাট্রিবিউট যোগ করুন:
<label>
Enable notifications
<input id="notifications" type="checkbox" switch>
</label>
- লেবেল ইনপুটকে র্যাপ করতে পারে বা
for/id-এর সাথে যুক্ত হতে পারে। সব স্টাইলিং ইনপুটকে টার্গেট করে, তাই এটি লেবেল কাঠামোর উপর নির্ভর করে না। - চেক করা হলে, ইনপুটটি তার স্ট্যান্ডার্ড চেকবক্স মান জমা দেয়। জাভাস্ক্রিপ্টে,
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>-এ কাজ না করলে, 'switch' in HTMLInputElement.prototype-এর মান false হলে তবেই input-switch-polyfill লোড করুন। কোনও শর্ত ছাড়াই পলিফিল লোড করবেন না। পলিফিল role="switch" সেট করে, সুইচ স্টাইলিং (appearance: none) প্রয়োগ করে, কম্পিউট করা accent-color সিঙ্ক করে এবং পয়েন্টার ড্র্যাগ করার সুবিধা প্রদান করে switch অ্যাট্রিবিউট সহ চেকবক্স উন্নত করে।
আপনার প্রোজেক্টের জন্য উপযুক্ত প্যাকেজ-লোডিং পদ্ধতি ব্যবহার করুন। নিচের উদাহরণে ধরে নেওয়া হয়েছে যে আপনার সেট-আপ মডিউল স্পেসিফায়ার সমাধান করতে পারে:
if (!('switch' in HTMLInputElement.prototype)) {
import('input-switch-polyfill');
}
অ্যাকসেন্ট-কালারের জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট
accent-color প্রপার্টি হল প্রোগ্রেসিভ এনহ্যান্সমেন্ট।
যেসব ব্রাউজারে এই প্রপার্টি কাজ করে না, সেগুলি এটি উপেক্ষা করবে এবং ডিফল্ট UI কালার ব্যবহার করবে।