RadioButton
RadioButton is a basic selection component in COUI, supporting two states: selected and unselected. When selected, it displays a filled disc with a center dot; when unselected, it shows an outline ring. It is suitable for single selection scenarios where only one option can be chosen from a group.
Import
kotlin
import io.github.suqi8.coui.kmp.basic.RadioButtonBasic Usage
The RadioButton component is typically used within a mutually exclusive group:
kotlin
var selectedIndex by remember { mutableIntStateOf(0) }
Column {
RadioButtonPreference(
title = "Option A",
selected = selectedIndex == 0,
onClick = { selectedIndex = 0 }
)
RadioButtonPreference(
title = "Option B",
selected = selectedIndex == 1,
onClick = { selectedIndex = 1 }
)
}Component States
Disabled State
kotlin
RadioButton(
selected = true,
onClick = null,
enabled = false
)Properties
RadioButton Properties
| Property Name | Type | Description | Default Value | Required |
|---|---|---|---|---|
| selected | Boolean | Whether the RadioButton is currently selected | - | Yes |
| onClick | (() -> Unit)? | Callback when the RadioButton is clicked; null = non-interactive | - | Yes |
| modifier | Modifier | Modifier applied to the RadioButton | Modifier | No |
| colors | RadioButtonColors | Color configuration for the RadioButton | RadioButtonDefaults.radioButtonColors() | No |
| enabled | Boolean | Whether the RadioButton is interactive | true | No |
RadioButtonDefaults Object
The RadioButtonDefaults object provides default color configurations for the RadioButton component.
Methods
| Method Name | Type | Description |
|---|---|---|
| radioButtonColors() | RadioButtonColors | Creates default color config for radio button |
RadioButtonColors Class
| Property Name | Type | Description |
|---|---|---|
| selectedColor | Color | Disc fill color when selected |
| disabledSelectedColor | Color | Disc fill color when disabled and selected |
| unselectedColor | Color | Outline ring color when unselected |
| disabledUnselectedColor | Color | Outline ring color when disabled and unselected |
| centerColor | Color | Center dot color when selected |
| disabledCenterColor | Color | Center dot color when disabled and selected |
Advanced Usage
Custom Colors
kotlin
var selected by remember { mutableStateOf(false) }
RadioButton(
selected = selected,
onClick = { selected = !selected },
colors = RadioButtonDefaults.radioButtonColors(
selectedColor = Color.Red
)
)Using in Lists
kotlin
val options = listOf("Option A", "Option B", "Option C")
var selectedIndex by remember { mutableIntStateOf(0) }
options.forEachIndexed { index, option ->
Card(
modifier = Modifier.padding(bottom = 12.dp)
) {
RadioButtonPreference(
title = option,
selected = selectedIndex == index,
onClick = { selectedIndex = index }
)
}
}
