A radio button is a UI component that allows users to choose a single option from a list of options. In this Jetpack Compose tutorial, let’s learn how to add radio buttons.
RadioButton in compose can help you to create radio buttons. The following code is of three radio buttons derived from a List. The user can select only one of them. State management is utilized to make the radio button properly.
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
RadioButtonExample()
}
}
}
}
}
@Composable
fun RadioButtonExample() {
val options = listOf("Male", "Female", "Other")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(options[0]) }
Column(Modifier.selectableGroup()) {
options.forEach { text ->
Row(
Modifier
.fillMaxWidth()
.selectable(
selected = (text == selectedOption),
onClick = { onOptionSelected(text) },
role = Role.RadioButton
)
.padding(8.dp),
) {
RadioButton(
selected = (text == selectedOption),
onClick = null // null recommended for accessibility with screenreaders
)
Text(
text = text,
modifier = Modifier.padding(start = 8.dp)
)
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
RadioButtonExample()
}
}
We use Row to show both the radio button and the text on a row. The selectedOption variable holds the selected radio button value.
Following is the output.

That’s how you add radio buttons in Jetpack Compose.