HTML Dasar / Form & Input

Radio, Checkbox & Select

Radio, Checkbox & Select 🔘☑️📋

Tiga elemen ini digunakan saat pengguna perlu memilih dari opsi yang sudah tersedia — bukan mengetik bebas. Masing-masing memiliki karakteristik dan kasus penggunaan yang berbeda.

Radio Button — Pilih Satu dari Banyak

Radio button digunakan saat pengguna hanya boleh memilih satu opsi dari beberapa pilihan yang tersedia. Seperti soal pilihan ganda.

<p>Pilih jenis kelamin:</p>

<label>
  <input type="radio" name="jenis_kelamin" value="pria"> Pria
</label>

<label>
  <input type="radio" name="jenis_kelamin" value="wanita"> Wanita
</label>

<label>
  <input type="radio" name="jenis_kelamin" value="tidak_disebutkan"> Tidak ingin disebutkan
</label>

Aturan Penting Radio Button

Atribut name harus sama untuk semua radio dalam satu grup — inilah yang membuat browser tahu bahwa mereka saling eksklusif (memilih satu otomatis membatalkan yang lain):

<!-- BENAR — name sama, hanya bisa pilih satu -->
<input type="radio" name="paket" value="basic">
<input type="radio" name="paket" value="pro">
<input type="radio" name="paket" value="enterprise">

<!-- SALAH — name berbeda, ketiganya bisa dipilih sekaligus -->
<input type="radio" name="paket1" value="basic">
<input type="radio" name="paket2" value="pro">
<input type="radio" name="paket3" value="enterprise">

Atribut value adalah data yang dikirim ke server saat form di-submit — bukan teks yang tampil di layar.

Atribut checked — Pilihan Default

Menentukan opsi yang sudah terpilih saat halaman pertama dibuka:

<label>
  <input type="radio" name="berlangganan" value="ya" checked> Ya, saya ingin berlangganan
</label>
<label>
  <input type="radio" name="berlangganan" value="tidak"> Tidak, terima kasih
</label>

Contoh Radio Button Lengkap — Pilih Paket

<style>
  .radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
  }

  .radio-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
  }

  .radio-card:has(input:checked) {
    border-color: #4a9eed;
    background-color: #f0f7ff;
  }

  .radio-card input {
    accent-color: #4a9eed;
    width: 18px;
    height: 18px;
  }

  .radio-info strong {
    display: block;
    font-size: 15px;
    color: #1e1e1e;
  }

  .radio-info span {
    font-size: 13px;
    color: #6b7280;
  }
</style>

<form action="/pilih-paket" method="POST">
  <h3>Pilih Paket Berlangganan</h3>

  <div class="radio-group">

    <label class="radio-card">
      <input type="radio" name="paket" value="basic" checked>
      <div class="radio-info">
        <strong>Basic — Rp 50.000/bulan</strong>
        <span>5GB storage, 1 pengguna, support email</span>
      </div>
    </label>

    <label class="radio-card">
      <input type="radio" name="paket" value="pro">
      <div class="radio-info">
        <strong>Pro — Rp 150.000/bulan</strong>
        <span>50GB storage, 5 pengguna, support prioritas</span>
      </div>
    </label>

    <label class="radio-card">
      <input type="radio" name="paket" value="enterprise">
      <div class="radio-info">
        <strong>Enterprise — Rp 500.000/bulan</strong>
        <span>Unlimited storage, pengguna tak terbatas, support 24/7</span>
      </div>
    </label>

  </div>

  <button type="submit">Lanjutkan Pembayaran</button>
</form>

Checkbox — Pilih Satu atau Lebih

Checkbox digunakan saat pengguna boleh memilih lebih dari satu opsi sekaligus — atau bahkan tidak memilih sama sekali.

<p>Pilih minat Anda:</p>

<label>
  <input type="checkbox" name="minat" value="html"> HTML
</label>

<label>
  <input type="checkbox" name="minat" value="css"> CSS
</label>

<label>
  <input type="checkbox" name="minat" value="javascript"> JavaScript
</label>

<label>
  <input type="checkbox" name="minat" value="python"> Python
</label>

Perbedaan Checkbox vs Radio

Aspek Radio Checkbox
Pilihan Hanya satu Satu atau lebih
Simbol Lingkaran ⊙ Kotak ☑
name Harus sama dalam grup Bisa sama atau berbeda
Contoh Jenis kelamin, metode bayar Hobi, preferensi, persetujuan

Checkbox Tunggal — Persetujuan

Checkbox juga sering digunakan sendiri untuk konfirmasi atau persetujuan:

<label>
  <input type="checkbox" name="setuju" value="ya" required>
  Saya menyetujui <a href="/syarat">syarat dan ketentuan</a> yang berlaku
