RadioButtonPreference

RadioButtonPreference is a radio button component in Miuix that provides a title, summary, and radio button control. It supports click interactions and is commonly used in single-select settings and selection lists. When an item is selected, its title and summary are tinted with the theme color.

Import

import top.yukonga.miuix.kmp.preference.RadioButtonPreference

Basic Usage

RadioButtonPreference is typically used within a mutually exclusive group, with each option placed in its own card:

val options = listOf("Option A", "Option B", "Option C")
var selectedIndex by remember { mutableIntStateOf(0) }

options.forEachIndexed { index, option ->
    Card(
        modifier = Modifier.padding(bottom = 12.dp)
    ) {
        RadioButtonPreference(
            title = option,
            selected = selectedIndex == index,
            onClick = { selectedIndex = index }
        )
    }
}

RadioButton with Summary

var selectedIndex by remember { mutableIntStateOf(0) }

RadioButtonPreference(
    title = "Option A",
    summary = "Description for option A",
    selected = selectedIndex == 0,
    onClick = { selectedIndex = 0 }
)

Component States

Disabled State

RadioButtonPreference(
    title = "Disabled RadioButton",
    summary = "This radio button is currently unavailable",
    selected = true,
    onClick = {},
    enabled = false
)

Properties

RadioButtonPreference Properties

Property Name	Type	Description	Default Value	Required
title	String	Title of the radio button item	-	Yes
selected	Boolean	Radio button selected state	-	Yes
onClick	(() -> Unit)?	Callback when radio button is clicked	-	Yes
modifier	Modifier	Modifier applied to component	Modifier	No
summary	String?	Summary description	null	No
colors	RadioButtonPreferenceColors	Title and summary color configuration	RadioButtonPreferenceDefaults.radioButtonPreferenceColors()	No
radioButtonColors	RadioButtonColors	RadioButton control color configuration	RadioButtonDefaults.radioButtonColors()	No
startAction	@Composable (() -> Unit)?	Custom start content	null	No
endActions	@Composable (RowScope.() -> Unit)?	Custom end content	null	No
radioButtonLocation	RadioButtonLocation	Radio button position (Start or End)	RadioButtonLocation.Start	No
bottomAction	@Composable (() -> Unit)?	Custom bottom content	null	No
insideMargin	PaddingValues	Internal content padding	BasicComponentDefaults.InsideMargin	No
holdDownState	Boolean	Whether the component is held down	false	No
enabled	Boolean	Whether component is interactive	true	No

RadioButtonPreferenceDefaults Object

The RadioButtonPreferenceDefaults object provides default color configurations for the RadioButtonPreference component.

Methods

Method Name	Type	Description
radioButtonPreferenceColors()	RadioButtonPreferenceColors	Creates default color config for title and summary

RadioButtonPreferenceColors Class

Property Name	Type	Description
titleColor	BasicComponentColors	Title text color
selectedTitleColor	BasicComponentColors	Title text color when selected
summaryColor	BasicComponentColors	Summary text color
selectedSummaryColor	BasicComponentColors	Summary text color when selected

Advanced Usage

Custom Colors

var selected by remember { mutableStateOf(false) }

RadioButtonPreference(
    title = "Custom Colors",
    summary = "RadioButton with custom colors",
    colors = RadioButtonPreferenceDefaults.radioButtonPreferenceColors(
        titleColor = BasicComponentDefaults.titleColor(
            color = MiuixTheme.colorScheme.primary
        ),
        summaryColor = BasicComponentDefaults.summaryColor(
            color = MiuixTheme.colorScheme.secondary
        )
    ),
    selected = selected,
    onClick = { selected = !selected },
    radioButtonColors = RadioButtonDefaults.radioButtonColors(
        selectedColor = Color.Red
    )
)

Using with Dialog

var showDialog by remember { mutableStateOf(false) }
var selectedTheme by remember { mutableIntStateOf(0) }
val themes = listOf("Light", "Dark", "System")

Scaffold {
    ArrowPreference(
        title = "Theme Settings",
        onClick = { showDialog = true },
        holdDownState = showDialog
    )

    OverlayDialog(
        title = "Theme Settings",
        show = showDialog,
        onDismissRequest = { showDialog = false }
    ) {
        Card {
            themes.forEachIndexed { index, theme ->
                RadioButtonPreference(
                    title = theme,
                    selected = selectedTheme == index,
                    onClick = { selectedTheme = index }
                )
            }
        }

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.padding(top = 12.dp)
        ) {
            TextButton(
                text = "Cancel",
                onClick = { showDialog = false },
                modifier = Modifier.weight(1f)
            )
            Spacer(Modifier.width(16.dp))
            TextButton(
                text = "Confirm",
                onClick = { showDialog = false },
                modifier = Modifier.weight(1f),
                colors = ButtonDefaults.textButtonColorsPrimary()
            )
        }
    }
}

Changelog

Last edited 3 months ago

View full history

f685c65-library: Group RadioButtonPreference text colors into one colors param

297a357-library: Tint RadioButtonPreference title and summary when selected

0b7ec07-library: refactor: unify dropdown and spinner components (#315)

ee05b13-library!: restructure modules into miuix-ui and miuix-preference (#282)

ef12d4f-library: add RadioButton and SuperRadioButton components (#270)