Generator Switch CSS

Sesuaikan kontrol untuk merancang toggle switch, klik pratinjau langsung untuk melihat animasinya, lalu salin HTML dan CSS yang siap pakai. Atur lebar, tinggi, warna track saat mati/hidup, warna thumb, kelengkungan sudut, dan kecepatan transisi — hasilnya adalah toggle berbasis checkbox standar yang aksesibel, bukan sekadar bentuk dekoratif.

Apa Itu Alat Ini?

Toggle switch CSS adalah checkbox yang distilisasi agar terlihat dan berperilaku seperti saklar on/off fisik — track berbentuk pil dengan thumb bundar yang meluncur dari satu sisi ke sisi lain. Di baliknya, ini tetap input checkbox sungguhan, dan itu penting: kontrol tetap dapat diakses dengan keyboard, dapat digunakan dengan pembaca layar, dan bekerja dengan pengiriman formulir — berbeda dengan switch yang hanya dibangun dari div yang dapat diklik.

Alat ini membangun pola tersebut untuk Anda: checkbox tersembunyi, track yang berubah warna berdasarkan :checked, dan thumb yang meluncur menggunakan transform CSS. Sesuaikan slider dan pemilih warna, klik pratinjau untuk menguji animasi toggle sebenarnya, dan salin baik CSS maupun markup HTML minimal yang menjadi dasarnya.

Sumber: WAI-ARIA Authoring Practices, W3C — merekomendasikan input checkbox sungguhan sebagai basis yang dapat diakses untuk kontrol switch, itulah sebabnya keluaran generator ini tetap mempertahankan elemen input yang mendasarinya.

Mengapa Menggunakannya?

Pratinjau adalah switch yang benar-benar dapat diklik, bukan gambar statis — jadi Anda dapat menguji animasi persis sebelum menggunakannya.
Menghasilkan CSS sekaligus struktur HTML aksesibel (input checkbox + label) yang menjadi dasar CSS tersebut.
Kontrol penuh atas lebar/tinggi track, warna kondisi mati, warna kondisi hidup, warna thumb, kelengkungan sudut, dan kecepatan transisi.
Menggunakan pola standar checkbox + selector :checked, sehingga switch tetap dapat dinavigasi dengan keyboard dan berfungsi di dalam formulir sungguhan.
Berjalan sepenuhnya di peramban Anda — tidak ada yang Anda konfigurasi yang diunggah ke mana pun.
Gratis, tanpa pendaftaran, berfungsi di ponsel.

Cara Menggunakan

Atur lebar dan tinggi untuk menentukan ukuran track — thumb otomatis diberi ukuran agar pas dengan sedikit padding di dalamnya.
Pilih warna kondisi mati (tidak dicentang) untuk track, dan warna kondisi hidup saat diaktifkan.
Pilih warna thumb — putih atau warna netral terang biasanya memberikan kontras terkuat terhadap track.
Atur border radius ke 50% untuk switch klasik berbentuk pil, atau turunkan untuk persegi panjang yang sedikit membulat.
Sesuaikan kecepatan transisi untuk mengontrol seberapa cepat thumb meluncur dan warna track memudar di antara kondisi.
Klik toggle di pratinjau untuk memastikan animasinya terlihat pas, lalu salin CSS dan HTML ke proyek Anda.

Contoh

Input

Lebar: 52px · Tinggi: 28px · Warna mati: #cbd5e1 · Warna hidup: #ea580c · Radius: 50% · Kecepatan: 200ms

Output

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

Inti dari pola ini: kondisi :checked pada checkbox, digabungkan dengan selector sibling umum (~), mengendalikan baik warna latar track maupun jarak geser thumb.

Mengapa checkbox, bukan div dengan penanganan klik

