Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - RadioButton

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

RadioButton pada Jetpack Compose

RadioButton adalah sebuah komponen UI di Jetpack Compose yang digunakan untuk memungkinkan pengguna memilih satu opsi dari beberapa opsi yang tersedia. RadioButton biasanya digunakan dalam grup di mana hanya satu opsi yang dapat dipilih pada satu waktu.

Kapan Harus Menggunakan RadioButton:

Pilihan Eksklusif: RadioButton digunakan ketika Anda memiliki beberapa opsi yang saling eksklusif, di mana hanya satu opsi yang dapat dipilih oleh pengguna pada satu waktu.
Grup Opsi: RadioButton biasanya digunakan dalam grup yang berisi beberapa RadioButton. Jika salah satu RadioButton dipilih, opsi lainnya akan otomatis tidak terpilih.

RadioButton dapat digunakan untuk memfasilitasi input pengguna yang jelas dan intuitif, terutama dalam formulir atau pengaturan aplikasi di mana pengguna diberi pilihan yang harus mereka pilih satu dari beberapa opsi yang tersedia.

Parameter/Atribut

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

Parameter RadioButton:

selected: Boolean

Menentukan apakah RadioButton ini dipilih atau tidak. Jika true, RadioButton akan ditampilkan sebagai dipilih (tombol bulat di dalamnya akan ditandai). Jika false, RadioButton akan ditampilkan sebagai tidak dipilih.

onClick: (() -> Unit)?

Sebuah lambda yang akan dipanggil ketika pengguna mengklik RadioButton. Parameter ini opsional. Jika diberikan, RadioButton akan merespons klik dari pengguna.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari RadioButton. Anda bisa menggunakan modifier ini untuk mengatur hal-hal seperti padding, margin, ukuran, warna latar belakang, dan tata letak dari RadioButton.

enabled: Boolean = true

Menentukan apakah RadioButton ini dapat diinteraksi atau tidak. Jika true, RadioButton dapat diklik oleh pengguna. Jika false, RadioButton akan terlihat tetapi tidak dapat diubah oleh pengguna.

colors: RadioButtonColors = RadioButtonDefaults.colors()

Warna-warna yang digunakan untuk menyesuaikan tampilan RadioButton dalam berbagai kondisi seperti default, checked (terpilih), unchecked (tidak terpilih), dan disabled (non-aktif).

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Objek untuk menangani interaksi pengguna seperti sentuhan, klik, dan hover. Anda bisa menggunakan nilai bawaan MutableInteractionSource() atau menyediakan objek interaksi kustom.

Contoh

@Composable
fun DemoRadioButton(modifier: Modifier = Modifier) {
    Row {
        RadioButton(selected = true, onClick = {

        })
        RadioButton(selected = false, onClick = {

        })
    }
}