RadioButtonGroup
fun <T> RadioButtonGroup(items: List<RadioGroupItem<T>>, selected: T?, modifier: Modifier = Modifier, groupName: String? = null, variant: RadioButtonVariant = RadioButtonVariant.Emphasised, onItemSelected: (item: RadioGroupItem<T>) -> Unit)(source)
Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
Parameters
T
The type of the key used to uniquely identify each radio button item.
items
A list of RadioGroupItem items to be displayed in the same selectable group.
selected
A unique id of the radio button to select in this group.
modifier
Modifier to be applied to the radio button layout.
groupName
An informative an descriptive name to be displayed above the radio buttons.
variant
RadioButtonVariant that will be used to resolve the color used for this RadioButton in different states. The default value is RadioButtonVariant.Emphasised.
onItemSelected
callback to be invoked when a RadioButton is selected.
See also
Samples
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.R
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.IconPosition
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.RadioButtonGroup
import net.ikea.skapa.ui.components.RadioButtonVariant
import net.ikea.skapa.ui.components.RadioGroupItem
fun main() {
//sampleStart
var selected by remember { mutableStateOf<String?>(null) }
var loadingState by remember { mutableStateOf(false) }
val items = listOf(
RadioGroupItem(key = "a", "Africa"),
RadioGroupItem(key = "b", "Asia"),
RadioGroupItem(key = "c", "European Union"),
RadioGroupItem(key = "d", "North America"),
RadioGroupItem(key = "e", "South America"),
RadioGroupItem(key = "f", "United Kingdom")
)
SkapaTheme2(isSystemInDarkTheme()) {
Column(
modifier = Modifier
.padding(SkapaSpacing.space125)
.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
) {
RadioButtonGroup(
items,
selected = selected,
modifier = Modifier.fillMaxWidth(),
groupName = "Please select your region",
variant = RadioButtonVariant.Subtle
) {
selected = it.key
}
Button(
modifier = Modifier.fillMaxWidth(),
label = "Continue",
loading = loadingState,
iconId = R.drawable.ic_jumbobutton_arrow,
iconPosition = IconPosition.Horizontal.Trailing
) {
loadingState = !loadingState
}
}
}
//sampleEnd
}