Membuat Kontrol Tombol yang Mudah Diakses

Fitur web: <input type="checkbox" switch> accent-color

Gunakan atribut switch HTML pada <input type="checkbox" switch> dengan <label> terkait untuk membuat tombol aktif/nonaktif biner yang mempertahankan pengiriman formulir native, navigasi keyboard, dan semantik pembaca layar (lihat Menata Gaya Kotak Centang dan Formulir).

Markup

Tambahkan atribut boolean switch ke input kotak centang standar:

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • Label dapat menggabungkan input atau dikaitkan dengan for/id. Semua gaya menargetkan input, sehingga tidak bergantung pada struktur label.
  • Jika dicentang, input akan mengirimkan nilai kotak centang standarnya. Di JavaScript, proses peristiwa change (atau input) dan baca .checked, bukan .value.

Gaya visual

Sesuaikan warna sorotan kontrol menggunakan accent-color (lihat Formulir yang Konsisten dengan Brand) dan pastikan gaya fokus terlihat:

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;
}

Strategi penggantian

Penggantian & dukungan browser untuk kontrol tombol

Jika target Dasar Pengukuran Anda tidak mendukung <input type="checkbox" switch>, muat input-switch-polyfill hanya jika 'switch' in HTMLInputElement.prototype adalah false. Jangan memuat polyfill tanpa syarat. Polyfill meningkatkan kotak centang dengan atribut switch dengan menyetel role="switch", menerapkan gaya tombol (appearance: none), menyinkronkan accent-color yang dihitung, dan memberikan dukungan tarik pointer.

Gunakan pendekatan pemuatan paket yang sesuai untuk project Anda. Contoh di bawah mengasumsikan bahwa penyiapan Anda dapat me-resolve penentu modul:

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

Penggantian & dukungan browser untuk accent-color

Properti accent-color adalah progressive enhancement. Browser yang tidak mendukung properti ini akan mengabaikannya dan menggunakan warna UI default.