Radio Button

The RadioButton component allows users to select one option from a set of mutually exclusive choices. It supports custom colors and can be grouped with other radio buttons for single selection.

Usage

Basic Radio Button

RadioButton(
    checked = isSelected,
    onCheckedChange = { isSelected = it }
)

Radio Button Group

val options = listOf("Option 1", "Option 2", "Option 3")
var selectedOption by remember { mutableIntStateOf(0) }

Column {
    options.forEachIndexed { index, option ->
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                checked = selectedOption == index,
                onCheckedChange = { selectedOption = index }
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(text = option)
        }
    }
}

Radio Button with Custom Colors

RadioButton(
    checked = isSelected,
    onCheckedChange = { isSelected = it },
    colors = RadioButtonDefaults.colors(
        contentColor = Color.Blue,
        checkedContentColor = Color.Blue
    )
)

Disabled Radio Button

RadioButton(
    checked = true,
    onCheckedChange = null,
    colors = RadioButtonDefaults.colors(
        disabledContentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f)
    )
)

Radio Button Group with Different Styles

val styleOptions = listOf("Small", "Medium", "Large")
val textStyles = listOf(
    MaterialTheme.typography.bodySmall,
    MaterialTheme.typography.bodyMedium,
    MaterialTheme.typography.bodyLarge
)
var selectedStyle by remember { mutableIntStateOf(0) }

Column {
    styleOptions.forEachIndexed { index, option ->
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            RadioButton(
                checked = selectedStyle == index,
                onCheckedChange = { selectedStyle = index }
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text(
                text = option,
                style = textStyles[index]
            )
        }
    }
}