</label>

<label>
  <input type="checkbox" name="newsletter" value="subscribe">
  Daftarkan saya untuk menerima newsletter bulanan
</label>

Atribut checked dan disabled pada Checkbox

<!-- Sudah tercentang saat halaman dibuka -->
<label>
  <input type="checkbox" name="newsletter" value="ya" checked>
  Terima newsletter (aktif secara default)
</label>

<!-- Tidak bisa diubah oleh pengguna -->
<label>
  <input type="checkbox" name="syarat" value="setuju" checked disabled>
  Syarat dasar (wajib disetujui)
</label>

Contoh Checkbox Lengkap — Filter Kategori

<style>
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
  }

  .checkbox-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    user-select: none;
  }

  .checkbox-chip:has(input:checked) {
    border-color: #4a9eed;
    background-color: #4a9eed;
    color: white;
  }

  .checkbox-chip input {
    display: none;   /* sembunyikan checkbox asli, gantikan dengan chip */
  }
</style>

<form action="/filter" method="GET">
  <h3>Filter Kategori Artikel</h3>

  <div class="checkbox-group">
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="html" checked>
      HTML
    </label>
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="css" checked>
      CSS
    </label>
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="javascript">
      JavaScript
    </label>
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="php">
      PHP
    </label>
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="python">
      Python
    </label>
    <label class="checkbox-chip">
      <input type="checkbox" name="kategori" value="database">
      Database
    </label>
  </div>

  <button type="submit">Terapkan Filter</button>
</form>

Select — Dropdown Pilihan

<select> digunakan untuk membuat menu dropdown — efisien saat pilihan terlalu banyak untuk ditampilkan sebagai radio/checkbox:

<label for="kota">Pilih Kota:</label>
<select id="kota" name="kota">
  <option value="">-- Pilih Kota --</option>
  <option value="jakarta">Jakarta</option>
  <option value="surabaya">Surabaya</option>
  <option value="bandung">Bandung</option>
  <option value="semarang">Semarang</option>
  <option value="yogyakarta">Yogyakarta</option>
</select>
  • <select> — pembungkus dropdown
  • <option> — setiap pilihan di dalam dropdown
  • value="" di option pertama — placeholder kosong agar pengguna wajib memilih

Atribut selected — Pilihan Default

<select name="bahasa">
  <option value="id" selected>Bahasa Indonesia</option>
  <option value="en">English</option>
  <option value="ja">日本語</option>
</select>

Atribut multiple — Pilih Lebih dari Satu

<label for="skill">Pilih skill Anda (tahan Ctrl untuk multi-pilih):</label>
<select id="skill" name="skill" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="php">PHP</option>
  <option value="python">Python</option>
</select>

size menentukan berapa baris yang tampil sekaligus tanpa scroll.

<optgroup> — Mengelompokkan Opsi

Untuk dropdown dengan banyak pilihan, gunakan <optgroup> untuk membuat kategori di dalam dropdown:

<label for="provinsi">Pilih Provinsi:</label>
<select id="provinsi" name="provinsi">
  <option value="">-- Pilih Provinsi --</option>

  <optgroup label="Pulau Jawa">
    <option value="dki">DKI Jakarta</option>
    <option value="jabar">Jawa Barat</option>
    <option value="jateng">Jawa Tengah</option>
    <option value="jatim">Jawa Timur</option>
    <option value="diy">DI Yogyakarta</option>
  </optgroup>

  <optgroup label="Pulau Sumatera">
    <option value="sumut">Sumatera Utara</option>
    <option value="sumbar">Sumatera Barat</option>
    <option value="riau">Riau</option>
    <option value="sumsel">Sumatera Selatan</option>
  </optgroup>

  <optgroup label="Pulau Kalimantan">
    <option value="kalbar">Kalimantan Barat</option>
    <option value="kaltim">Kalimantan Timur</option>
    <option value="kalsel">Kalimantan Selatan</option>
  </optgroup>
</select>

Hasilnya di dropdown:

-- Pilih Provinsi --
── Pulau Jawa ──────
   DKI Jakarta
   Jawa Barat
   Jawa Tengah
   Jawa Timur
   DI Yogyakarta
── Pulau Sumatera ──
   Sumatera Utara
   Sumatera Barat
   ...

Kapan Menggunakan yang Mana?

Pilih satu dari sedikit opsi (2-5)      →  Radio button
Pilih satu dari banyak opsi (6+)        →  Select dropdown
Pilih satu atau lebih opsi              →  Checkbox
Konfirmasi / persetujuan tunggal        →  Checkbox tunggal
Pilih banyak dari daftar panjang        →  Select dengan multiple

Form Lengkap — Kombinasi Radio, Checkbox & Select

