RadioButtonGroup

fun <T> RadioButtonGroup(items: List<RadioGroupItem<T>>, selected: T?, modifier: Modifier = Modifier, groupName: String? = null, variant: RadioButtonVariant = RadioButtonVariant.Emphasised, required: RequiredLabel? = null, 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

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.

required

Whether the a radio button selection is required. Will add a leading asterisk (*) and requires a contentDescription.

onItemSelected

callback to be invoked when a RadioButton is selected.

Type Parameters

T

The type of the key used to uniquely identify each radio button item.

See also

Samples

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
        }
    }
}