Toggle

Toggle (atau dikenal juga sebagai Switch) adalah komponen kontrol UI yang memungkinkan pengguna untuk beralih antara dua kondisi, contohnya seperti ON dan OFF.

Komponen ini berfungsi sebagai pemicu cepat untuk mengaktifkan atau menonaktifkan fitur, pengaturan, atau status tertentu secara instan.

Toggle idealnya digunakan untuk perubahan langsung yang tidak memerlukan konfirmasi tambahan dari pengguna, seperti menyalakan notifikasi, mode gelap, atau izin akses.

Penggunaan

Gunakan Toggle untuk mengatur status secara langsung tanpa perlu melalui dialog tambahan. Komponen ini membantu pengguna memahami status sistem secara instan dan menjaga alur interaksi tetap efisien.

Toggle cocok untuk:

Mengaktifkan atau menonaktifkan pengaturan tertentu.

Mengontrol preferensi pengguna, seperti nada dering, izin lokasi, atau mode aplikasi.

Menandai status ON/OFF pada fitur yang bersifat permanen.

Anatomi

State (Keadaan)

Default (Off)

Tampilan awal ketika toggle belum diaktifkan.

•Warna latar biasanya netral, seperti abu-abu muda.
•Tombol geser berada di sisi kiri.
•Tidak ada efek atau animasi tambahan.

Active (On)

Tampilan ketika toggle diaktifkan oleh pengguna.

•Warna latar berubah menjadi warna utama sistem (seperti hijau atau biru) untuk menandakan status aktif.
•Tombol geser berpindah ke sisi kanan dengan animasi halus.
•Memberikan umpan balik visual bahwa perubahan sudah diterapkan.

Focus

Tampilan ketika toggle sedang dipilih atau dalam fokus interaksi (melalui klik atau tab keyboard).

•Ditandai dengan garis tepi berwarna biru di sekitar toggle.
•Memberi tanda visual bahwa elemen sedang aktif digunakan.
•Membantu aksesibilitas dan navigasi menggunakan keyboard.

Disabled

Tampilan ketika toggle tidak dapat digunakan.

•Warna latar dan tombol tampak lebih pucat dengan tingkat transparansi lebih tinggi.
•Tidak memberikan respons terhadap klik atau interaksi pengguna.
•Biasanya digunakan ketika fitur belum tersedia atau dinonaktifkan sementara.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan toggle untuk perubahan instan tanpa konfirmasi tambahan.

❌ Dihindari

Jangan gunakan toggle sebagai pengganti button untuk aksi CTA.

✅ Disarankan

Gunakan kontras warna yang cukup antara status aktif, nonaktif, dan fokus. Pastikan label atau konteks di sekitar toggle menjelaskan fitur yang diubah.

❌ Dihindari

Jangan gunakan warna dengan kontras rendah antara status aktif dan nonaktif, karena dapat menyulitkan pengguna membedakan kondisi toggle.

Penerapan

Halaman Pengaturan

Gunakan toggle untuk mengontrol preferensi sistem atau fitur langsung di halaman pengaturan.

Contohnya: menyalakan notifikasi, mengaktifkan mode gelap, atau menonaktifkan layanan tertentu tanpa perlu tindakan tambahan seperti menyimpan perubahan.

Spesifikasi