Radio

Komponen Radio merupakan elemen antarmuka pengguna yang memungkinkan pengguna memilih satu opsi dari sekelompok pilihan dengan mekanisme seleksi tunggal.


Anatomi

Anatomy

Komponen Radio terdiri dari beberapa elemen kunci yang bekerja secara harmonis untuk menciptakan pengalaman pemilihan yang intuitif. Inti dari komponen ini adalah lingkaran kecil yang dapat dipilih, yang berubah status dari tidak aktif menjadi aktif ketika dipilih.

Jenis dan variasi

Radio

Radio yang dapat berdiri sendiri sebagai elemen atom, memberikan fleksibilitas maksimal dalam desain.

container

Radio with label

Umumnya digunakan dalam konteks formulir, memberikan konteks dan kejelasan tambahan pada pilihan yang tersedia.

Behaviors

Interaksi dengan komponen Radio dirancang untuk menjadi intuitif dan mudah diakses. Navigasi menggunakan keyboard memungkinkan pengguna bergerak di antara opsi tanpa memerlukan mouse. Ketika Radio mendapatkan fokus keyboard, komponen akan menampilkan cincin biru yang jelas, memberikan indikasi visual yang kuat tentang elemen mana yang saat ini aktif.

focus

Hanya satu aktif dalam satu inputan

Batasan kunci dalam interaksi Radio adalah sifat eksklusifnya. Hanya satu Radio dalam satu kelompok yang dapat dipilih pada satu waktu. Pengguna dapat mengaktifkan seleksi dengan mengklik Radio itu sendiri atau labelnya, menciptakan mekanisme interaksi yang fleksibel.

Panduan penggunaan

Jangan gunakan Radio ketika hanya ada satu opsi pilihan

Komponen ini paling efektif digunakan dalam skenario dengan pilihan eksklusif dan opsi terbatas. Dalam merancang formulir atau antarmuka pemilihan, disarankan untuk membatasi jumlah opsi Radio menjadi kurang dari lima untuk menghindari kompleksitas berlebihan.

container

Selalu gunakan label sebelum daftar pilihan yang secara jelas menjelaskan apa opsi yang ditampilkan

Label memainkan peran krusial dalam keberhasilan komponen Radio. Label harus ditempatkan sebelum daftar pilihan dan secara jelas menjelaskan konteks pilihan. Fleksibilitas dalam penempatan label memungkinkan desainer untuk beradaptasi dengan berbagai tata letak. Label dapat ditempatkan di atas atau di samping Radio button.