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

RadioButton

fun RadioButton(selected: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: RadioButtonVariant = 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.

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.platform.LocalUriHandler
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
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.HyperlinkColor
import net.ikea.skapa.ui.components.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant
import net.ikea.skapa.ui.components.hyperlinkStyle

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(isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        Text(
            text = "Please select your region",
            style = SkapaTheme.typography.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: String, selected: Boolean, modifier: Modifier = Modifier, enabled: Boolean = true, variant: RadioButtonVariant = 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 = RadioButtonVariant.Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, caption: String? = null, onClick: () -> Unit?)

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

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.

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.platform.LocalUriHandler
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
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.HyperlinkColor
import net.ikea.skapa.ui.components.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant
import net.ikea.skapa.ui.components.hyperlinkStyle

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(isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        Text(
            text = "Please select your region",
            style = SkapaTheme.typography.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 = RadioButtonVariant.Emphasised, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, caption: String? = null, onClick: () -> Unit?)

Deprecated (with error)

Use the functions with AnnotatedString or String instead. If you need to render HTML links use the AnnotatedString version with LinkAnnotation

Replace with

RadioButton(label = buildAnnotatedString { append(label) }, selected = selected, modifier = modifier, enabled = enabled, variant = variant, interactionSource = interactionSource, caption = caption, onClick = onClick)

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

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

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.

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.platform.LocalUriHandler
import androidx.compose.ui.text.LinkAnnotation
import androidx.compose.ui.text.TextLinkStyles
import androidx.compose.ui.text.buildAnnotatedString
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.HyperlinkColor
import net.ikea.skapa.ui.components.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant
import net.ikea.skapa.ui.components.hyperlinkStyle

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(isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .padding(SkapaSpacing.space125)
            .fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space100)
    ) {
        Text(
            text = "Please select your region",
            style = SkapaTheme.typography.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
}

RadioButton

Parameters

See also

Samples

Parameters

See also

Samples

Deprecated (with error)

Replace with

Parameters

See also

Samples