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

RadioButton

@Composable
fun RadioButton(selected: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: RadioButtonVariant = Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, onClick: () -> Unit?)

Radio Button component is a control that allows a single selection of a list of mutually exclusive options. It's built on top of androidx.compose.material.RadioButton and comes with predefined appearance based on Skapa design and guidelines.

Radio buttons should be associated with a label. If a radio button is used without one, it must strongly connect to another element that represents the value being selected.

Parameters

selected

boolean state for this button: either it is selected or not

modifier

Modifier to be applied to the radio button layout

enabled

Controls the enabled state of the RadioButton. When false, this button will not be selectable and appears in the disabled ui state

variant

RadioButtonVariant that will be used to resolve the color used for this RadioButton in different states. The default value is RadioButtonVariant.Emphasised.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this RadioButton. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this RadioButton in different Interactions.

onClick

callback to be invoked when the RadioButton is being clicked. Nullable. If null, then this is passive and relies entirely on a higher-level component to control the "selected" state.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.Text
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.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant

fun main() { 
   //sampleStart 
   var selected by remember { mutableIntStateOf(0) }
var loadingState by remember { mutableStateOf(false) }
// Below is an an example of a list using Skapa Radio Buttons in the form of a simple region selection form.
SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        Text(
            text = "Please select your region",
            style = SkapaTheme.typography2.headingM
        )
        Column(
            // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior.
            Modifier.selectableGroup()
        ) {
            // Radio buttons should be associated with a label. If a radio button is used without one, it must strongly connect to another
            // element that represents the value being selected.
            // If using the raw variant without a label, keep in mind that it will not pass Accessibility for neither Talkback nor touch area
            // size. Handle accessibility requirements manually i.e. with Modifier.semantics { contentDescription = "Localized Description" }
            RadioButton(label = "Africa", variant = RadioButtonVariant.Subtle, selected = selected == 0) { selected = 0 }
            RadioButton(label = "Asia", variant = RadioButtonVariant.Subtle, selected = selected == 1) { selected = 1 }
            RadioButton(label = "European Union", variant = RadioButtonVariant.Subtle, selected = selected == 2) { selected = 2 }
            RadioButton(label = "North America", variant = RadioButtonVariant.Subtle, selected = selected == 3) { selected = 3 }
            RadioButton(label = "South America", variant = RadioButtonVariant.Subtle, selected = selected == 4) { selected = 4 }
            RadioButton(label = "United Kingdom", variant = RadioButtonVariant.Subtle, selected = selected == 5) { selected = 5 }
        }
        Button(
            modifier = Modifier
                .fillMaxWidth(),
            label = "Continue",
            loading = loadingState,
            iconId = R.drawable.ic_jumbobutton_arrow,
            iconPosition = IconPosition.Horizontal.Trailing
        ) {
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}
@Composable
fun RadioButton(label: CharSequence, selected: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: RadioButtonVariant = Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, caption: String? = null, onClick: () -> Unit?)
@Composable
fun RadioButton(label: AnnotatedString, selected: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: RadioButtonVariant = Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, caption: String? = null, onClick: () -> Unit?)

Radio Button component is a control that allows a single selection of a list of mutually exclusive options. It's built on top of androidx.compose.material.RadioButton and comes with predefined appearance based on Skapa design and guidelines.

Radio buttons should be associated with a label. If a radio button is used without one, it must strongly connect to another element that represents the value being selected.

Note: This component is the raw version and will not pass Accessibility for neither Talkback nor touch area size. Either use the RadioButton with provided label or handle Accessibility requirements manually.

Parameters

label

The text to be displayed together with radio button component.

selected

boolean state for this button: either it is selected or not.

modifier

Modifier to be applied to the radio button layout.

enabled

Controls the enabled state of the RadioButton. When false, this button will not be selectable and appears in the disabled ui state.

variant

RadioButtonVariant that will be used to resolve the color used for this RadioButton in different states. The default value is RadioButtonVariant.Emphasised.

interactionSource

The MutableInteractionSource representing the stream of Interactions for this RadioButton. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this RadioButton in different Interactions.

caption

can be used to provide clarification for the option.

onClick

callback to be invoked when the RadioButton is being clicked. Nullable. If null, then this is passive and relies entirely on a higher-level component to control the "selected" state.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.Text
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.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant

fun main() { 
   //sampleStart 
   var selected by remember { mutableIntStateOf(0) }
var loadingState by remember { mutableStateOf(false) }
// Below is an an example of a list using Skapa Radio Buttons in the form of a simple region selection form.
SkapaTheme2(darkTheme = isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        Text(
            text = "Please select your region",
            style = SkapaTheme.typography2.headingM
        )
        Column(
            // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior.
            Modifier.selectableGroup()
        ) {
            // Radio buttons should be associated with a label. If a radio button is used without one, it must strongly connect to another
            // element that represents the value being selected.
            // If using the raw variant without a label, keep in mind that it will not pass Accessibility for neither Talkback nor touch area
            // size. Handle accessibility requirements manually i.e. with Modifier.semantics { contentDescription = "Localized Description" }
            RadioButton(label = "Africa", variant = RadioButtonVariant.Subtle, selected = selected == 0) { selected = 0 }
            RadioButton(label = "Asia", variant = RadioButtonVariant.Subtle, selected = selected == 1) { selected = 1 }
            RadioButton(label = "European Union", variant = RadioButtonVariant.Subtle, selected = selected == 2) { selected = 2 }
            RadioButton(label = "North America", variant = RadioButtonVariant.Subtle, selected = selected == 3) { selected = 3 }
            RadioButton(label = "South America", variant = RadioButtonVariant.Subtle, selected = selected == 4) { selected = 4 }
            RadioButton(label = "United Kingdom", variant = RadioButtonVariant.Subtle, selected = selected == 5) { selected = 5 }
        }
        Button(
            modifier = Modifier
                .fillMaxWidth(),
            label = "Continue",
            loading = loadingState,
            iconId = R.drawable.ic_jumbobutton_arrow,
            iconPosition = IconPosition.Horizontal.Trailing
        ) {
            loadingState = !loadingState
        }
    }
} 
   //sampleEnd
}