OudsRadioButtonItem

fun OudsRadioButtonItem(selected: Boolean, text: String, onClick: () -> Unit?, modifier: Modifier = Modifier, additionalText: String? = null, helperText: String? = null, icon: OudsControlItem.Icon? = null, divider: Boolean = false, outlined: Boolean = false, inverted: Boolean = false, enabled: Boolean = true, readOnly: Boolean = false, error: Boolean = false, interactionSource: MutableInteractionSource? = null)

OUDS Radio button design guidelines

An OUDS radio button item is a layout containing an OudsRadioButton, an associated text and several other optional elements. It can be used in a list as a list item. By clicking on a radio button item, the user changes the selected state of its radio button.

If you want to use a standalone radio button please use com.orange.ouds.core.component.OudsRadioButton.

Parameters

selected

Controls selected state of the radio button.

text

The main text of the radio button item.

onClick

Callback invoked on radio button click. If null, then this radio button will not be interactable, unless something else handles its input events and updates its state.

modifier

Modifier applied to the layout of the radio button item.

additionalText

Optional strong accompanying text for the main label. It is displayed between the text and the helperText.

helperText

Optional text displayed below the text and the additionalText.

icon

Optional icon displayed in the item. By default, it has a trailing position. If inverted is set to true, it is displayed as a leading element.

divider

Controls the display of a divider at the bottom of the radio button item.

outlined

When set to true, the radio button item, if selected, is outlined to stand out and draw the user's attention.

inverted

When false, the radio button has a leading position and the optional icon has a trailing position. It is inverted otherwise.

enabled

Controls the enabled state of the radio button item. When false, the radio button, the text and the optional icon are disabled, and the item will not be clickable.

readOnly

Controls the read only state of the radio button item. When true the item's radio button is disabled but the text and the icon remain in enabled color. Note that if it is set to true and enabled is set to false, the radio button item will be displayed in disabled state.

error

Controls the error state of the radio button item.

interactionSource

Optional hoisted MutableInteractionSource for observing and emitting Interactions for the item's radio button. Note that if null is provided, interactions will still happen internally.

Samples

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.orange.ouds.core.component.OudsRadioButtonItem

fun main() { 
   //sampleStart 
   val genders = listOf("Female", "Male", "Other")
var selectedGender by rememberSaveable { mutableStateOf(genders.first()) }

Column(modifier = Modifier.selectableGroup()) {
    genders.forEach { gender ->
        OudsRadioButtonItem(
            selected = gender == selectedGender,
            text = gender,
            onClick = { selectedGender = gender },
            divider = true
        )
    }
} 
   //sampleEnd
}