از مشخصه HTML switch در <input type="checkbox" switch> با <label> مرتبط استفاده کنید تا کلید روشن/خاموش دودویی بسازید که ارسال فرم بومی، پیمایش صفحه‌کلید، و معناشناسی صفحه‌خوان را حفظ کند (به سبک‌بندی چارگوش‌های انتخاب و فرم‌ها مراجعه کنید).
نشانه‌گذاری
مشخصه بولی switch را به ورودی چارگوش انتخاب استاندارد اضافه کنید:
<label>
Enable notifications
<input id="notifications" type="checkbox" switch>
</label>
- برچسب می‌تواند ورودی را بپوشاند یا با
for/idمرتبط باشد. همه سبک‌بندی‌ها ورودی را هدف قرار می‌دهند، بنابراین به ساختار برچسب بستگی ندارد. - وقتی انتخاب شده باشد، ورودی مقدار کادر انتخاب استاندارد خود را ارسال می‌کند. در جاوا اسکریپت، به رویدادهای
change(یاinput) گوش دهید و.checkedرا به‌جای.valueبخوانید.
سبک‌پردازی
رنگ برجسته کنترل را بااستفاده از 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;
}
راهبردهای جایگزین
پشتیبانی مرورگر و بازگشت به حالت قبل برای کنترل کلید
اگر هدف Baseline شما از <input type="checkbox" switch> پشتیبانی نمی‌کند، input-switch-polyfill را فقط زمانی بار کنید که 'switch' in HTMLInputElement.prototype false باشد. شبیه‌ساز مرورگر را بدون قیدوشرط بار نکنید. شبیه‌ساز مرورگر با تنظیم role="switch"، اعمال سبک کلید (appearance: none)، همگام‌سازی accent-color محاسبه‌شده، و ارائه پشتیبانی از کشیدن اشاره‌گر، چارگوش‌های انتخاب را با مشخصه switch بهبود می‌بخشد.
از رویکرد بار کردن بسته مناسب برای پروژه‌تان استفاده کنید. نمونه زیر فرض می‌کند که راه‌اندازی شما می‌تواند مشخص‌کننده‌های واحد را حل کند:
if (!('switch' in HTMLInputElement.prototype)) {
import('input-switch-polyfill');
}
پشتیبانی مرورگر و جایگزین‌ها برای accent-color
خصوصیت accent-color ارتقای پیش‌رو است.
مرورگرهایی که از این ویژگی پشتیبانی نمی‌کنند آن را نادیده می‌گیرند و از رنگ‌های واسط کاربر پیش‌فرض خود استفاده می‌کنند.