RadioButtonPreference

RadioButtonPreference is a radio button component in COUI that provides a title, summary, and radio button control. It supports click interactions and is commonly used in single-select settings and selection lists.

Import

import io.github.suqi8.coui.kmp.preference.RadioButtonPreference

Basic Usage

RadioButtonPreference is typically used within a mutually exclusive group:

var selectedIndex by remember { mutableIntStateOf(0) }

Card {
    RadioButtonPreference(
        title = "Option A",
        selected = selectedIndex == 0,
        onClick = { selectedIndex = 0 }
    )
    RadioButtonPreference(
        title = "Option B",
        selected = selectedIndex == 1,
        onClick = { selectedIndex = 1 }
    )
    RadioButtonPreference(
        title = "Option C",
        selected = selectedIndex == 2,
        onClick = { selectedIndex = 2 }
    )
}

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
titleColor	BasicComponentColors	Title text color configuration	BasicComponentDefaults.titleColor()	No
summary	String?	Summary description	null	No
summaryColor	BasicComponentColors	Summary text color configuration	BasicComponentDefaults.summaryColor()	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	Location of the radio button control	RadioButtonLocation.Start	No
bottomAction	@Composable (() -> Unit)?	Custom bottom content	null	No
insideMargin	PaddingValues	Internal content padding	BasicComponentDefaults.InsideMargin	No
cardListPosition	CardListPosition	Row position inside its card group; rounded outer edges gain extra padding	CardListPosition.None	No
holdDownState	Boolean	Whether the component is held down	false	No
enabled	Boolean	Whether component is interactive	true	No

RadioButtonLocation Options

Option	Description
Start	The radio button is placed at the start (default)
End	The radio button is placed at the end

Advanced Usage

Radio Button at the End

var selectedIndex by remember { mutableIntStateOf(0) }

RadioButtonPreference(
    title = "Option A",
    selected = selectedIndex == 0,
    onClick = { selectedIndex = 0 },
    radioButtonLocation = RadioButtonLocation.End
)

Custom Colors

var selected by remember { mutableStateOf(false) }

RadioButtonPreference(
    title = "Custom Colors",
    titleColor = BasicComponentDefaults.titleColor(
        color = COUITheme.colorScheme.primary
    ),
    summary = "RadioButton with custom colors",
    summaryColor = BasicComponentDefaults.summaryColor(
        color = COUITheme.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 1 day ago

View full history

70fa552-library: vary row height by position inside a card group

429b622-docs: rebrand site to COUI and audit all component pages

9aba0de-chore: rename package from com.suqi8 to io.github.suqi8

7acb5ab-library: retheme to COUI 16 and rename Miuix to COUI

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

aada118-library: Tint RadioButtonPreference title and summary when selected

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

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

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