Tergoda untuk membangun switch dari dua elemen <div> dan sedikit JavaScript yang menukar kelas saat diklik, tapi pendekatan itu biasanya merusak navigasi keyboard, pengumuman pembaca layar, dan pengiriman formulir — checkbox sungguhan menangani ketiganya secara gratis. Pola yang dihasilkan alat ini mempertahankan <input type="checkbox"> sebagai elemen interaktif yang sesungguhnya (tersembunyi secara visual tapi tetap bisa difokuskan), dan menggunakan CSS murni — tanpa JavaScript sama sekali — untuk menata track dan thumb berdasarkan kondisi :checked bawaan checkbox.

Gaya switch yang umum

Switch pil klasik: border radius 50%, ukuran sedang (lebar 48–56px), perubahan warna yang jelas antara hidup/mati.
Switch panel pengaturan: ukuran lebih kecil (lebar 36–44px), warna mati yang redup (abu-abu terang) berlawanan dengan kondisi hidup berwarna merek.
Switch sedikit membulat: border radius sekitar 20–30% alih-alih pil penuh, untuk tampilan lebih persegi panjang, gaya aplikasi.
Switch cepat dan responsif: kecepatan transisi 100–150ms terasa langsung dan responsif.
Switch lambat dan mantap: kecepatan transisi 300–400ms terasa lebih halus dan matang, berguna untuk satu switch pengaturan yang menonjol.

Memadukan dengan alat CSS lainnya

Track dan thumb yang dihasilkan sudah menggunakan border-radius secara internal, jadi jika Anda menginginkan varian bersudut tajam atau kelengkungan berbeda di luar yang ditawarkan slider, Generator Border Radius memungkinkan Anda menyesuaikan setiap sudut secara independen sebelum menempelkan nilainya. Generator Box Shadow berguna untuk menambahkan bayangan halus pada thumb agar terlihat lebih berdimensi.

→ Generator Border Radius · Generator Box Shadow

Pertanyaan yang Sering Diajukan

Mengapa hasilnya menyertakan HTML, bukan hanya CSS?

Toggle switch bukan sekadar visual — ia bergantung pada <input type="checkbox"> sungguhan yang dibungkus dalam <label>, ditambah elemen track dan thumb yang ditargetkan CSS. Tanpa struktur persis itu, selector berbasis :checked pada CSS yang dihasilkan tidak akan punya apa pun untuk ditempelkan, jadi kedua bagian disalin bersamaan.

Apakah switch ini aksesibel?

Ya — karena elemen interaktifnya adalah checkbox sungguhan (hanya disembunyikan secara visual dengan teknik yang membuatnya tetap ada di accessibility tree, bukan dengan display:none), ia tetap dapat difokuskan dengan Tab, dialihkan dengan Spasi atau Enter, dan diumumkan dengan benar oleh pembaca layar sebagai checkbox dalam kondisi tercentang/tidak tercentang saat ini.

Bisakah saya menggunakan ini di dalam formulir HTML sungguhan?

Bisa. Karena elemen dasarnya adalah input checkbox standar, Anda bisa memberinya atribut name dan value, dan ia akan dikirim seperti checkbox lainnya — switch yang dicentang mengirim nilainya, yang tidak dicentang diabaikan, persis seperti checkbox biasa.

Mengapa thumb bergerak menggunakan transform, bukan mengubah posisi left?

Menganimasikan transform: translateX() ditangani oleh compositor peramban dan tetap mulus bahkan di perangkat kelas bawah, sedangkan menganimasikan left memicu perhitungan ulang layout di setiap frame. Karena itulah CSS yang dihasilkan selalu menggunakan transform untuk gerakan geser.

Apa sebenarnya yang dikontrol oleh slider border radius?

Ia menskalakan kelengkungan sudut track dan thumb secara bersamaan, proporsional dengan tinggi track. Pada 50% Anda mendapatkan pil yang sepenuhnya bulat dengan thumb bundar; nilai lebih rendah menjaga bentuk tetap lebih persegi panjang untuk switch bergaya aplikasi yang lebih kotak.