Design/net.ikea.skapa.ui.components/RadioButtonGroup

RadioButtonGroup

@Composable
fun <T> RadioButtonGroup(items: List<RadioGroupItem<T>>, selected: T?, modifier: Modifier = Modifier, groupName: String? = null, variant: RadioButtonVariant = Emphasised, onItemSelected: (item: RadioGroupItem<T>) -> Unit)

Radio Button Group component allows RadioButtons to be combined together with a Text inside a Column to achieve group-like behaviour. We recommend using no more than five radio buttons in a layout.

Parameters

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")
)

SkapaThemeM3(darkTheme = 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
}