Bidang Kotak Centang
Kumpulkan persetujuan dan pilihan ganda dengan mudah. Mulai dari kotak centang ya/tidak sederhana hingga daftar pilihan ganda dengan "Pilih Semua", kontrol min/max, dan tata letak cerdas – kolom Kotak Centang menangani persetujuan tunggal dan pertanyaan pilihan ganda dengan validasi yang kuat dan opsi yang ramah pengguna.
Dua Mode untuk Setiap Kebutuhan Kotak Centang
Sempurna untuk:
Fitur Canggih untuk Setiap Kebutuhan
Dua Mode Kotak Centang
Mode Kotak Centang Tunggal:
Satu kotak centang untuk pertanyaan ya/tidak, persetujuan, atau pilihan ikut serta. Sempurna untuk penerimaan syarat dan ketentuan, langganan buletin, dan formulir persetujuan.
Gunakan Kasus:
- “Saya menyetujui syarat dan ketentuan”
- “Berlangganan buletin saya”
- “Ya, saya ingin menerima pembaruan”
- “Saya memastikan informasi ini akurat”
Fitur:
- Teks label kotak centang khusus
- Status default dicentang/tidak dicentang
- Nilai yang dikirimkan secara khusus (ya, 1, benar, dll.)
- Opsi validasi yang diperlukan
Mode Beberapa Kotak Centang:
Berbagai pilihan di mana pengguna dapat memilih beberapa opsi. Sempurna untuk pertanyaan "Pilih semua yang berlaku", pengumpulan preferensi, dan survei pilihan ganda.
Gunakan Kasus:
- “Fitur mana yang menarik minat Anda?” (pilihan ganda)
- “Pilih metode kontak yang Anda sukai”
- “Pilih semua layanan yang Anda butuhkan”
- “Topik apa yang menarik minat Anda?” (pilih beberapa)
Fitur:
- Opsi kotak centang tak terbatas
- Tiga gaya tata letak
- Opsi “Pilih Semua”
- Batas pemilihan minimum/maksimum
- “Lainnya” dengan input teks
- Opsi eksklusif “Tidak satupun dari pilihan di atas”
🎨 Tiga Pilihan Tata Letak (Mode Ganda)
Tata Letak Vertikal (Bertumpuk):
Kotak centang muncul satu per baris, tersusun vertikal. Tata letak yang paling mudah dibaca untuk label opsi yang lebih panjang.
Terbaik Untuk:
- Teks pilihan panjang
- 3-10 pilihan
- Formulir yang mengutamakan perangkat seluler
- Keterbacaan maksimal
Tata Letak Horizontal (Bersebelahan):
Kotak centang muncul dalam satu baris, berdampingan. Tata letak yang ringkas untuk label pendek.
Terbaik Untuk:
- 2-5 pilihan singkat
- Bentuk ringkas
- Tata letak desktop
- Efisiensi ruang
Tata Letak Grid (Beberapa Kolom):
Kotak centang disusun dalam grid 2 kolom. Tata letak seimbang yang menghemat ruang sekaligus menjaga keterbacaan.
Terbaik Untuk:
- 4-12 pilihan
- Label berukuran sedang
- Desain seimbang
- Penampilan profesional
Perilaku Responsif:
Semua tata letak secara otomatis beradaptasi dengan layar ponsel, menumpuk bila diperlukan untuk interaksi sentuh yang lebih baik.
✨ Opsi “Pilih Semua”
Pilihan Sekali Klik:
Tambahkan kotak centang khusus “Pilih Semua” di bagian atas daftar Anda. Pengguna dapat mencentang/menghapus centang semua opsi hanya dengan satu klik.
Perilaku Cerdas:
- Memeriksa semua opsi reguler secara bersamaan.
- Menghapus centang semua saat diklik lagi
- Secara otomatis akan menghapus centang jika ada opsi yang tidak dipilih.
- Menunjukkan status tidak pasti ketika beberapa (tidak semua) opsi dipilih
- Tidak termasuk “Tidak ada di atas” dari pilihan semua.
Sempurna untuk:
- Daftar kotak centang panjang (5+ pilihan)
- Formulir di mana pengguna sering memilih semuanya
- Pertanyaan “Centang semua yang sesuai”
- Pemilihan izin dan fitur
Pengalaman pengguna:
Menghemat waktu pada daftar panjang. Pengguna dapat memilih semua, lalu menghapus centang pada pengecualian tertentu.
✏️ Opsi “Lainnya” dengan Input Teks
Koleksi Respons Kustom:
Tambahkan kotak centang “Lainnya” yang akan menampilkan kolom teks saat dipilih. Pengguna dapat menentukan jawaban mereka sendiri jika opsi yang sudah ada tidak sesuai.
Cara Bekerja:
- Kotak centang “Lainnya” muncul di bagian bawah daftar.
- Saat dicentang, kolom input teks akan muncul.
- Pengguna mengetik respons khusus
- Baik pilihan kotak centang maupun teks akan dikirimkan.
Gunakan Kasus:
- “Metode kontak yang disukai: …Lainnya (harap sebutkan)”
- “Minat: …Topik lainnya”
- “Bagaimana Anda mengetahui tentang kami: …Sumber lain”
- Daftar apa pun yang tidak bisa co
Manfaat:
Mampu menangkap respons yang tidak terduga, memberikan fleksibilitas, mencegah pemilihan yang dipaksakan, dan meningkatkan kualitas data.
❌ Pilihan “Tidak Satupun di Atas”
Pilihan Eksklusif Non-Seleksi:
Tambahkan opsi “Tidak ada di atas” yang secara otomatis menghapus centang pada semua pilihan lain saat diklik.
Eksklusivitas Cerdas:
- Saat opsi “Tidak Ada” dicentang, semua opsi lainnya akan otomatis tidak dicentang.
- Saat opsi lain dicentang, "Tidak Ada" akan otomatis tidak dicentang.
- Memberikan cara yang jelas untuk menunjukkan bahwa tidak ada pilihan yang berlaku.
- Mencegah pilihan yang saling bertentangan
Gunakan Kasus:
- Pertanyaan preferensi opsional
- “Pilih semua alergi: …Tidak ada di atas”
- Pemeriksa kualifikasi
- Pilihan minat
Mengapa harus disertakan:
Mencegah pengabaian formulir, menunjukkan ketelitian, memberikan opsi penolakan yang eksplisit, dan meningkatkan akurasi data.
📊 Kontrol Pemilihan Minimum/Maksimum
Kontrol Pilihan Kuantitas:
Tetapkan jumlah minimum dan maksimum kotak centang yang harus/dapat dipilih.
Pilihan Minimum:
Pengguna wajib memilih setidaknya X opsi. Formulir tidak akan terkirim sampai persyaratan terpenuhi.
contoh:
- “Pilih minimal 2 minat” (Min: 2)
- “Pilih minimal 3 preferensi” (Min: 3)
- “Pilih setidaknya 1 opsi” (Min: 1)
Pilihan Maksimum:
Batasi pengguna untuk memilih tidak lebih dari X opsi. Kotak centang akan dinonaktifkan setelah batas tercapai.
contoh:
- “Pilih 3 fitur teratas Anda” (Maksimal: 3)
- “Pilih hingga 5 layanan” (Maks: 5)
- “Pilih tidak lebih dari 2 opsi” (Maksimal: 2)
Umpan Balik yang Jelas:
Pengguna akan melihat pesan validasi seperti “Silakan pilih minimal 2 opsi” atau “Maksimal 3 pilihan diperbolehkan.”
🔧 Manajemen Opsi yang Mudah
Kendali Penuh Atas Pilihan:
- Tambahkan Opsi – Ketik dan tekan Enter atau klik “Tambahkan Opsi.” Buat daftar kotak centang dalam hitungan detik.
- Opsi Edit – Perbarui teks tampilan (apa yang dilihat pengguna) dan nilai (apa yang dikirimkan) secara independen.
- Dicentang Secara Default – Pilih kotak centang tertentu secara otomatis dengan mencentang kotak di sebelah setiap opsi.
- Mengatur Ulang Opsi – Gunakan panah atas/bawah untuk mengatur kotak centang dalam urutan yang sempurna.
- Hapus Opsi – Hapus opsi yang tidak diinginkan hanya dengan satu klik.
Tampilan vs. Nilai:
- Label: Apa yang dilihat pengguna (misalnya, “Pembaruan Email”)
- Nilai: Apa yang disimpan (misalnya, “email_updates”)
Bangunan Massal:
Tambahkan beberapa opsi dengan cepat hanya dengan mengetik, menekan Enter, mengetik, menekan Enter – pembuatan daftar kotak centang yang cepat.
☑️ Fitur Kotak Centang Tunggal
Opsi Kustomisasi:
Teks Label Kotak Centang:
Teks yang ditampilkan di sebelah kotak centang. Buatlah teks yang jelas dan spesifik (misalnya, “Saya setuju untuk menerima email pemasaran”).
Status Tercentang Default:
Centang kotak tersebut terlebih dahulu saat formulir dimuat. Gunakan dengan hati-hati – pengguna harus secara sadar mencentang kotak persetujuan.
Nilai yang Dikirimkan Secara Kustom:
Tetapkan nilai yang akan dikirimkan saat dicentang (biasanya “ya”, “1”, atau “benar”). Nilai default adalah “ya”.
Validasi yang Diperlukan:
Jadikan kotak centang wajib. Pengguna harus mencentangnya untuk mengirimkan formulir. Sempurna untuk perjanjian yang diwajibkan.
🔀 Logika Bersyarat
Visibilitas Kotak Centang Dinamis:
Tampilkan atau sembunyikan kolom kotak centang berdasarkan nilai formulir lainnya. Tampilkan opsi hanya jika relevan.
Aturan Logika Tingkat Lanjut:
Logika AND – Semua kondisi harus terpenuhi
Logika OR – Kondisi apa pun dapat memicu tindakan.
8 Operator – Sama dengan, Tidak sama dengan, Lebih besar dari, Lebih kecil dari, Berisi, Kosong, dan lainnya
Gunakan Kasus:
Tampilkan kotak centang “Preferensi pengiriman” hanya jika “Membutuhkan pengiriman” dicentang.
Tampilkan “Topik buletin” saat kotak centang berlangganan dicentang
Tampilkan “Layanan tambahan” saat jenis layanan sama dengan “Premium”
Sembunyikan “Opsi diskon” saat total pesanan kurang dari $50
🎯 Pengalaman Pengguna yang Ditingkatkan
Fitur Cerdas Terintegrasi:
- Indikator Visual – Kotak centang yang jelas dengan jarak yang tepat
- Navigasi Keyboard – Berpindah antar opsi dengan mudah menggunakan tombol Tab.
- Ramah Sentuhan – Area sentuh besar untuk perangkat seluler
- Pilihan Default – Centang terlebih dahulu opsi tertentu
- Kelas CSS Kustom – Terapkan gaya pada grup kotak centang
- Dukungan Aksesibilitas – Label ARIA, kompatibel dengan pembaca layar
- Dioptimalkan untuk Perangkat Seluler – Ukuran kotak centang yang sempurna untuk layar sentuh.
- Label yang Jelas – Teks yang mudah dibaca dengan penataan yang tepat
- Validasi Diperlukan – Hapus pesan kesalahan
- Teks Bantuan – Tambahkan deskripsi untuk kelompok kotak centang yang kompleks
Pengaturan Sederhana dalam 3 Langkah
Siapkan kolom kotak centang Anda dalam hitungan menit.
Tambahkan Kolom Kotak Centang
Seret dan lepas kolom Kotak Centang dari bagian Kolom Dasar ke dalam formulir Anda.
Pilih Mode
Pilih “Kotak Centang Tunggal” untuk pertanyaan ya/tidak atau “Kotak Centang Ganda” untuk pilihan berganda.
Konfigurasi Opsi
Untuk satu pilihan: atur label dan nilai kotak centang. Untuk beberapa pilihan: tambahkan opsi, pilih tata letak, aktifkan opsi "Pilih Semua" atau "Lainnya" (opsional), dan atur jumlah pilihan minimum/maksimum.
🎉 Selesai! Kolom kotak centang Anda sudah siap dengan validasi cerdas.
Aplikasi Dunia Nyata
Perjanjian & Persetujuan
* Penerimaan syarat dan ketentuan
* Perjanjian kebijakan privasi
* Persetujuan email (opt-in)
* Langganan buletin
Survei & Umpan Balik
* Pertanyaan “Pilih semua yang sesuai”
* Pilihan minat ganda
* Koleksi preferensi fitur
* Pilihan minat topik
E-commerce
* Pemilihan fitur produk
* Layanan tambahan
* Opsi pengiriman
* Preferensi notifikasi
Formulir Pendaftaran
* Preferensi komunikasi
* Kategori minat
* Pengaturan izin
* Pemilihan akses fitur
Aplikasi
* Pemeriksa kualifikasi
* Pilihan keterampilan
* Bidang minat
* Opsi ketersediaan
Pengaturan & Preferensi
* Pengaturan akun
* Opsi privasi
* Pilihan notifikasi
* Tombol pengalih fitur
Opsi Bidang Lengkap
Konfigurasi Dasar
- Label Kolom – Pertanyaan atau judul yang ditampilkan di atas kotak centang
- Deskripsi/Teks Bantuan – Panduan tambahan untuk pengguna
- Kolom Wajib Diisi – Jadikan kotak centang wajib diisi
- Tempat penampung – Tidak berlaku untuk kotak centang
Mode Kotak Centang
Pilih jenis mode:
- Kotak Centang Tunggal – Pertanyaan Ya/Tidak, persetujuan, atau pilihan ikut serta (satu kotak centang)
- Beberapa Kotak Centang – Opsi pilihan ganda (beberapa kotak centang)
Opsi Kotak Centang Tunggal
- Teks di Samping Kotak Centang – Label yang ditampilkan di samping kotak centang (misalnya, “Saya setuju dengan syarat dan ketentuan”)
- Mulai Tercentang – Kotak centang sudah tercentang saat formulir dimuat
- Nilai Saat Dicentang – Nilai data yang disimpan saat dicentang (default: “ya”)
Opsi Kotak Centang Berganda
Gaya Tata Letak:
- Ditumpuk (satu per baris) – Susunan vertikal
- Bersebelahan (dalam satu baris) – Susunan horizontal
- Kisi (beberapa kolom) – tata letak kisi 2 kolom
Opsi Kotak Centang:
Buat daftar pilihan Anda:
- Teks Tampilan – Apa yang dilihat pengguna (misalnya, “Email”)
- Nilai – Apa yang dikirimkan (misalnya, “email”)
- Dicentang Secara Default – Pilih opsi tertentu sebelumnya
- Susun ulang – Pindahkan opsi ke atas/bawah
- Hapus – Hapus opsi
Opsi Khusus:
- Tambahkan Opsi “Pilih Semua” – Menambahkan kotak centang di bagian atas yang memilih/membatalkan pilihan semua opsi.
- Tambahkan Opsi “Lainnya” dengan Kotak Teks – Menambahkan opsi “Lainnya” dengan kolom teks untuk respons khusus.
- Tambahkan Opsi “Tidak ada di atas” – Menambahkan opsi eksklusif yang akan menonaktifkan semua opsi lainnya saat dipilih.
Batasan Seleksi:
- Jumlah Pilihan Minimum yang Diperlukan – Jumlah minimum kotak centang yang harus dipilih (misalnya, 2)
- Jumlah Pilihan Maksimum yang Diizinkan – Jumlah kotak centang terbanyak yang dapat dipilih (misalnya, 5)
Logika Bersyarat
- Aktifkan Logika Bersyarat – Tampilkan/sembunyikan berdasarkan kondisi
- Tipe Logika
- Semua syarat harus dipenuhi (DAN)
- Syarat apa pun dapat dipenuhi (ATAU)
- Aturan Kondisi
- Tampilkan/Sembunyikan – Tindakan yang harus diambil
- Kolom – Kolom mana yang perlu diperiksa
- Operator – Sama dengan, Tidak sama dengan, Mengandung, Lebih besar dari, Lebih kecil dari, Kosong, Tidak kosong
- Nilai – Nilai perbandingan
- Beberapa Kondisi – Tambahkan aturan tanpa batas
Opsi Lanjutan
- Kolom Tersembunyi – Membuat kolom tidak terlihat (tidak disarankan untuk kotak centang)
- Kelas CSS Kustom – Terapkan gaya kustom
- Atribut Aksesibilitas – Label ARIA untuk pembaca layar
Mengapa Memilih Kolom Kotak Centang Kami?
✅ Dua mode – Satu kotak centang atau beberapa kotak centang dalam satu tipe bidang
✅ Tata Letak Fleksibel – Susunan vertikal, horizontal, atau kisi-kisi
✅ Pilih semua – Pemilihan sekali klik untuk kemudahan
✅ Opsi Lain – Input teks untuk respons khusus
✅ Tidak Ada Opsi – Pilihan eksklusif tanpa seleksi
✅ Batas Min/Maks – Kontrol jumlah pilihan
✅ Manajemen mudah – Tambahkan, edit, susun ulang, dan hapus opsi dengan mudah.
✅ Mudah digunakan – Label yang jelas, jarak antar label yang tepat, dan ramah sentuhan.
✅ Terintegrasi penuh – Berintegrasi sempurna dengan semua fitur formulir
Pertanyaan yang Sering Diajukan
T: Apa perbedaan antara mode kotak centang tunggal dan mode kotak centang ganda?
Mode tunggal menampilkan satu kotak centang untuk keputusan ya/tidak. Mode ganda menampilkan beberapa kotak centang di mana pengguna dapat memilih lebih dari satu opsi.
T: Bisakah pengguna memilih semua kotak centang sekaligus?
Ya. Aktifkan opsi “Pilih Semua” untuk menambahkan kotak centang yang mencentang atau menghapus centang semua opsi dalam satu klik.
T: Bagaimana cara kerja pemilihan min/max?
Minimum memastikan pengguna memilih setidaknya sejumlah opsi tertentu. Maksimum membatasi berapa banyak kotak centang yang dapat mereka pilih.
T: Apa fungsi dari opsi “Lainnya”?
Ini menambahkan kotak centang tambahan berlabel "Lainnya." Saat dipilih, kolom teks akan muncul sehingga pengguna dapat memasukkan jawaban khusus.
T: Bagaimana cara kerja “Tidak satu pun dari pilihan di atas”?
Ini berfungsi sebagai pilihan eksklusif. Jika dipilih, semua kotak centang lainnya akan dikosongkan. Jika ada opsi lain yang dicentang, pilihan "Tidak Ada" akan otomatis tidak dicentang.
T: Bisakah saya memilih terlebih dahulu kotak centang tertentu?
Ya. Untuk mode tunggal, aktifkan “Mulai Dicentang”. Untuk mode ganda, beri tanda centang pada kotak kecil di samping setiap opsi yang ingin Anda pilih secara default.
T: Apakah saya perlu mencentang kotak persetujuan terlebih dahulu?
Tidak. Untuk kebijakan, ketentuan, dan persetujuan, pengguna harus secara aktif mencentang kotak tersebut sendiri.
T: Bisakah saya mengubah urutan kotak centang?
Ya. Gunakan panah atas dan bawah di samping setiap opsi untuk mengubah urutannya sesuai keinginan Anda.
T: Apa perbedaan antara teks tampilan dan nilai?
Teks tampilan adalah apa yang dilihat pengguna. Nilai adalah apa yang disimpan dalam basis data Anda untuk data yang bersih dan konsisten.
T: Bisakah saya menggunakan logika kondisional dengan kotak centang?
Ya. Picu kolom lain berdasarkan pilihan menggunakan operator seperti "Sama dengan," "Kosong," atau "Tidak kosong."
T: Bagaimana cara membuat kotak centang yang wajib diisi?
Aktifkan “Kolom Wajib Diisi”. Untuk mode tunggal, kotak harus dicentang. Untuk mode ganda, pengguna harus memilih setidaknya satu opsi atau memenuhi persyaratan minimum Anda.
T: Bisakah pengguna mengubah pilihan setelah memeriksanya?
Ya. Mereka dapat mencentang atau menghapus centang pada opsi apa pun dengan bebas sebelum mengirimkan formulir. Opsi “Pilih Semua” juga dapat diaktifkan atau dinonaktifkan kapan saja.
