Back

Single Menu

02 Jun 2025

Penjelasan tentang Single Menu

Panduan Lengkap tentang Single Menu

1. Pengertian Single Menu

Single Menu adalah komponen dalam antarmuka pengguna yang memungkinkan pengguna untuk memilih satu atau beberapa opsi dari sekumpulan pilihan yang telah disediakan. Umumnya digunakan dalam form, aplikasi desktop, web, atau mobile.

---

2. Komponen Single Menu

a. Radio Button

• Pengertian: Radio button adalah komponen yang memungkinkan pengguna memilih satu opsi dari sekumpulan opsi yang saling eksklusif.

• Fungsi:

  • Memastikan hanya satu pilihan yang dapat dipilih dalam satu grup.
  • Contoh: pemilihan jenis kelamin, metode pembayaran.

• Contoh Penggunaan:

  <p>Jenis Kelamin:</p>
  <input type="radio" id="laki" name="gender" value="Laki-laki">
  <label for="laki">Laki-laki</label>
  <input type="radio" id="perempuan" name="gender" value="Perempuan">
  <label for="perempuan">Perempuan</label>
  

---

b. Button Choice (Toggle Button)

• Pengertian: Button choice adalah tombol yang berfungsi sebagai switch atau toggle (on/off).

• Fungsi:

  • Mengaktifkan atau menonaktifkan suatu fitur.
  • Menyediakan interaksi yang lebih visual.

• Contoh Penggunaan:

  <button type="button" onclick="alert('Tombol Ditekan')">Aktifkan Fitur</button>
  

  Atau toggle button:

  <button class="toggle-button">On/Off</button>
  

---

c. Check Box

• Pengertian: Check box memungkinkan pengguna memilih lebih dari satu opsi.

• Fungsi:

  • Memungkinkan pengguna memilih beberapa opsi sekaligus.
  • Cocok untuk pilihan ganda seperti hobi atau fitur tambahan.

• Contoh Penggunaan:

  <p>Hobi:</p>
  <input type="checkbox" id="membaca" name="hobi" value="Membaca">
  <label for="membaca">Membaca</label>
  <input type="checkbox" id="menulis" name="hobi" value="Menulis">
  <label for="menulis">Menulis</label>
  

---

d. Combo Box (Drop Down List)

• Pengertian: Combo box atau drop-down list memungkinkan pengguna memilih satu opsi dari daftar pilihan.

• Fungsi:

  • Menghemat ruang pada antarmuka.
  • Menyediakan pilihan yang panjang tanpa memenuhi layar.

• Contoh Penggunaan:

  <label for="kota">Pilih Kota:</label>
  <select id="kota" name="kota">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="surabaya">Surabaya</option>
  </select>
  

---

3. Perbandingan Singkat

Komponen	Pilihan Tunggal	Pilihan Ganda	Visual
Radio Button	✅	❌	Bulat
Check Box	❌	✅	Kotak
Combo Box	✅	❌	List
Button Choice	Biasanya tunggal	Bisa ganda	Tombol

---

4. Kesimpulan

Radio Button: Pilihan tunggal dalam satu grup Button Choice: Toggle fitur on/off Check Box: Pilihan ganda dalam satu grup Combo Box: Pilihan tunggal dalam daftar drop-down