Checkbox & Radio Bootstrap – Vertical & Horizontal

Kotak centang atau yang lebih dikenal Checkbox merupakan sebuah kotak kosong secara default yang dapat dicentang dengan cara di klik, umumnya ini digunakan pada formulir di bagian terms / privacy. Elemen form lainnya yang serupa adalah radio, ini biasa digunakan pada pilihan (opsi) yang hanya membutuhkan 1 jawaban.

Checkbox & Radio

Seperti yang dijelaskan di atas, Checkbox dan Radio memiliki perbedaan dalam fungsinya.

• Apa itu Checkbox ?

Suatu elemen berbentuk kotak dan kosong yang umumnya digunakan pada formulir, seseorang yang mengisi formulir dapat mencentangnya berapapun (jika ada beberapa Checkbox). Umumnya digunakan pada beberapa pilihan yang dapat dipilih beberapa dan bisa juga digunakan tunggal (satu Checkbox saja) seperti pada formulir pendaftaran online sebagai persyaratan / kebijakan privasi yang perlu diterima.

• Apa itu Radio ?

Yaitu suatu elemen berbentuk bulat yang dapat di isi / klik salah satu saja dari beberapa radio lainnya, umumnya ini digunakan pada pilihan Jenis Kelamin. Ketika seseorang memilih pilihan pertama, maka pilihan kedua dan selanjutnya tidak dapat dipilih.

Membuat Checkbox & Radio di Bootstrap

Jika membangun sebuah situs menggunakan framework Bootstrap, kamu dapat menerapkan Checkbox / Radio dengan mudah. Manfaatkan class-class yang sudah disediakan.

Membuat Checkbox

Terdapat 2 jenis Checkbox jika dilihat dari sisi penampilannya, yaitu: Vertikal (default) dan Horizontal. Ketika membuat beberapa Checkbox dalam satu ruang yang sama secara defaultnya akan menyusun ke bawah (vertikal), sedangkan horizontal merupakan Checkbox dalam barisan yang nantinya akan berbaris ke samping dalam 1 barisan jika memungkinkan.

• Checkbox Default (Vertikal)

Gambar di atas merupakan contoh Checkbox Bootstrap default, akan menyusun ke bawah setiap kali menambahkan Checkbox di ruangan yang sama. Untuk membuatnya, cukup gunakan class checkbox sebagai pembungkusnya dan jangan lupa berikan type=”checkbox” juga sebagai default HTML.

<div class="checkbox">
  <label><input type="checkbox" value="">Pilihan 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Pilihan 2</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Pilihan 3</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Pilihan 4</label>
</div>

Pastikan untuk menyisipkannya di dalam tag form jika ingin menampilkannya sebagai elemen dari formulir tersebut.

• Checkbox Inline (Horizintal)

class yang digunakan berbeda dengan Checkbox default, gunakan class checkbox-inline untuk membuatnya bersatu dalam satu baris.

<div class="checkbox-inline">
  <label><input type="checkbox" value="">Pilihan 1</label>
</div>
<div class="checkbox-inline">
  <label><input type="checkbox" value="">Pilihan 2</label>
</div>
<div class="checkbox-inline">
  <label><input type="checkbox" value="">Pilihan 3</label>
</div>
<div class="checkbox-inline">
  <label><input type="checkbox" value="">Pilihan 4</label>
</div>

Berikan class checkbox-inline hanya pada pembungkusnya saja, input type tetap checkbox tanpa tambahan -inline karena ini adalah tag bawaan HTML. Hasilnya dari kode di atas akan terlihat seperti ini:

Setiap Checkbox yang ditambahkan dengan pembungkus checkbox-inline akan terus bertambah ke kanan (karena dimulai dari kiri) hingga ukuran layar memungkinkan. Jika membuka di ukuran layar yang lebih kecil dari panjang total Checkbox, maka ia akan berpindah ke bawah.

Membuat Radio

Tidak berbeda jauh dengan Checkbox, Radio memiliki gaya vertikal dan horizontal yang mirip dengan Checkbox.

• Radio Default (Vertikal)

Cukup gunakan class radio pada pembungkus kemudian diikuti dengan input type=”radio” sebagai bawaan elemen form HTML.

<div class="radio">
   <label><input type="radio" name="posradio1">Pilihan 1</label>
 </div>
 <div class="radio">
   <label><input type="radio" name="posradio2">Pilihan 2</label>
 </div>
 <div class="radio">
   <label><input type="radio" name="posradio3">Pilihan 3</label>
 </div>
 <div class="radio">
   <label><input type="radio" name="posradio3">Pilihan 4</label>
 </div>

Hasilnya akan terlihat seperti ini:

Radio yang ditambahkan akan terus menyusun ke bawah walaupun dilihat di layar berukuran lebar.

• Radio Inline (Horizontal)

<div class="radio-inline">
  <label><input type="radio" name="posradio1">Pilihan 1</label>
</div>
<div class="radio-inline">
  <label><input type="radio" name="posradio2">Pilihan 2</label>
</div>
<div class="radio-inline">
  <label><input type="radio" name="posradio3">Pilihan 3</label>
</div>
<div class="radio-inline">
  <label><input type="radio" name="posradio3">Pilihan 4</label>
</div>

Ini adalah contoh kodingan untuk membuat Radio Inline di Bootstrap, berikan class radio-inline pada pembungkusnya dan biarkan input type tetap radio (tanpa -inline). Hasilnya akan terlihat seperti ini:

Setiap Radio yang ditambahkan dengan pembungkus radio-inline akan terus bertambah ke kanan (karena dimulai dari kiri) hingga ukuran layar yang memungkinkan untuk Radio tampil Inline. Jika membuka di ukuran layar yang lebih kecil dari panjang total Radio, maka ia akan berpindah ke bawah (responsive).

Jika ingin menampilkan Checkbox / Radio di dalam sebuah formulir, pastikan untuk menyimpan Checkbox dan Radio di dalam formulir. Misalnya formulir register.