OudsRadioButtonItem
Radio buttons are input controls that allow users to select a single option from a set of mutually exclusive choices.
The radio button item variant can function as a simple input with a label in a selection group, or it can be combined with optional elements such as extra label, description, a divider, or an icon, allowing it to suit various use cases.
The OUDS radio button item layout contains an OudsRadioButton. By clicking on the radio button item, the user changes the selected state of its radio button.
Design
| Guidelines | unified-design-system.orange.com |
| Version | 1.4.0 |
Parameters
Controls the selected state of the radio button.
The main label of the radio button item.
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 applied to the layout of the radio button item.
Optional strong accompanying label for the main label. It is displayed between the label and the description.
Optional text displayed below the label and the extraLabel.
Optional icon displayed in the item. By default, it has a trailing position. If reversed is set to true, it is displayed as a leading element.
Controls the horizontal layout of the item. When true, the item is designed to span the full width of the screen or container. When false, it is adapted for use within constrained layouts or containers with their own padding. Defaults to true.
Controls the display of a divider at the bottom of the radio button item.
When set to true, the radio button item, if selected, is outlined to stand out and draw the user's attention.
When false, the radio button has a leading position and the optional icon has a trailing position. Otherwise, it is reversed.
Controls the enabled state of the radio button item. When false, the radio button, the texts and the optional icon are disabled, and the item will not be clickable.
Controls the read-only state of the radio button item. When true the item's radio button is disabled but the texts 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.
Optional OudsError to indicate that the radio button item should appear in error state, null otherwise.
When true, the item width is constrained to a maximum value defined by the design system. When false, no specific width constraint is applied, allowing the component to size itself or follow external modifiers. Defaults to false.
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.
See also
If you want to use a standalone radio button.
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 androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsRadioButtonItem
import com.orange.ouds.core.utilities.OudsPreview
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,
label = gender,
onClick = { selectedGender = gender },
divider = true
)
}
}
//sampleEnd
}