Radio Buttons in Jetpack Compose

What is Radio Button?

Radio Buttons are just like buttons but it is used in different way. If we need a group of buttons allow us to select one of them, In that case Radio Button may be used.

Suppose that we are creating MCQ questions with four corresponding options for that questions in that case Radio Buttons are very useful material design components.

As In Radio Button we can only select one option so if you need to choose more than one option use Checkbox that let the users to select multiple options.

Radio buttons are used in many Mobile Applications for selecting only one option from the list of two or more options. So, We can also use it allow users to select any one action in a list of actions.

If we think that the we need to see all available options side-by-side but If it's not necessary to show all options side-by-side, we can use a spinner in place of Radio Buttons.

In this tutorial, we will learn to create radio buttons.

Steps :

Create a New Project and select Empty Activity In my case, application name is Coding Bihar you can use any other name.

MainActivity

Copy this code →

package com.example.codingbihar
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.ui.Modifier
import com.example.codingbihar.ui.theme.CodingBiharTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CodingBiharTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    RadioButton()
                   }
            }
        }
    }
}

Create a new Kotlin file for Radio Button and named it as RadioButton

RadioButton

Copy this code →

package com.example.codingbihar

import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.RadioButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

@Composable
fun RadioButton() {
    val radioOptions = listOf("RadioButton 1", "RadioButton 2", "RadioButton 3","RadioButton 4")
    // mutableStateOf("") → Not any RadioButton is selected by default
    val (selectedOption, onOptionSelected) = remember { mutableStateOf("") }
    
    Column(Modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected =true,
                       // selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                val context = LocalContext.current.applicationContext
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = {
                        onOptionSelected(text)
                        Toast.makeText(context, text, Toast.LENGTH_SHORT).show()
                    }
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}

OUTPUT :

*******************End***************************