<style>
  * { box-sizing: border-box; }

  body {
    font-family: sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 0 24px;
  }

  .form-card {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }

  h2 {
    margin: 0 0 24px;
    font-size: 22px;
    color: #1e1e1e;
  }

  .form-group {
    margin-bottom: 24px;
  }

  .form-group label.main-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    margin-bottom: 10px;
  }

  .options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
  }

  select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    background-color: white;
    cursor: pointer;
    outline: none;
  }

  select:focus {
    border-color: #4a9eed;
    box-shadow: 0 0 0 3px rgba(74,158,237,0.15);
  }

  .btn-submit {
    width: 100%;
    padding: 12px;
    background-color: #4a9eed;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-submit:hover {
    background-color: #2563eb;
  }
</style>

<div class="form-card">
  <h2>Formulir Pendaftaran Kursus</h2>

  <form action="/daftar-kursus" method="POST">

    <!-- SELECT -->
    <div class="form-group">
      <label class="main-label" for="kursus">Pilih Kursus</label>
      <select id="kursus" name="kursus" required>
        <option value="">-- Pilih Kursus --</option>
        <optgroup label="Web Development">
          <option value="html-css">HTML & CSS Dasar</option>
          <option value="javascript">JavaScript Fundamentals</option>
          <option value="react">React.js</option>
        </optgroup>
        <optgroup label="Mobile Development">
          <option value="flutter">Flutter</option>
          <option value="react-native">React Native</option>
        </optgroup>
        <optgroup label="Back-end">
          <option value="nodejs">Node.js</option>
          <option value="laravel">Laravel</option>
        </optgroup>
      </select>
    </div>

    <!-- RADIO -->
    <div class="form-group">
      <label class="main-label">Metode Belajar</label>
      <div class="options">
        <label>
          <input type="radio" name="metode" value="online" checked>
          Online — belajar dari mana saja
        </label>
        <label>
          <input type="radio" name="metode" value="offline">
          Offline — tatap muka di kelas
        </label>
        <label>
          <input type="radio" name="metode" value="hybrid">
          Hybrid — kombinasi online dan offline
        </label>
      </div>
    </div>

    <!-- RADIO -->
    <div class="form-group">
      <label class="main-label">Jadwal Kelas</label>
      <div class="options">
        <label>
          <input type="radio" name="jadwal" value="pagi">
          Pagi (08.00 - 10.00)
        </label>
        <label>
          <input type="radio" name="jadwal" value="siang">
          Siang (13.00 - 15.00)
        </label>
        <label>
          <input type="radio" name="jadwal" value="malam" checked>
          Malam (19.00 - 21.00)
        </label>
      </div>
    </div>

    <!-- CHECKBOX -->
    <div class="form-group">
      <label class="main-label">Fasilitas Tambahan (pilih semua yang sesuai)</label>
      <div class="options">
        <label>
          <input type="checkbox" name="fasilitas" value="modul">
          Modul pembelajaran digital
        </label>
        <label>
          <input type="checkbox" name="fasilitas" value="mentor" checked>
          Sesi mentoring 1-on-1
        </label>
        <label>
          <input type="checkbox" name="fasilitas" value="sertifikat" checked>
          Sertifikat kelulusan
        </label>
        <label>
          <input type="checkbox" name="fasilitas" value="rekaman">
          Akses rekaman kelas
        </label>
      </div>
    </div>

    <!-- CHECKBOX PERSETUJUAN -->
    <div class="form-group">
      <label>
        <input type="checkbox" name="setuju" value="ya" required>
        Saya telah membaca dan menyetujui <a href="/syarat">syarat & ketentuan</a>
      </label>
    </div>

    <button type="submit" class="btn-submit">Daftar Kursus Sekarang</button>

  </form>
</div>

Ringkasan

Elemen Pilihan Simbol Cocok Untuk
<input type="radio"> Satu saja ⊙ Jenis kelamin, paket, metode
<input type="checkbox"> Satu atau lebih ☑ Hobi, filter, persetujuan
<select> Satu (atau lebih dengan multiple) ▼ Kota, provinsi, kategori panjang
<optgroup> — — Mengelompokkan opsi dropdown

💡 Tips: Pilih elemen yang paling intuitif untuk pengguna — bukan yang paling mudah dikode. Radio untuk pilihan eksklusif, checkbox untuk pilihan bebas, dan select untuk daftar yang panjang. UX yang baik dimulai dari pemilihan elemen form yang tepat. 🎯

Sebelumnya Selanjutnya

Informasi Kursus

Kursus

HTML Dasar

Kategori

Form & Input

Durasi Pelajaran

20 menit

Pelajaran dalam Kategori Ini

  1. Tag Form & Action
  2. Radio, Checkbox & Select
  3. Input Text, Email, Password
  4. Button & Submit