Radio - Frameworks

Radios allow users to select a single option from a list.

AndroidreleasediOSreleasedReactreleasedVuereleased

Android

AndroidiOSReactVue

Syntax

fun WarpRadio(
    modifier: Modifier = Modifier,
    label: String,
    selected: Boolean = false,
    isError: Boolean = false,
    enabled: Boolean = true,
    extraText: String? = null,
    slot: @Composable (() -> Unit)? = null,
    onClick: (() -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
)

fun WarpRadioGroup(
    modifier: Modifier = Modifier,
    orientation: Orientation = Orientation.Vertical,
    title: String? = null,
    options: List<String>,
    selectedOption: String? = null,
    helpText: String? = null,
    enabled: Boolean = true,
    isError: Boolean = false,
    onOptionSelected: (String) -> Unit
)

There is support for standalone radio component as well as a radio group.

var selected by remember { mutableStateOf(false) }

WarpRadio(
    label = "Radio with extraText",
    selected = selected,
    enabled = true,
    extraText = "(Extra)",
    onClick = { selected = !selected }
    )


val radioOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }

WarpRadioGroup(
    title = title,
    options = radioOptions,
    orientation = orientation,
    selectedOption = selectedOption,
    enabled = enabled,
    isError = isError,
    onOptionSelected = onOptionSelected,
    helpText = "Required"
    )

There is support for optional title and help text when using the radio group. Supported orientations are Orientation.Vertical and Orientation.Horizontal. Vertical is the default.

Legacy support

To support layouts still written in xml the Radio can be used as a custom view. Adding a composable slot must be done programmatically. Horizontal or vertical group is not supported.

var slot: @Composable (() -> Unit)? = null
    set(value) {
        field = value
        disposeComposition()
    }

fun setOnClickListener(onClick: OnClickListener?)

<com.schibsted.nmp.warp.components.legacy.WarpRadioView
    android:id="@+id/radio"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/space2"
    app:radioSelected="false"
    app:radioIsError="false"
    app:radioExtraText="Extra"
    app:radioEnabled="true"
    app:radioLabel="Radio button" />

Parameters Radio

Required props

Name	Type	Default	Description
label	String		The text to be displayed next to the radio

Optional Props

Name	Type	Default	Description
modifier	Modifier	Modifier	Sets the modifier for the radio
selected	boolean	false	Whether the radio is selected or not
isError	boolean	false	Shows the radio in error state if true
enabled	boolean	true	Whether the radio is enabled or not
extraText	String?	null	The optional text to be displayed next to the label
slot	@Composable (() -> Uni)?	null	The composable that will be displayed next to the label or extraText if provided
onClick	() -> Unit	null	The lambda to be invoked when clicked.
interactionSource	MutableInteractionSource	MutableInteractionSource	MutableInteractionSource represents a stream of Interactions corresponding to events emitted by a component

Parameters Radio Group

Required props

Name	Type	Default	Description
options	List		The list of texts to be displayed next to the radio buttons
onOptionSelected	(String) -> Unit		The lambda to be invoked when clicked on a radio.

Optional Props

Name	Type	Default	Description
modifier	Modifier	Modifier	Sets the modifier for the radio group
orientation	Orientation.Vertical Orientation.Horizontal	Orientation.Vertical	Sets the orientation for the radio group. Class is found in the androidx.compose.foundation.gestures package
title	String	null	The title to be displayed on top of the radio group
selectedOption	String	null	The selected option in the radio group
helpText	String	null	The text displayed below the radio group
enabled	boolean	true	Whether the radio group is enabled or not
isError	boolean	false	Shows the radio group in error state if true

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system