RadioButtons in Android using Jetpack Compose

Last Updated : 28 Feb, 2025

RadioButtons are used to select only a specific option from the list of several options. Radio buttons are used in many places for selecting only one option from the list of two or more options. In this article, we will take a look at the implementation of this Radio button in Android using Jetpack Compose.

Important Attributes of Radio Button

Attribute	Descriptions
selected	this attribute is used to make a radio button selected.
onClick	this is used when our radio button is clicked.
modifier	to add padding to our radio buttons.
enabled	used to make the RadioButton is enabled, allowing it to be clickable.
colors	used for customizing colors in RadioButton
interactionSource	uses a default MutableInteractionSource to handle interaction states.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio, please refer to How to Create a new Project in Android Studio with Jetpack Compose.

Step 2: Working with the MainActivity.kt file

Navigate to the app > java > {package-name} > MainActivity.kt file. Inside that file add the below code to it.

Comments are added inside the code to understand the code in more detail.

MainActivity.kt:

package com.geeksforgeeks.demo

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            Column {
                SimpleRadioButtonComponent()
            }
        }
    }
}

@Composable
fun SimpleRadioButtonComponent() {
    val radioOptions = listOf("DSA", "Java", "C++")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[2]) }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        // we are displaying all our
        // radio buttons in column.
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) }
                    )
                    .padding(horizontal = 16.dp),
                horizontalArrangement = Arrangement.Start,
                verticalAlignment = Alignment.CenterVertically
            ) {
                val context = LocalContext.current

                // below line is used to
                // generate radio button
                RadioButton(
                    // inside this method we are
                    // adding selected with a option.
                    selected = (text == selectedOption),

                    onClick = {
                        onOptionSelected(text)
                        Toast.makeText(context, text, Toast.LENGTH_SHORT).show()
                    },
                    modifier = Modifier.padding(8.dp),

                    // below line is used to make the RadioButton
                    // is enabled, allowing it to be clickable
                    enabled = true,

                    // below line is used for customizing colors in RadioButton
                    colors = RadioButtonDefaults.colors(
                        Color.Green,
                        Color.DarkGray
                    ),

                    // below line is uses a default MutableInteractionSource
                    // to handle interaction states
                    interactionSource = remember { MutableInteractionSource() }
                )

                // below line is used to add
                // text to our radio buttons
                Text(
                    text = text,
                    modifier = Modifier.padding(start = 16.dp),
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}