{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

SwitchKt

public final class SwitchKt


Summary

Public methods

static final void
@Composable
Switch(
    boolean checked,
    Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> thumbContent,
    boolean enabled,
    @NonNull SwitchColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design Switch.

Public methods

Switch

@Composable
public static final void Switch(
    boolean checked,
    Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> thumbContent,
    boolean enabled,
    @NonNull SwitchColors colors,
    @NonNull MutableInteractionSource interactionSource
)

Material Design Switch.

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

Switch image

import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Switch
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

var checked by remember { mutableStateOf(true) }
Switch(
    modifier = Modifier.semantics { contentDescription = "Demo" },
    checked = checked,
    onCheckedChange = { checked = it })

Switch can be used with a custom icon via thumbContent parameter

import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material3.Icon
import androidx.compose.material3.Switch
import androidx.compose.material3.SwitchDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics

var checked by remember { mutableStateOf(true) }
// Icon isn't focusable, no need for content description
val icon: (@Composable () -> Unit)? = if (checked) {
    {
        Icon(
            imageVector = Icons.Filled.Check,
            contentDescription = null,
            modifier = Modifier.size(SwitchDefaults.IconSize),
        )
    }
} else {
    null
}

Switch(
    modifier = Modifier.semantics { contentDescription = "Demo with icon" },
    checked = checked,
    onCheckedChange = { checked = it },
    thumbContent = icon
)
Parameters
boolean checked

whether or not this switch is checked

Function1<@NonNull BooleanUnit> onCheckedChange

called when this switch is clicked. If null, then this switch will not be interactable, unless something else handles its input events and updates its state.

@NonNull Modifier modifier

the Modifier to be applied to this switch

@Composable Function0<Unit> thumbContent

content that will be drawn inside the thumb, expected to measure SwitchDefaults.IconSize

boolean enabled

controls the enabled state of this switch. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull SwitchColors colors

SwitchColors that will be used to resolve the colors used for this switch in different states. See SwitchDefaults.colors.

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this switch. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this switch in different states.