SwitchPreference

SwitchPreference is a switch component in COUI that provides a title, summary, and a switch control on the right. It supports click interaction and is commonly used in settings items and preference toggles.

Import

kotlin

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

Basic Usage

The SwitchPreference component provides basic switch functionality:

kotlin

var isChecked by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Switch Option",
    checked = isChecked,
    onCheckedChange = { isChecked = it }
)

Switch with Summary

kotlin

var wifiEnabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "WiFi",
    summary = "Turn on to connect to wireless networks",
    checked = wifiEnabled,
    onCheckedChange = { wifiEnabled = it }
)

Component States

Disabled State

kotlin

SwitchPreference(
    title = "Disabled Switch",
    summary = "This switch is currently unavailable",
    checked = true,
    onCheckedChange = {},
    enabled = false
)

Properties

SwitchPreference Properties

Property Name	Type	Description	Default Value	Required
checked	Boolean	Switch checked state	-	Yes
onCheckedChange	(Boolean) -> Unit	Switch state change callback	-	Yes
title	String	Switch item title	-	Yes
modifier	Modifier	Component modifier	Modifier	No
titleColor	BasicComponentColors	Title text color configuration	BasicComponentDefaults.titleColor()	No
summary	String?	Switch item summary	null	No
summaryColor	BasicComponentColors	Summary text color configuration	BasicComponentDefaults.summaryColor()	No
startAction	@Composable (() -> Unit)?	Custom start side content	null	No
endActions	@Composable RowScope.() -> Unit	Custom end side content (before switch)	{}	No
bottomAction	@Composable (() -> Unit)?	Custom bottom side content	null	No
switchColors	SwitchColors	Switch control color configuration	SwitchDefaults.switchColors()	No
insideMargin	PaddingValues	Component 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	Component interactive state	true	No

Advanced Usage

With Start Icon

kotlin

var enabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Test",
    summary = "Enable to allow testing",
    checked = enabled,
    onCheckedChange = { enabled = it },
    startAction = {
        Icon(
            imageVector = COUIIcons.Sort,
            contentDescription = "Command Icon",
            tint = COUITheme.colorScheme.onBackground,
            modifier = Modifier.padding(end = 12.dp)
        )
    }
)

With End Actions

kotlin

var locationEnabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Location Services",
    summary = "Allow apps to access location information",
    checked = locationEnabled,
    onCheckedChange = { locationEnabled = it },
    endActions = {
        Text(
            text = if (locationEnabled) "Enabled" else "Disabled",
            color = COUITheme.colorScheme.onSurfaceVariantActions,
            modifier = Modifier.padding(end = 6.dp)
        )
    }
)

With Animated Content Visibility

kotlin

var parentEnabled by remember { mutableStateOf(false) }
var childEnabled by remember { mutableStateOf(false) }

Column {
    SwitchPreference(
        title = "Main Setting",
        summary = "Turn on to show more options",
        checked = parentEnabled,
        onCheckedChange = { parentEnabled = it }
    )
    AnimatedVisibility(
        visible = parentEnabled
    ) {
        SwitchPreference(
            title = "Sub Setting",
            summary = "Only available when main setting is enabled",
            checked = childEnabled,
            onCheckedChange = { childEnabled = it }
        )
    }
}

Custom Colors

kotlin

var customEnabled by remember { mutableStateOf(false) }

SwitchPreference(
    title = "Custom Colors",
    titleColor = BasicComponentDefaults.titleColor(
        color = COUITheme.colorScheme.primary
    ),
    summary = "Switch with custom colors",
    summaryColor = BasicComponentDefaults.summaryColor(
        color = COUITheme.colorScheme.secondary
    ),
    checked = customEnabled,
    onCheckedChange = { customEnabled = it },
    switchColors = SwitchDefaults.switchColors(
        checkedThumbColor = COUITheme.colorScheme.primary,
        checkedTrackColor = COUITheme.colorScheme.primary.copy(alpha = 0.2f)
    )
)

Use with Dialog

kotlin

var showDialog by remember { mutableStateOf(false) }
var option by remember { mutableStateOf(false) }

Scaffold {
    ArrowPreference(
        title = "Advanced Settings",
        onClick = { showDialog = true },
        holdDownState = showDialog
    )
    OverlayDialog(
        title = "Advanced Settings",
        show = showDialog,
        onDismissRequest = { showDialog = false }
    ) {
        Card {
            SwitchPreference(
                title = "Experimental Features",
                summary = "Enable features under development",
                checked = option,
                onCheckedChange = { option = it }
            )
        }
        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

SwitchPreference ​

Import ​

Basic Usage ​

Switch with Summary ​

Component States ​

Disabled State ​

Properties ​

SwitchPreference Properties ​

Advanced Usage ​

With Start Icon ​

With End Actions ​

With Animated Content Visibility ​

Custom Colors ​

Use with Dialog ​

Changelog

SwitchPreference

Import

Basic Usage

Switch with Summary

Component States

Disabled State

Properties

SwitchPreference Properties

Advanced Usage

With Start Icon

With End Actions

With Animated Content Visibility

Custom Colors

Use with Dialog