New Compose Multiplatform components arrived on Composables UICheck it out →

Switch

Switches toggle the state of a single item on or off.

Switches image

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.7.0-beta03")
}

Overloads

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

Parameters

namedescription
checkedwhether or not this component is checked
onCheckedChangecallback to be invoked when Switch is being clicked, therefore the change of checked state is requested. If null, then this is passive and relies entirely on a higher-level component to control the "checked" state.
modifierModifier to be applied to the switch layout
enabledwhether the component is enabled or grayed out
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s 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.
colors[SwitchColors] that will be used to determine the color of the thumb and track in different states. See [SwitchDefaults.colors].

Code Example

SwitchSample

@Composable
@Sampled
fun SwitchSample() {
    val checkedState = remember { mutableStateOf(true) }
    Switch(
        checked = checkedState.value,
        onCheckedChange = { checkedState.value = it }
    )

    var pineappleOnPizza by remember { mutableStateOf(true) }

    Row(
        Modifier
            .padding(16.dp)
            .toggleable(
                role = Role.Switch,
                value = pineappleOnPizza,
                onValueChange = { pineappleOnPizza = it },
            )
    ) {
        Switch(checked = pineappleOnPizza, onCheckedChange = null)
        Spacer(Modifier.width(8.dp))
        Text("Pineapple on pizza?")
    }
}