Compose Playground

RadioButton

A component that allows users to select one option from a set.

Properties
Preview
Generated Code
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun MyRadioGroup() {
    val options = listOf("Option 1", "Option 2", "Option 3")
    var selectedOption by remember { mutableStateOf(options[0]) }

    Column {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.selectable(
                selected = (selectedOption == "Option 1"),
                onClick = { selectedOption = "Option 1" }
            )
        ) {
            RadioButton(
                selected = (selectedOption == "Option 1"),
                onClick = null, // null recommended for accessibility with selectable
                enabled = true
            )
            Text(
                text = "Option 1",
                modifier = Modifier.padding(start = 8.dp)
            )
        }
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.selectable(
                selected = (selectedOption == "Option 2"),
                onClick = { selectedOption = "Option 2" }
            )
        ) {
            RadioButton(
                selected = (selectedOption == "Option 2"),
                onClick = null, // null recommended for accessibility with selectable
                enabled = true
            )
            Text(
                text = "Option 2",
                modifier = Modifier.padding(start = 8.dp)
            )
        }
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.selectable(
                selected = (selectedOption == "Option 3"),
                onClick = { selectedOption = "Option 3" }
            )
        ) {
            RadioButton(
                selected = (selectedOption == "Option 3"),
                onClick = null, // null recommended for accessibility with selectable
                enabled = true
            )
            Text(
                text = "Option 3",
                modifier = Modifier.padding(start = 8.dp)
            )
        }
    }
}