Switch

Functions summary

Unit
@Composable
Switch(
    checked: Boolean,
    modifier: Modifier,
    colors: SwitchColors,
    enabled: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    interactionSource: MutableInteractionSource?
)

Switch provides an animated switch for use as a toggle control in ToggleChip or SplitToggleChip.

Functions

@Composable
fun Switch(
    checked: Boolean,
    modifier: Modifier = Modifier,
    colors: SwitchColors = SwitchDefaults.colors(),
    enabled: Boolean = true,
    onCheckedChange: ((Boolean) -> Unit)? = null,
    interactionSource: MutableInteractionSource? = null
): Unit

Switch provides an animated switch for use as a toggle control in ToggleChip or SplitToggleChip.

Example of a ToggleChip with Switch toggle control:

import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.Switch
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.ToggleChip
import androidx.wear.compose.material.ToggleChipDefaults

var checked by remember { mutableStateOf(true) }
// The primary label should have a maximum 3 lines of text
// and the secondary label should have max 2 lines of text.
ToggleChip(
    label = { Text("SwitchIcon", maxLines = 3, overflow = TextOverflow.Ellipsis) },
    secondaryLabel = {
        Text("With secondary label", maxLines = 2, overflow = TextOverflow.Ellipsis)
    },
    checked = checked,
    // For Switch  toggle controls the Wear Material UX guidance is to set the
    // unselected toggle control color to ToggleChipDefaults.switchUncheckedIconColor()
    // rather than the default.
    colors =
        ToggleChipDefaults.toggleChipColors(
            uncheckedToggleControlColor = ToggleChipDefaults.SwitchUncheckedIconColor
        ),
    toggleControl = { Switch(checked = checked, enabled = true) },
    onCheckedChange = { checked = it },
    appIcon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
            contentDescription = "airplane",
            modifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center),
        )
    },
    enabled = true,
)
Parameters
checked: Boolean

Boolean flag indicating whether this switch is currently toggled on.

modifier: Modifier = Modifier

Modifier to be applied to the switch. This can be used to provide a content description for accessibility.

colors: SwitchColors = SwitchDefaults.colors()

SwitchColors from which the colors of the thumb and track will be obtained.

enabled: Boolean = true

Boolean flag indicating the enabled state of the Switch (affects the color).

onCheckedChange: ((Boolean) -> Unit)? = null

Callback to be invoked when Switch is clicked. If null, then this is passive and relies entirely on a higher-level component to control the state (such as ToggleChip or SplitToggleChip).

interactionSource: MutableInteractionSource? = null

When also providing onCheckedChange, an optional hoisted MutableInteractionSource for observing and emitting Interactions for this switch. You can use this to change the switch's appearance or preview the switch in different states. Note that if null is provided, interactions will still happen internally.