Radio Button

Radio Button menampilkan sekumpulan pilihan di mana pengguna hanya dapat memilih satu opsi dari beberapa alternatif yang tersedia. Berbeda dengan checkbox, komponen ini bersifat mutually exclusive, artinya memilih satu opsi akan otomatis membatalkan pilihan lainnya dalam grup yang sama.

Penggunaan

Gunakan Radio Button ketika pengguna perlu memilih satu dari beberapa opsi yang saling eksklusif. Pastikan semua opsi ditampilkan secara bersamaan di layar agar mudah dipahami, dan gunakan komponen ini untuk pilihan yang bersifat langsung tanpa perlu konfirmasi tambahan.

Anatomi

Varian

Default

Menunjukkan opsi belum dipilih. Label dapat diklik untuk memilih opsi ini.

Focused

Menunjukkan komponen sedang dalam keadaan fokus atau siap menerima interaksi.

Selected

Menunjukkan status aktif ketika pengguna telah memilih opsi tersebut.

Cara Penggunaan yang Disarankan

Leading Icon

Radio diletakkan di sebelah kiri label.

•Umum digunakan pada formulir vertikal atau daftar sederhana.
•Membantu pengguna memindai pilihan dengan cepat karena posisi ikon radio mendahului teks.

Gunakan saat:

•Daftar opsi disusun vertikal.
•Label berupa teks sederhana tanpa elemen tambahan.

Trail Icon

Radio diletakkan di sebelah kanan label.

•Digunakan ketika label merupakan komponen interaktif penuh (misalnya card, list item, atau row).
•Membantu menjaga keselarasan visual ketika sisi kiri label sudah terisi ikon, avatar, atau konten lain.

Gunakan saat:

•Label berupa blok interaktif.
•Diperlukan ruang lebih di kiri tanpa mengganggu konten utama.

✅ Disarankan

Gunakan radio button hanya ketika pengguna perlu memilih satu opsi dari beberapa pilihan yang tersedia.

❌ Dihindari

Jangan gunakan radio button jika pengguna dapat memilih lebih dari satu opsi secara bersamaan.

Penerapan

Kuis Pemahaman Aplikasi INAgov

Pada contoh ini, Radio Button digunakan untuk membantu pengguna memilih satu jawaban dari beberapa opsi dalam kuis pemahaman terkait aplikasi INAgov.

Komponen ini memastikan hanya satu pilihan yang dapat dipilih dalam satu waktu, sesuai dengan kebutuhan interaksi kuis yang bersifat tunggal (single selection).

Spesifikasi