Apa Itu Checkbox? Pengertian, Fungsi, dan Cara Membuatnya

Siti Khadijah Azzukhruf Firdausi

•

22 March 2024

•

1970

Checkbox adalah elemen penting dalam desain web dan aplikasi. Hal ini khususnya berlaku dalam perancangan desain antarmuka pengguna (UI).

Oleh sebab itu, pemahaman mengenai checkbox adalah hal penting bagi para desainer. Tertarik untuk mempelajarinya? Baca artikel ini sampai habis untuk informasi lebih lengkapnya!

Apa yang Dimaksud dengan Checkbox?

Checkbox adalah elemen antarmuka pengguna yang digunakan dalam formulir web, aplikasi, dan produk digital lainnya. Elemen ini digunakan dengan tujuan untuk memungkinkan pengguna melakukan seleksi dari satu atau lebih opsi.

Secara visual, checkbox umumnya direpresentasikan oleh kotak kecil yang dapat diisi dengan tanda centang (✓) ketika dipilih. Pengguna dapat mengklik atau mengetuk kotak tersebut untuk menandai atau membatalkan pilihan mereka.

Lebih lanjut, membuat checkbox sangat ideal untuk situasi di mana pengguna diberi kebebasan dalam memilih beberapa opsi dari sebuah daftar.

Di samping itu, checkbox adalah elemen yang sering disandingkan dengan radio button. Meski begitu, kedua elemen ini berbeda. Checkbox digunakan agar pengguna bisa memilih lebih dari satu pilihan. Sedangkan radio button digunakan untuk pilihan ekslusif.

Apa Saja Fungsi Checkbox?

Checkbox memiliki berbagai fungsi penting dalam desain antarmuka pengguna dan interaksi dalam aplikasi atau situs web. Fungsi-fungsi tersebut membantu dalam mengumpulkan input dari pengguna dan meningkatkan pengalaman konsumen.

Beberapa fungsi utama dari checkbox adalah:

1. Pemilihan Multipel

Fungsi pertama checkbox adalah memungkinkan pengguna untuk memilih lebih dari satu opsi dari sekumpulan pilihan.

Hal ini sangat berguna dalam situasi di mana pengguna diberi kebebasan untuk memilih semua opsi yang relevan dengan mereka. Contohnya adalah kuesioner atau saat memilih preferensi.

2. Pengaturan Konfigurasi

Berikutnya, fungsi checkbox adalah pengaturan konfigurasi. Dalam pengaturan aplikasi atau situs web, checkbox sering digunakan untuk mengaktifkan atau menonaktifkan fitur tertentu. Ini memberikan kontrol yang mudah dan intuitif atas konfigurasi bagi pengguna.

Baca Juga: 6 Tahapan Desain dalam Menciptakan UI yang Ramah Pengguna

3. Formulir Pengajuan

Dalam formulir online, checkbox digunakan untuk menyetujui syarat dan ketentuan, kebijakan privasi. Tujuannya adalah untuk memilih untuk menerima newsletter. Ini memastikan bahwa pengguna secara aktif membuat pilihan terkait dengan persetujuan mereka.

4. Pemilihan Fitur atau Layanan

Saat mendaftar untuk layanan atau membeli produk, checkbox dapat digunakan untuk memilih opsi tambahan atau layanan ekstra. Ini memungkinkan pengguna untuk menyesuaikan pilihan mereka sesuai dengan kebutuhan.

5. Aksesibilitas dan Inklusivitas

Dengan penggunaan label yang tepat dan praktik aksesibilitas lainnya, checkbox memastikan bahwa formulir dan antarmuka pengguna dapat diakses oleh semua pengguna. Hal ini juga termasuk mereka yang menggunakan teknologi assistive.

Cara Membuat CheckBox

Membuat checkbox dalam formulir web bisa dilakukan menggunakan HTML dan CSS untuk styling. Lalu, JavaScript juga bisa digunakan untuk menangani interaksi pengguna. Beberapa cara dasar membuat checkbox adalah:

1. Menulis HTML

Cara membuat checkbox pertama adalah dengan menulis HTML. Beberapa komponen yang digunakan untuk membuat checkbox dengan HTML adalah:

Elemen Input: Checkbox dibuat dengan elemen <input> dengan atribut type diatur ke "checkbox".
Label: Untuk meningkatkan aksesibilitas dan kegunaan, setiap checkbox sebaiknya memiliki label yang terkait dengannya. Ini memungkinkan pengguna untuk klik pada teks label untuk mengganti status checkbox.

Berikut adalah contoh skrip HTML untuk membuat checkbox dalam pemilihan beberapa hobi:

Dalam kode di atas, setiap checkbox diberi nama hobby. Hal ini memungkinkan server untuk mengidentifikasi ini sebagai satu grup input ketika data formulir dikirim.

2. Styling dengan CSS

Cara membuat checkbox berikutnya adalah styling dengan CSS. Hal ini bertujuan untuk membuat tampilan yang lebih menarik atau sesuai dengan tema desain milikmu. Berikut adalah contoh skrip yang digunakan untuk meningkatkan ukuran checkbox:

3. Menangani Input dengan JavaScript

Terakhir adalah dengan menangani pilihan pengguna dengan JavaScript.Dengan ini, kamu dapat menambahkan event listener pada form atau checkbox. Kemudian, kamu bisa mengambil nilai dari checkbox yang dipilih:

Dalam contoh di atas, ketika formulir di submit, JavaScript akan mengambil semua checkbox dengan nama hobby yang telah dicentang. Lalu, ia akan mengumpulkan nilai-nilai mereka, dan mencetaknya ke konsol browser.

Itulah pembahasan mengenai checkbox, mulai dari pengertian hingga cara buatnya. Selain itu, pembahasan di atas juga menunjukkan bahwa checkbox adalah elemen UI yang penting.

Berbicara tentang UI, apakah kamu tertarik di bidang ini? Jika iya, MinDi punya rekomendasi program yang cocok buatmu. Bagi yang tertarik, MinDi sarankan kamu untuk ikut Bootcamp UI/UX Design Dibimbing.id. Lewat program ini, kamu bisa belajar teori dasar UI/UX hingga praktik dengan real-case study.

Selain itu, programnya juga dirancang dengan kurikulum beginner-friendly. Jadi, pemula ataupun career-switcher juga bisa belajar dari nol tanpa merasa kesulitan.

So, nggak perlu ragu! Yuk, segera daftar dan kembangkan keahlianmu di UI/UX bareng Dibimbing.id!